[자바스크립트]그림위에 마우스 올리면 다른 이미지 뜨기
홈페이지 제작중에 해결되지 않는 문제가 있어서 고수분들께 질문드려요~~~
그림위에 설명박스 대신 그 설명을 이미지로 만든 이미지를 띄울려고 하는데
설명박스 만드는 소스는 HappyCGI홈페이지에서 구했는데 그걸 이미지 뜨게 하는
소스로 바꾸는게 도저히 안되요~~T.T
=======================================
전채적인 소스설명
<HTML>
<HEAD>
<TITLE> 이미지의 특정부위에 설명 상자 출력 </TITLE>
<script language="JavaScript">
<!--
//마우스 따라다니는 메세지판
function msgposit(){
message.style.posLeft = event.x + 40 + document.body.scrollLeft
message.style.posTop = event.y - 40 + document.body.scrollTop
}
function msgset(str,str2){
var text
text ='<table border="0" cellpadding="6" cellspacing="0" bgcolor="#FDFFF2" style="font-size:9pt; border-width:1; border-color:black; border-style:solid;">'
text += '<tr><td><p><b>' + str + '<br><br></b>' + str2 + '</td></tr></table>'
message.innerHTML=text
}
function msghide(){
message.innerHTML=''
}
//-->
</script>
</HEAD>
<BODY>
<!-- 메시창모양 -->
<div id="message" style="position:absolute; left:78px; top:165px; width:200px; height:62px; z-index:1; border-width:1px; border-style:none;">
<p> </p>
</div>
<!-- 이미지 -->
<p><img src="carengen.jpg" width="574" height="374" border="0" usemap="#ImageMap1">
<!-- 이미지맵 링크 -->
<map name="ImageMap1">
<area shape="rect" coords="40, 214, 94, 273" href="#" onmousemove="msgposit()" onmouseout="msghide()" onmouseover="msgset('엔진오일필터','엔진오일의 불순물을 걸러줍니다.')">
<area shape="rect" coords="243, 241, 293, 291" href="#" onmousemove="msgposit()" onmouseout="msghide()" onmouseover="msgset('엔진오일 채크기','엔진오일의 양을 채크합니다.')">
<area shape="rect" coords="376, 262, 414, 308" href="#" onmousemove="msgposit()" onmouseout="msghide()" onmouseover="msgset('냉각수 주입구','냉각수가 부족할때 보충합니다.')">
<area shape="rect" coords="426, 50, 529, 142" href="#" onmousemove="msgposit()" onmouseout="msghide()" onmouseover="msgset('배터리','차량에 필요한 전력을 공급합니다.')">
<area shape="rect" coords="354, 9, 424, 79" href="#" onmousemove="msgposit()" onmouseout="msghide()" onmouseover="msgset('공기필터','차량의 연료와 혼합되는 공기를 걸러줍니다.')">
<area shape="rect" coords="164, 121, 213, 158" href="#" onmousemove="msgposit()" onmouseout="msghide()" onmouseover="msgset('엔진오일 주입구','엔진오일을 교환할때 엔진오일을 주입하는 곳입니다.')">
<area shape="rect" coords="91, 308, 142, 350" href="#" onmousemove="msgposit()" onmouseout="msghide()" onmouseover="msgset('워셔액 주입구','차량 앞유리창의 윈도우 브러쉬에서 방사되는 워셔액을 보충하는 곳입니다.')" >
</map></p>
</BODY>
</HTML>
우선 <head>부분에 상단에 붉은색으로 표시된 스크립트를 입력합니다.
그리고 이미지 맵이 걸려있는곳에 붉은색으로 표시된 부분을 삽입하면 됩니다.
msgset부분에 재목과 설명을 입력하면 해당 단어가 롤오버했을때 출력됩니다.
========================
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1230 |
 hanpedro |
18년 전 | 1994 | |
| 1229 |
hanpedro |
18년 전 | 2923 | |
| 1228 |
hanpedro |
18년 전 | 2615 | |
| 1227 | 18년 전 | 2914 | ||
| 1226 | 18년 전 | 2352 | ||
| 1225 |
 madem |
18년 전 | 2423 | |
| 1224 | 18년 전 | 2733 | ||
| 1223 |
 예감커뮤니케이션 |
18년 전 | 3973 | |
| 1222 |
mixdesign
|
18년 전 | 2621 | |
| 1221 |
hanpedro |
18년 전 | 2738 | |
| 1220 | 18년 전 | 3201 | ||
| 1219 | 18년 전 | 2905 | ||
| 1218 | 18년 전 | 2088 | ||
| 1217 |
hanpedro |
18년 전 | 2539 | |
| 1216 | 18년 전 | 2543 | ||
| 1215 |
mixdesign
|
18년 전 | 4029 | |
| 1214 |
 사이버매치스틱 |
