웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
정말 쉬운 이미지 롤오버
2002.12.05 17:01
정말 HTML tag수준으로 이미지를 롤오버하는 소스입니다.
앵커태그에 아래 소스처럼 onMouseOver, onMouseOut을 호출하면 하면됩니다.
이때 사용되는 파라미터에다가 이미지의 name을 호출하고 변환될 이미지 소스정보를 설정합니다.
실제 작성시 사용되는 샘플은 다음과 같습니다.
<A HREF="page1.html" onMouseOver="roll.src='pic-2.gif'" onMouseOut="roll.src='pic.gif'">
<IMG SRC="pic.gif" NAME="roll" BORDER="0"></A>
기본적으로 이미지는 마우스아웃시 사용될 이미지를 태그로 만듭니다.
그리고 앵커태그에 오버시 사용될 이미지를 호출하고 아웃시 다시 원래이미지를 호출하도록 하면
됩니다.
앵커태그에 아래 소스처럼 onMouseOver, onMouseOut을 호출하면 하면됩니다.
이때 사용되는 파라미터에다가 이미지의 name을 호출하고 변환될 이미지 소스정보를 설정합니다.
실제 작성시 사용되는 샘플은 다음과 같습니다.
<A HREF="page1.html" onMouseOver="roll.src='pic-2.gif'" onMouseOut="roll.src='pic.gif'">
<IMG SRC="pic.gif" NAME="roll" BORDER="0"></A>
기본적으로 이미지는 마우스아웃시 사용될 이미지를 태그로 만듭니다.
그리고 앵커태그에 오버시 사용될 이미지를 호출하고 아웃시 다시 원래이미지를 호출하도록 하면
됩니다.
댓글 3
-
ValuableEye
2002.12.05 20:26
-
4Life
2002.12.05 17:23
이렇게 쓰게되면 그림에 마우스를 올렸을때 바로 그림을 다운받아서 룰오버되기때문에 조금 부자연스러울수있습니다
이때는 룰오버될 이미지를 가로 세로 1px로 해서 숨겨놓는상태로 미리 다운받게놓으면 자연스러워지겠죠^^ -
chireu
2003.01.06 03:21
//ValuableEye
마지막에 onMouseOut="image1.src -> 1이 아니라 8이네요.
보시는 분들 참고 하시길.
제목 | 글쓴이 | 날짜 |
---|---|---|
[PHP 동영상강의] 49. 만년달력 제작해보기 [1] | 서기 | 2007.08.08 |
[PHP 동영상강의] 50. 자바스크립트로 풀다운 메뉴제작 [2] | 서기 | 2007.08.08 |
[PHP 동영상강의] 51. db와 연동된 다중 셀렉트 제작하기 [7] | 서기 | 2007.08.08 |
[zbXE 동영상강좌] 1. zbXE 설치하기 [2] | 서기 | 2007.08.16 |
[zbXE 동영상강좌] 2. 포토샵에서 레이아웃 만들기 [12] | 서기 | 2007.08.16 |
[zbXE 동영상강좌] 3. 레이아웃 완성하기 [13] | 서기 | 2007.08.16 |
[PDF 제작하기 동영상강좌] 1. 기본환경 설정 [1] | 서기 | 2007.08.18 |
[PDF 제작하기 동영상강좌] 2. Hello PDF | 서기 | 2007.08.18 |
[PDF 제작하기 동영상강좌] 3. 기존의 PDF파일 불러오기 [2] | 서기 | 2007.08.18 |
간단한 칠판 모양 게시판
[9]
![]() | SoukoZ | 2007.08.19 |
포인트부여시 ...회원로그인 [2] | 구본순 | 2007.08.28 |
관리자모드 - 관리자그룹만 모든 회원리스트보기 [2] | 이지혜609 | 2007.10.23 |
php에서 exif소스이용하기 [5] | 최만순279 | 2007.11.18 |
웹 계정에서 지워지지 않는 폴더 및 파일 삭제하는 방법 [3] | Rising.kr | 2008.01.24 |
OGIT STUDY 1 | OGIT | 2008.02.01 |
OGIT STUDY 2 [1] | OGIT | 2008.02.01 |
OGIT STUDY 3 [1] | OGIT | 2008.02.01 |
웹페이지 미리보기 snapshot 활용하기 [2] | 유창화 | 2008.02.15 |
FLV 사이트 다운로더 소스
![]() | fallstoofast | 2008.03.07 |
해시로부터 주민등록번호 복호화 [2] | fallstoofast | 2008.03.12 |
IMG 태그에서 name을 각각 다르게 설정하셔야 합니다.
물론 링크태그에서 roll도 그 이미지 name으로 변경하셔야 합니다.
ex)
<A HREF="page1.html" onMouseOver="image1.src='pic1-2.gif'" onMouseOut="image1.src='pic1.gif'">
<IMG SRC="pic.gif" NAME="image1" BORDER="0"></A>
<A HREF="page2.html" onMouseOver="image2.src='pic2-2.gif'" onMouseOut="image2.src='pic2.gif'">
<IMG SRC="pic.gif" NAME="image2" BORDER="0"></A>
<A HREF="valueableeye.html" onMouseOver="image8.src='pic6-2.gif'" onMouseOut="image1.src='pic6.gif'">
<IMG SRC="pic.gif" NAME="image8" BORDER="0"></A>