DHTML Image Thumbnail Chooser
<style>
body {
background-color:#000000;
color:#E27907;
font-family:Verdana,Arial;
font-size:10pt;
letter-spacing:2;
}
.thumbNormal {
border:4px solid #000000;
cursor: pointer;
}
.thumbSelected {
border:4px solid #ff0000;
}
</style>
<script language="JavaScript" type="text/javascript">
var lastID = 0;
function SelectImg(id) {
if (lastID > 0)
document.getElementById(lastID).className = "thumbNormal";
document.getElementById(id).className = "thumbSelected";
regex = /_tn/;
document.getElementById(0).src = document.getElementById(id).src.replace(regex, ");
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
</script>
Click a photo on the left to view full image.
<table border="0">
<tr>
<td valign="top"><img id="1" class="thumbNormal" src="/images/family_tn.jpg" width="100" height="50" onclick="SelectImg(1)" /> <br />
<img id="2" class="thumbNormal" src="/images/ourdog_tn.jpg" width="100" height="50" onclick="SelectImg(2)" /> <br />
<img id="3" class="thumbNormal" src="/images/fish_tn.jpg" width="100" height="50" onclick="SelectImg(3)" /></td>
<td width="15"></td>
<td valign="top"><img id="0" src="" /></td>
</tr>
</table>
body {
background-color:#000000;
color:#E27907;
font-family:Verdana,Arial;
font-size:10pt;
letter-spacing:2;
}
.thumbNormal {
border:4px solid #000000;
cursor: pointer;
}
.thumbSelected {
border:4px solid #ff0000;
}
</style>
<script language="JavaScript" type="text/javascript">
var lastID = 0;
function SelectImg(id) {
if (lastID > 0)
document.getElementById(lastID).className = "thumbNormal";
document.getElementById(id).className = "thumbSelected";
regex = /_tn/;
document.getElementById(0).src = document.getElementById(id).src.replace(regex, ");
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
</script>
Click a photo on the left to view full image.
<table border="0">
<tr>
<td valign="top"><img id="1" class="thumbNormal" src="/images/family_tn.jpg" width="100" height="50" onclick="SelectImg(1)" /> <br />
<img id="2" class="thumbNormal" src="/images/ourdog_tn.jpg" width="100" height="50" onclick="SelectImg(2)" /> <br />
<img id="3" class="thumbNormal" src="/images/fish_tn.jpg" width="100" height="50" onclick="SelectImg(3)" /></td>
<td width="15"></td>
<td valign="top"><img id="0" src="" /></td>
</tr>
</table>
[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.