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에서 이동 됨]
게시글 목록
| 번호 | 제목 |
|---|---|
| 21248 | |
| 13844 | |
| 529 | |
| 13842 | |
| 526 | |
| 29537 |
HTML
갈팡질팡
2
|
| 518 | |
| 502 | |
| 13840 | |
| 25293 | |
| 21244 | |
| 29532 |
HTML
블로그와 그누연동 가능할까요?
4
|
| 25288 | |
| 29531 |
HTML
안녕하세요..질문좀 드릴꼐요 ^^;
|
| 500 | |
| 13836 |
Flash
플래시버튼으로
3
|
| 21241 | |
| 495 | |
| 13832 |
JavaScript
제목에 한글 영문 숫자 와 공란만 입력하게 하고 싶습니다.
3
|
| 25283 | |
| 21236 | |
| 13830 | |
| 490 | |
| 21220 | |
| 21217 | |
| 25277 | |
| 25276 | |
| 25275 | |
| 484 | |
| 13827 | |
| 13825 | |
| 13819 |
JavaScript
[펌] 정규식 고수님들 ㅠㅠ... '차량번호' 정규식좀..
5
|
| 29529 | |
| 13813 | |
| 479 | |
| 21211 | |
| 25273 | |
| 478 | |
| 21201 | |
| 25272 | |
| 21189 | |
| 477 | |
| 476 | |
| 21185 | |
| 474 | |
| 21181 | |
| 21175 | |
| 472 | |
| 470 | |
| 469 | |
| 467 | |
| 465 | |
| 21168 | |
| 25267 | |
| 463 | |
| 21164 | |
| 21161 | |
| 458 | |
| 21146 | |
| 457 | |
| 13807 | |
| 454 | |
| 29528 | |
| 451 | |
| 447 | |
| 21127 | |
| 21122 | |
| 25262 | |
| 25254 | |
| 21119 | |
| 25251 | |
| 25243 | |
| 25239 |
기획서
웹기획서 작성process
3
|
| 21112 | |
| 442 | |
| 21103 | |
| 25233 | |
| 25222 | |
| 25230 | |
| 441 | |
| 21100 | |
| 25215 | |
| 21097 | |
| 21091 | |
| 25212 | |
| 25210 | |
| 25209 | |
| 21083 | |
| 21080 | |
| 439 | |
| 438 | |
| 436 | |
| 25200 | |
| 21066 | |
| 25195 | |
| 21055 | |
| 21051 | |
| 25192 | |
| 21040 | |
| 13803 |
기타
모바일사이트 시안.
3
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기