|
|
 |
|
 |
| [퍼온글]마우스만 갇다 대도 이미지가 바뀌는 이미지 앨범 만들기 |
조회(8) / 추천 |
|
 |
|
 |
우측의 작은 이미지에 마우스를 올리면 좌측의 큰 이미지가 바뀌는 이미지앨범 만들기 입니다.
아랫쪽에 있는 소스를 복사하여
새글쓰기 - HTML - 붙여넣기 - 등록 하여 넣고 작동 확인후 다시 수정을 눌러 HTML을 누르고
원하는 이미지나 사진 주소를 수정하여 넣고 사용하면 됩니다.
아래의 이미지 앨범의 우측 작은 사진에 마우스를 슬쩍 올려 보세요.
소스는 아래와 같습니다.
<TABLE height=25 cellSpacing=0 cellPadding=0 width=600 align=center>
<TBODY>
<TR>
<TD class=wraptable2 style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; BORDER-LEFT: #cccccc 0px solid; LINE-HEIGHT: 150%; BORDER-BOTTOM: #cccccc 0px solid" width="100%"><FONT color=#333333>
<TABLE cellPadding=10>
<TBODY>
<TR>
<TD bgColor=#ff3000><SPAN id=imgb style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); WIDTH: 100%; HEIGHT: 100%"><IMG id=imgn src="http://i.mota.ru/animals/img/animals_001.jpg" width=550> </SPAN></TD>
<TD vAlign=top width=50 bgColor=#ff3000>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src='http://i.mota.ru/animals/img/animals_001.jpg'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="http://i.mota.ru/animals/img/animals_001.jpg" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src='http://i.mota.ru/animals/img/animals_002.jpg'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="http://i.mota.ru/animals/img/animals_002.jpg" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src='http://i.mota.ru/animals/img/animals_003.jpg'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="http://i.mota.ru/animals/img/animals_003.jpg" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src='http://i.mota.ru/animals/img/animals_004.jpg'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="http://i.mota.ru/animals/img/animals_004.jpg" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src='http://i.mota.ru/animals/img/animals_005.jpg'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="http://i.mota.ru/animals/img/animals_005.jpg" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src='http://i.mota.ru/animals/img/animals_006.jpg'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="http://i.mota.ru/animals/img/animals_006.jpg" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src='http://i.mota.ru/animals/img/animals_007.jpg'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="http://i.mota.ru/animals/img/animals_007.jpg" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src='http://i.mota.ru/animals/img/animals_008.jpg'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="http://i.mota.ru/animals/img/animals_008.jpg" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src='http://i.mota.ru/animals/img/animals_009.jpg'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="http://i.mota.ru/animals/img/animals_009.jpg" width=50></TD></TR></TBODY></TABLE></FONT></TD></TR></TBODY></TABLE>
소스를 알아보기 쉽게 정리하면 아래와 같습니다.
이미지의 갯수나 앨범의 크기는 적당히 조정 하시면 됩니다.
그리고 이 소스는 작은 이미지에 마우스만 올리면 큰 그림이 바뀌도록 도어 있는데
작은 이미지를 클릭하여 큰그림이 바뀌게하는것은
소스중 onMouseOver를 onclick으로 바꾸면 됩니다.
<TABLE height=25 cellSpacing=0 cellPadding=0 width=600 align=center>
<TBODY>
<TR>
<TD class=wraptable2 style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; BORDER-LEFT: #cccccc 0px solid; LINE-HEIGHT: 150%; BORDER-BOTTOM: #cccccc 0px solid" width="100%"><FONT color=#333333>
<TABLE cellPadding=10>
<TBODY>
<TR>
<TD bgColor=#ff3000><SPAN id=imgb style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); WIDTH: 100%; HEIGHT: 100%"><IMG id=imgn src="처음화면에 나오는 이미지 주소" width=550> </SPAN></TD>
<TD vAlign=top width=50 bgColor=#ff3000>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src=' 이미지 주소1 '; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="이미지 주소1" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src=' 이미지 주소2 '; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="이미지 주소2" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src=' 이미지 주소3 '; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="이미지 주소3" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src=' 이미지 주소4'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="이미지 주소4" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src=' 이미지 주소5 '; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="이미지 주소5" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src=' 이미지 주소6 '; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="이미지 주소6" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src=' 이미지 주소7 '; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="이미지 주소7" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src=' 이미지 주소8 '; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px solid; BORDER-BOTTOM: silver 2px solid" src="이미지 주소8" width=50>
<IMG onmouseover="imgb.filters[0].apply(); imgn.src=' 이미지 주소9'; imgb.filters[0].play();" style="BORDER-RIGHT: silver 2px solid; BORDER-TOP: silver 2px solid; BORDER-LEFT: silver 2px
solid; BORDER-BOTTOM: silver 2px solid" src="이미지 주소9" width=50></TD></TR></TBODY></TABLE></FONT></TD></TR></TBODY></TABLE>
|
|
|
|
| [퍼온글]마우스를 갇다 대면 흑백으로 그림이 바뀌는 이미지 |
조회(73) / 추천 |
|
|
|
|
이미지에 마우스를 올리면 칼라에서 흑백으로 색상이 바뀝니다.
아래에 있는 소스를 복사 하여서
새글쓰기 - HTML - 붙여넣기 - 등록 하여서 확인해 보고 다시 수정누르고 HTML눌러서 원하는
이미지를 넣어 바꾸면 됩니다.
아래 이미지에 마우스를 올려 보세요.
소스는 아래와 같습니다.
진한 파란색으로 된 주소를 원하는 이미지 주소로 바꾸면 됩니다.
<CENTER><IMG onmouseover="this.style.filter='GRAY'" onmouseout=
"this.style.filter=''" src="http://blog.joins.com/usr/d/h/dh1218/6/18.gif"> </CENTER>
|
|
|
dbwjdgks님 블로그 > 
퍼온글 원본 : 
블로그 투데이 안내
신고하기
이전
