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

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

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

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


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

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

설명박스 만드는 소스는  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에서 이동 됨]
목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
11111
기타 이미지 저작권 관련 설명 4탄 1
11108
기타 이미지 저작권 관련 설명 3탄 2
11107
기타 이미지 저작권 관련 설명 2탄
11105
JavaScript 이미지 저작권 관련 설명 1탄 1
11101
Flash 초간단 플래시테두리 없애는 방법입니다. 3
11099
JavaScript 직접만든 자바스크립트 Trim 함수입니다. 1
11095
PHP exif 익스텐션 실행이 안되는 경우 3
11093
기타 선택하면 입력폼에 자동입력 기능 질문입니다 1
24843
이력서양식입니다 2
11065
PHP [입문자용 강좌] 함수 1 27
11063
기타 Ajax을 이용한 채팅 입니다. 1
11059
JavaScript PHP Ajax 프레임워크 3
29001
HTML [입문자용 강좌]제어구조 (if, else if, else) 18
11054
JavaScript 일반PC로 서버 만들경우.... 4
28999
HTML Prototype 1.5.0 Document 1
11050
Flash 글자 나눠서 현재 위치에 레이어 별로 분산하기... 3
28998
HTML mshtml.dll error 발생시
28956
HTML [입문자용 강좌]연산자란? 꼭 숙지!!!! 41
11044
PHP [입문자용 강좌] 미리 정의된 아주 유용한 상수 5
11023
JavaScript [입문자용 강좌] 상수? 20
11004
기타 [입문자용 강좌] 변수형? 18
28946
HTML [입문자용강좌] 변수란? 9
10993
PHP [입문자용강좌] 페이지내에서 php 사용하기 10
10990
기타 div에도 style='TABLE-layout:fixed' 같은 기능 없나요? 2
28903
HTML php 어떻게 하면 잘 할수 있는가? 42
10984
기타 폼입력시 한글자동입력 스타일 적용 5
24842
계약서 고용계약서
28900
HTML marquee 태그 활용법 2
10982
기타 iframe-사이즈 자동 조절 1
10978
JavaScript 실제 이미지 크기 알아내기 3
28899
HTML 4.0이상의 PHP에서 register_globals 문제
10974
Flash 플래쉬 투명바탕 어떻게 하는거죠? 3
10970
기타 CSS 와 DIV만을 이용해 화면 중앙(수직, 수평모두)에 내용 정렬하기 3
24831
기획서 홈페이지 제작기획서, 계약서 [http://designsian.com] 10
24830
계약서 표준임대차 계약서
10967
JavaScript ie,firefox alpha값 2
10965
MySQL mssql에서 구분자를 넣는 txt파일로 저장하여 mysql에서 load data infile 로 넣는다 1
10963
MySQL MySQL Dump뜨는 방법 및 복구 방법 1
10956
JavaScript 왕초보 소스 중 질문있어요...^^; 6
10954
Flash 플래시 그림판 소스 입니다. 1
10950
Flash [펌]겔러리에 적용하면 괜찮은 소스 3
10946
기타 플래쉬로 사진몇장 연속해서 보여주기 어&#45935;게 하나요? 3
24818
견적서 홈페이지 견적서입니다 11
10943
Flash 플래시 활성화 영역 안나오게 하기... 2
28885
JavaScript 외부의 이미지를 자신의 서버경로에 썸네일 만드는 방법 13
24813
쇼핑몰 계획서 4
10940
Flash 플래시 버튼에서 자바 스크립트로 새창열때~ 2
10927
JavaScript 포토샵질문드려요. 12
10925
Flash FLEX 참고자료 URL 1
10920
JavaScript 이동도구(v)팁 4
10916
기타 div 레이아웃 예제. 깔끔하고 편리하게 정리된곳. 3
10914
PHP DHTML 에디터를 정리해 놓은 사이트 입니다. 1
10913
기타 FLEX 란?
10908
Flash 플래시 플레이어 오류발생할 때 패치 4
10905
PHP 타겟(target) 쓰는 법 2
10904
Flash 패치문제 하나의 js파일만 만들고 여러개의 플래쉬무비 해결하는 방법 (4) -보충
10899
기타 마우스 포인터가 열십자(+) 모양일 때 4
24803
2007년 달력 월간계획표 [엑셀] 9
28882
HTML 링크클릭시 나타나는 점선 없애주기 2
10898
Flash 간단한 퀵메뉴
28878
기타 Ajax 마스터하기 3
28877
HTML [펌] php로 쉘에서 사용자입력 및 인자(인수)값 넘겨받기
24802
오픈 소스와 오픈 비지니스
24801
오픈 소스 경제학
24800
e-비지니스 산업연구
24799
IT 산업 분류체계
10893
기타 툴바 뒤로 파일이 자꾸 숨어버립니다. 4
10892
기타 form객체내 select 항목의 이름이 s_date[2] 와 같이 배열명으로 되어 있으면?
24797
크로싱 브라우저 관련 1
24794
마케팅 입소문 마케팅 연구분석 리포트 2
10891
Flash 정상적인 사운드가 빠르게 재생될때
28871
HTML id와 class의 차이점? 5
28870
HTML 이미지 갤러리 - 전 웹진으로 사용하려고요
10881
MySQL 평가 표시 ★☆로 할 때 9
10872
MySQL 디렉토리 생성 허용하는 웹호스팅 아시는 분..? 8
10870
PHP [정보] Css 관련 싸이트들 1
28868
HTML 오른쪽 마우스 금지 스크립트 입니다.드레그해서 사용해보세요. 1
10868
JavaScript 3D 회전식 메뉴입니다. 드레그해서 붙혀서 사용해보세요 1
10866
MySQL mysql 사용중에 가장 많이 사용하는 명령어 정리입니다. 1
28862
HTML Ajax로 만든 쇼핑몰입니다. 5
10864
기타 랜덤백그라운드 1
28861
HTML 마소 컬러 선택 대화상자
10863
기타 회원에게만 보여준다
28860
HTML KOSDAQ소스
10862
JavaScript ZDNet Korea레이어
28859
HTML String 을 UTF8 encoding 하기
28858
HTML SHIFT, CTRL, ALT 키를 막는 방법
10861
JavaScript present[다음에서 발췌]
10859
기타 항상중심에레이어띄우기 1
28856
HTML 클릭한 메뉴 고정하기 1
10857
JavaScript 클릭시 화면이 위로 올라가는 현상 막아주기 1
28854
HTML 체크한 것만 합계를 표시하는 스크립트 1
10856
기타 쿠키1년간체크
28853
HTML 자막파일(.smi) 싱크밀고 당기기
28852
JavaScript 일정시간동안 이미지 자동으로 변경하기
28851
HTML 이미지 파일 에러 처리
10855
JavaScript 이미지 미리 로딩시켜놓기
28850
HTML 웹로봇 배제 표준
10854
기타 우측하단 메신저형식의 레이어광고
28849
HTML 아이프레임하나만 새로고침하기
이전 다음
전체 목록