테스트 사이트 - 개발 중인 베타 버전입니다
SIR

그림위에 마우스 올리면 다른 이미지 뜨기

행복속네잎크로버
프로필 보기이 회원 글보기
 · 18년 전 · 2748

[자바스크립트]그림위에 마우스 올리면 다른 이미지 뜨기


홈페이지 제작중에 해결되지 않는 문제가 있어서 고수분들께 질문드려요~~~

그림위에 설명박스 대신 그 설명을 이미지로 만든 이미지를 띄울려고 하는데

설명박스 만드는 소스는  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부분에 재목과 설명을 입력하면 해당 단어가 롤오버했을때 출력됩니다.
 
========================

[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
12201
Flash [초간단]버튼클릭하면 무비클립이 나오게 하고싶어요..
12200
기타 www 자동으로 붙이기
29244
HTML [다운로드] Ajax 기반 웹 2.0 플랫폼 '웹스퀘어' 2
12196
Flash [질문]플래시 위즈위드 메뉴 효과 방법 부탁드립니다. 3
29243
HTML 핑백을 구현하는 방법을 알고싶어요....
12188
Flash 플래시 ActionScript 3.0 프로그래밍 한글 도움말 pdf 7
12184
Flash Open Flash Chart 3
29231
HTML 타이틀 이미지 만드는 방법 11
29230
HTML 리코
12181
기타 툴팁 2
29229
HTML [해결방법] 인터넷 사이트를 열 수 없습니다. 작업이 중단되었습니다.
12179
기타 [펌] IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6. 1
12177
기타 [펌] yum update관련 오류 수정 LINUX 1
12173
Flash 서서히 늘어나는 리사이즈 팝업창 3
29226
HTML 레이어 전환 효과 주기 [IE 전용] 2
12172
정규표현식 자바스크립트 sort()를 이용한 숫자 정렬
25007
간이영수증 양식 2
12171
JavaScript DOM 이용 select box 옵션추가삭제
12170
기타 유용한 팁(일련번호 관련)
29225
HTML 실수로 지운 데이터 살리기..
12167
기타 [질문] UTF-8 ajax회원가입 폼이 안됩니다. 2
12166
JavaScript 아이디 중복체크
12157
기타 빈티지 효과만들기 8
12154
MySQL 그누보드 통합검색 방법... 2
12153
기타 input 테그에서 숫자만 입력 받고 자동 콤마 적용되는 소스
25002
뉴스레터 초안입니다. 4
12151
기타 웹프로그래밍 언어별 인클루드방법!!( 1
29224
HTML 이미지를 갤러리 형태로 [클릭하면 딱 맞는 창으로]
12148
JavaScript 심플한 드롭다운 레이어 메뉴 (2단계 메뉴 구성) 2
29223
HTML 자바스크립트를 이용한 슬라이드 형식 갤러리
12142
기타 리눅스에서 하드웨어 정보확인하는방법 (간단!) 5
29217
HTML 여기에 올려되겟는지 모르겟네요 zip파일 풀기. 1
12141
JavaScript 날짜 관련 쿼리 입니다. 한달을 요일별로 구함..
12136
MySQL linux 웹 호스팅시 가장 많이 쓰이는 명령어 정리^^ 4
12132
MySQL 리눅스랑 유닉스 mysql password함수 저장 틀려요.. 3
12130
MySQL 테이블 깨졌거나 복구 할때 간단한 팁. 1
29216
HTML Table생성 스크립트 파일 뽑아내기
29215
기타 Windows에서 오라클 완전히 삭제 하기..
12126
기타 [기술문서] prototype.js에 대한 좋은 자료가 있어 올립니다 3
12124
JavaScript 마우스 오버시 그림 변하게 하는 스크립트 소스 1
12122
기타 ip 조회하는 스크립트 1
12120
PHP 웹 서버를 이용한 인증 1
12111
JavaScript div 사이즈 5픽셀로 하기. -_- 8
25001
영업활동보고서
25000
고객관리일보!!
24999
거래처별 매출 집계표
24998
일일판매보고서
24997
편리한 거래명세표 양식
24994
제안서 각종 기획, 제안서 , 사업계획서 등 편리한 자료입니다. 2
24985
제안서 홈페이지 제안서, 기획서 사용 시 유용한 자료!! 8
12109
기타 넣을 분류를 찾지 못해 여기에 넣습니다.(사이트별 자동로그인 주소) 1
12105
Flash [질문]플래시 CS버전에서 Instance Name~~!! 3
12104
기타 libphp4.so: cannot restore segment prot after reloc: Permission denied　
12096
Flash apache에서 이미지 캐싱 처리(mod_expires) 7
12094
기타 [펌] EUC-KR -> UTF-8 파일명 변경 1
12091
기타 대용량 파일 업로드 모듈 2
12090
MySQL 리눅스 mysql 에서 백그라운드 실행
12079
JavaScript 거리에서 찍은 인물사진 더 멋있게- 10
29211
HTML 낡은 포스터효과를 내어보자 3
12072
기타 돌아가는 글자 6
29210
HTML 구멍난 자바스크립트 보안
12070
기타 꽃 만들기 (반복 복사 및 메쉬사용 예) 1
29207
HTML 올가미툴에 대해 배워보자 2
12067
JavaScript div layer 위치 Javascript 2
12061
기타 매끄러운 투명 립글로즈 입술 표현하기!! 5
29204
HTML 한글패치 삭제하는 방법 2
12058
기타 Windows Server 2003 에서 Photoshop cs3 설치방법 2
12057
기타 HTTP 인증(Basic타입)이 걸린 URL을 fsockopen에서 여는 방법
12056
PHP php로 엑셀파일 만들기
24984
축의결혼부의부조봉투
12055
JavaScript lampp 스타트 간단명령
12053
JavaScript 중앙정렬 사이트에 영향없이 오른쪽 배너 붙이기 1
12051
MySQL apm 1
12050
MySQL LOG
12049
기타 OpenSSH(Open Secure SHell)
12048
기타 dhcp
12047
Linux X 윈도우
12046
Linux BOOT PROCESS
12045
Linux Linux 명령어 사용방법
12044
기타 kernel compile
12043
JavaScript vi
12042
기타 Nis/NFS
12041
PHP User Management
12040
JavaScript 쉘
12039
기타 Process
12038
Linux 파일 시스템
12037
Linux programming
12036
Flash 시스템 튜닝
12035
JavaScript Quota
12034
MySQL LOG
12033
기타 IP_Masquerading Configuration
12032
Linux 메모리
12031
JavaScript IPCHAINS
12028
MySQL Eclipse PDT 1.0 정식 릴리즈판 그누연동하기. 2
12026
Linux linux + samba 1
12025
Linux 압축 그리고 백업( Backup)
12020
기타 폰트 한글표기로 보기 4
12017
기타 이미지 사진 만들기 예쁜얼굴 만들기 2
12015
기타 이미지파일정보 1
12013
기타 아쿠아버튼 1
이전 다음
전체 목록