아래 이미지에 mouse를 올리거나 내리면,위의 이미지도 변한다.
자체 서류로 연결(link) 시겼슴.
<head>
..
<img src="../gif/rfcoding.gif" border=0 alt="HTML Code"><br>
<script language="Javascript">
<!-- // 감춤 시작
layoutOff=new Image(100,17); // Layout 단추 onmouseout image
layoutOff.src="gif/ulayout.gif";
layoutOn=new Image(100,17); // Layout 단추 onmouseover image
layoutOn.src="gif/ulayout1.gif";
locateOff=new Image(100,17); // Location 단추 onmouseout image
locateOff.src="gif/ulocate.gif";
locateOn=new Image(100,17); // Location 단추 onmouseover image
locateOn.src="gif/ulocate1.gif";
scrnBlank=new Image(100,34); // 빈 screen
scrnBlank.src="gif/ublank.gif";
scrnlayout=new Image(100,34);// Layout screenimage
scrnlayout.src="gif/ulayout.gif";
scrnlocate=new Image(100,34);// Location screenimage
scrnlocate.src="gif/ulocate.gif";
function showImg(imgDocID,imgObjName) { // 표현
document.images[imgDocID].src=eval(imgObjName+".src")
}
// 감춤 끝 -->
</script>
</head>
<body>
..
아래 이미지에 mouse를 올리거나 내리면,위의 이미지도 변한다.
<div class=indent>
<table><tr align=center><td colspan=2 height=40>
<img name="screen" src="gif/ublank.gif" width=100 height=34 border=0
alt="공통 설명 이미지"><br><br>
</td></tr>
<tr><td>
<a href="xmusovr.html"
onmouseover="showImg('img01','layoutOn');showImg('screen','scrnlayout')"
onmouseout="showImg('img01','layoutOff');showImg('screen','scrnBlank')">
<img name="img01" src="gif/ulayout.gif" border=0 alt="Layout"></a>
</td>
<td>
<a href="xmusovr.html"
onmouseover="showImg('img02','locateOn');showImg('screen','scrnlocate')"
onmouseout="showImg('img02','locateOff');showImg('screen','scrnBlank')">
<img name="img02" src="gif/ulocate.gif" border=0 alt="Location"></a>
</td></tr></table>
</div><br>
자체 서류로 연결(link) 시겼슴.<br><br>
</div>
..
</body>
 중요 사항
- 각 이미지의 name을 주시하라. 이미지 위치를 지정 할 때 이 이름으로 조회한다.
- eval(imgObjName + ".src")로서 점검하며 이미지를 표현한다.
- new Image(100,17)로 이미지의 크기를 가로, 세로로 지정한다.
|
제공