18년 전 | 4781 | |
| 1213 | 18년 전 | 2310 | ||
| 1212 |
mixdesign
|
18년 전 | 2480 | |
| 1211 |
 comet |
18년 전 | 2415 | |
| 1210 | 18년 전 | 3751 | ||
| 1209 |
mixdesign
|
18년 전 | 2371 | |
| 1208 |
mixdesign
|
18년 전 | 2372 | |
| 1207 |
mixdesign
|
18년 전 | 1713 | |
| 1206 |
mixdesign
|
18년 전 | 1993 | |
| 1205 |
mixdesign
|
18년 전 | 2697 | |
| 1204 |
mixdesign
|
18년 전 | 3575 | |
| 1203 | 18년 전 | 3083 | ||
| 1202 | 18년 전 | 2966 | ||
| 1201 | 18년 전 | 2025 | ||
| 1200 | 18년 전 | 4120 | ||
| 1199 | 18년 전 | 2157 | ||
| 1198 | 18년 전 | 4191 | ||
| 1197 | 18년 전 | 2498 | ||
| 1196 | 18년 전 | 2347 | ||
| 1195 |
 somang |
18년 전 | 3458 | |
| 1194 | 18년 전 | 2232 | ||
| 1193 | 18년 전 | 2140 | ||
| 1192 | 18년 전 | 3271 | ||
| 1191 | 18년 전 | 3947 | ||
| 1190 | 18년 전 | 2196 | ||
| 1189 |
somang |
18년 전 | 2346 | |
| 1188 |
 yunni |
18년 전 | 3822 | |
| 1187 | 18년 전 | 2703 | ||
| 1186 | 18년 전 | 3339 | ||
| 1185 | 18년 전 | 2764 | ||
| 1184 | 18년 전 | 1658 | ||
| 1183 | 18년 전 | 2118 | ||
| 1182 | 18년 전 | 3688 | ||
| 1181 |
mermaid
|
18년 전 | 2910 | |
| 1180 | 18년 전 | 2964 | ||
| 1179 | 18년 전 | 3600 | ||
| 1178 | 18년 전 | 2161 | ||
| 1177 |
 PhotoFly |
18년 전 | 2270 | |
| 1176 | 18년 전 | 3164 | ||
| 1175 | 18년 전 | 1849 | ||
| 1174 |
 뜨락의이름 |
18년 전 | 2218 | |
| 1173 |
뜨락의이름 |
18년 전 | 2522 | |
| 1172 | 18년 전 | 1763 | ||
| 1171 | 18년 전 | 2099 | ||
| 1170 | 18년 전 | 1986 | ||
| 1169 | 18년 전 | 2501 | ||
| 1168 | 18년 전 | 1919 | ||
| 1167 | 18년 전 | 1713 | ||
| 1166 | 18년 전 | 1742 | ||
| 1165 | 18년 전 | 1723 | ||
| 1164 | 18년 전 | 2761 | ||
| 1163 | 18년 전 | 1549 | ||
| 1162 |
PhotoFly |
18년 전 | 5664 | |
| 1161 |
이걸~어쩌나~
|
18년 전 | 2391 | |
| 1160 | 18년 전 | 1657 | ||
| 1159 | 18년 전 | 4700 | ||
| 1158 | 18년 전 | 2045 | ||
| 1157 | 18년 전 | 4839 | ||
| 1156 | 18년 전 | 3182 | ||
| 1155 | 18년 전 | 2124 | ||
| 1154 | 18년 전 | 1822 | ||
| 1153 |
BEST79
|
18년 전 | 2094 | |
| 1152 | 18년 전 | 1717 | ||
| 1151 | 18년 전 | 1834 | ||
| 1150 | 18년 전 | 1831 | ||
| 1149 |
inniskun
|
18년 전 | 2473 | |
| 1148 |
뜨락의이름 |
18년 전 | 3491 | |
| 1147 |
뜨락의이름 |
18년 전 | 5967 | |
| 1146 |
뜨락의이름 |
18년 전 | 3855 | |
| 1145 | 18년 전 | 3055 | ||
| 1144 | 18년 전 | 2128 | ||
| 1143 | 18년 전 | 2397 | ||
| 1142 | 18년 전 | 2183 | ||
| 1141 |
뜨락의이름 |
18년 전 | 2297 | |
| 1140 | 18년 전 | 2400 | ||
| 1139 | 18년 전 | 2837 | ||
| 1138 | 18년 전 | 2527 | ||
| 1137 | 18년 전 | 1985 | ||
| 1136 | 18년 전 | 3123 | ||
| 1135 | 18년 전 | 3583 | ||
| 1134 | 18년 전 | 3829 | ||
| 1133 |
자반고등어
|
18년 전 | 3331 | |
| 1132 | 18년 전 | 3376 | ||
| 1131 | 18년 전 | 2559 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기