[자바스크립트]그림위에 마우스 올리면 다른 이미지 뜨기
홈페이지 제작중에 해결되지 않는 문제가 있어서 고수분들께 질문드려요~~~
그림위에 설명박스 대신 그 설명을 이미지로 만든 이미지를 띄울려고 하는데
설명박스 만드는 소스는 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부분에 재목과 설명을 입력하면 해당 단어가 롤오버했을때 출력됩니다.
========================
게시글 목록
| 번호 | 제목 |
|---|---|
| 24900 |
계약서
업무제휴계약서_인터넷
|
| 24899 | |
| 24898 | |
| 24897 | |
| 24896 |
견적서
수의계약 견적서_공사관리
|
| 24895 | |
| 24894 | |
| 24893 | |
| 24892 | |
| 24891 | |
| 24890 | |
| 24889 | |
| 24888 | |
| 24887 | |
| 24886 | |
| 11687 |
JavaScript
일러스트 미리보기 툴을 찾으시는 분들께..
4
|
| 24885 |
계약서
부동산 매매계약서
|
| 24884 | |
| 24883 | |
| 24882 |
계약서
물품매매계약서_계약
|
| 24881 |
계약서
물품구매 표준계약서_구매
|
| 24879 | |
| 24878 | |
| 24877 |
견적서
무역 영문견적서_회사
|
| 24875 |
기획서
마케팅 기획서_기업일반
1
|
| 24874 |
계약서
동업계약서샘플_일반계약
|
| 24873 |
계약서
대리점 계약서_일반계약
|
| 24872 | |
| 24871 | |
| 11683 | |
| 11662 |
Flash
그누보드용 플래시 최근게시물
20
|
| 11659 |
기타
인물 사진 보정하기
2
|
| 29136 | |
| 11647 |
JavaScript
왼쪽에 달면 좋을만한 소스
11
|
| 11644 | |
| 11641 |
JavaScript
최적의 해상도 설정법
2
|
| 11634 | |
| 11632 | |
| 29135 | |
| 11631 |
JavaScript
1px 라인 css와 2개이상 class 적용.
|
| 11628 | |
| 24870 | |
| 24869 |
계약서
기술제휴계약서_영업
|
| 24868 | |
| 24867 | |
| 24866 | |
| 24865 |
계약서
근로계약서_기업일반
|
| 24864 |
계약서
공증 채무승인계약서_채권
|
| 24863 | |
| 24862 |
계약서
고용계약서_총무
|
| 24861 | |
| 24860 |
계약서
계약서_부동산
|
| 11627 | |
| 24859 | |
| 24858 | |
| 24856 |
견적서
견적서_일반기업
1
|
| 24855 | |
| 24854 | |
| 24853 | |
| 24852 | |
| 29130 |
HTML
퀵마스크의 활용 예제
4
|
| 11625 |
JavaScript
익스플로러7 팝업창의 주소창 없애기
1
|
| 11622 | |
| 11617 | |
| 11604 | |
| 11596 | |
| 11591 | |
| 11586 | |
| 29128 |
HTML
외부필터 설치하기
1
|
| 11583 | |
| 11579 | |
| 11578 | |
| 11574 |
MySQL
MySQL 한글 매뉴얼
3
|
| 11566 |
Flash
swf파일에 링크 걸려면??
7
|
| 11565 | |
| 11562 | |
| 11561 |
MySQL
PHP 5.2.0 설치시 MySQL 문제
|
| 29125 |
HTML
움직이는 사진에 효과 넣을때
2
|
| 11558 |
기타
필름효과내기
2
|
| 11556 |
JavaScript
한글폰트가 안 보일때...
1
|
| 11533 |
Flash
국내지도 소스입니다.
22
|
| 11529 |
JavaScript
회전목마 - 스크롤링 소스
3
|
| 29118 |
HTML
포토샵 효과 모음2
6
|
| 11526 |
기타
포토샵 효과 모음
2
|
| 11519 |
JavaScript
[팁] 물방울 효과2
6
|
| 29115 |
HTML
[팁] 물방울 효과
2
|
| 11518 |
MySQL
official 64bit mysql
|
| 11516 | |
| 11515 | |
| 11509 |
JavaScript
CS2에서 포토샵 PSD파일과 일러스트 AI파일 미리보기 기능
5
|
| 11508 | |
| 29112 |
HTML
HTML 사전입니다.
2
|
| 11496 | |
| 29109 | |
| 29106 | |
| 11495 | |
| 11488 |
JavaScript
Ajax가 뭐죠?
6
|
| 11486 | |
| 11483 | |
| 11471 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기