웹마스터 팁
정말 쉬운 이미지 롤오버
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이네요.
보시는 분들 참고 하시길.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 제로보드 data 디렉토리에 링크방지 걸기..(울트라 허접팁) [5] | 무꾸 | 2003.06.27 |
| 2차도메인을 이용한 내컴퓨터 자료실로 이용하기 [3] | 무꾸 | 2003.06.27 |
| 스팸메일 유의 하십시오... [1] | Dopesoul | 2003.07.03 |
| 저만의 보안 방법. (리눅스) [12] | Blainfo | 2003.07.04 |
| 쉘상에서 사용자 계정과 DB계정 간단하게 생성하기. | NOP_0x90 | 2003.07.05 |
| 쉘상에서 DB 간단하게 생성하기.. 수정입니다. [1] | NOP_0x90 | 2003.07.05 |
| NOP_0x90 Document No.1(APM연동 Mysql-4.0.13편) | NOP_0x90 | 2003.07.06 |
| NOP_0x90 Document No.2(APM연동 Mysql-DB설정편) | NOP_0x90 | 2003.07.06 |
| NOP_0x90 Document No.3(APM연동 apache-2.0.46편) | NOP_0x90 | 2003.07.06 |
| NOP_0x90 Document No.4(APM연동 php-4.3.2편) [2] | NOP_0x90 | 2003.07.06 |
| 우리호스트 DNS 활용하기 [4] | HoYa™ | 2003.07.08 |
Windows 2003 엔터프라이즈 에서 FTP 사용하기..(이미지첨부버젼)
[10]
 | 무꾸 | 2003.07.26 |
| apache 다운받기 - 그림설명 [2] | 이성헌 | 2003.07.27 |
| php 다운 받기 - 그림설명 [1] | 이성헌 | 2003.07.27 |
| phpzendoptimizer 다운받기 - 그림설명 [7] | 이성헌 | 2003.07.27 |
| mysql 다운받기 - 그림설명 [3] | 이성헌 | 2003.07.27 |
| 색다른 리눅스 배포판.. [2] | Dopesoul | 2003.08.02 |
| 리눅스 환경에서 APM+Tomcat의 개발환경 만들기 | 굿스피드 | 2003.08.04 |
| 긴급 - mysql 설치때 주의점(window xp 에서) [3] | 이성헌 | 2003.08.11 |
| Windows2000 Ad Server 계열쓰시는분들의 보안. [7] | 씨파개 | 2003.08.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>