그림에 마우스를 대면 바뀌는 팁 .
이번 스크립트는 그림이 바뀌는 스크립트입니다. 많은 홈페이지 메뉴에 쓰이는데 여러분도 아시는 것이 좋겠지요? 지금 제로네이션 메뉴도 이 스크립트를 쓴 것입니다.
<script language="javascript">
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3){
init = "net";
}
else{
init = "ie";
}
if ((init == "net")||((init == "ie")&&(browserVer >= 4))){
image1on = new Image;
image1on.src = "img/java1s.gif";
image1off = new Image;
image1off.src = "img/java1.gif";
image2on = new Image;
image2on.src = "img/java2s.gif";
image2off = new Image;
image2off.src = "img/java2.gif";
}
function img_on(imgName)
{
if (((init == "net")&&(browserVer >=3))||((init ==
"ie")&&(browserVer >= 4))){
imgOn = eval(imgName + "on.src");
document[imgName].src = imgOn;
}
}
function img_off(imgName)
{
if (((init == "net")&&(browserVer >=3))||((init ==
"ie")&&(browserVer >= 4))){
imgOff = eval(imgName + "off.src");
document[imgName].src = imgOff;
}
}
</script>
이 소스는 저기 위에 그림이 바뀌는데 쓰인 소스입니다. 우선 이 소스를 복사 하셔서 문서의 맨 윗부분 <head> 와 </head> 사이에 넣어 주십시요.
그리고 나신후에는 링크 될 곳에 이런식으로 추가 해줍니다.
<a href="문서.htm" onMouseover="img_on('image1')" onMouseout="img_off('image1')"><img src="img/java1.gif" name=image1 border=0></a>
꼭 잊지 말아야 할것은 그림 삽입시 name="image1" 이라는 것을 꼭 넣어줘야 한다는 것입니다. 안 그러면은 그림이 안 바뀌지요.
만약 그림이 여러개가 된다면은 image1의 숫자만 image2, image3 이런식으로 바꾸어 주면 됩니다.
쓰인 그림파일
-> image1off.src = "img/java1.gif"
-> imageon.src = "img/java1s.gif"
위의 스크립트에서 image1on.src="img/java1s.gif" 마우스를 대면 바뀌는 그림이고 image1off.src="img/java1.gif" 부분은 마우스를 때면은 돌아오는 그림입니다.
----------------------------------------------------------------------
출처: 셀클럽 - http://sellclub.co.kr
다른곳에서 이용할시에는 꼭 출처를 같이 복사이용 바랍니다.
'컴퓨터-유용한팁 > HTML' 카테고리의 다른 글
| 글자가 바뀌는 버튼. (0) | 2015.09.05 |
|---|---|
| 살짝 스치기만 해도 새창이 뜬다 . (0) | 2015.09.05 |
| 들어오거나 나갈때 새창 열기 스크립트 . (0) | 2015.09.05 |
| 테이블,이미지 테두리 관련 스타일 (0) | 2015.09.05 |
| 마우스를 가져가면 밝아지는 그림연출 소스. (0) | 2015.09.05 |