메뉴 보이기
Profile
이온디

2007.04.17

HTML5

이미지 롤오버

조회 수 8517 추천 수 70
간단한 이미지 롤오버
 <img src="처음이미지주소" onmouseover="this.src='바뀔이미지주소';" onmouseout="this.src='처음이미지주소';">

스타일 시트로 이미지 롤오버 만들기

 
<style>
a.rollover img { border-width:0px; display:block; }
a.rollover img.rollover { display:none; }
a.rollover:hover { position:relative; }
a.rollover:hover img { display:none; }
a.rollover:hover img.rollover { display:block; }
</style>

<a href=http: onclick="return false" onfocus=blur()class="rollover"><img class="rollover"src="top_1_on.gif"><img src="top_1.gif"></a><br>
<ahref=http: onclick="return false" onfocus=blur()class="rollover"><img class="rollover"src="top_2_on.gif"><img src="top_2.gif"></a><br>



이미지 롤오버 만들기

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Image RollOver </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

nlast = 0; //  0~3 까지 초기 선택이미지 인덱스 지정,  -1 이면 선택이미지 없음

function handle_mouseover()
{
 if(event.srcElement.id == "RO")
  for(var i=0; i<RO.length;i++)
   if(RO[i] == event.srcElement)
   {
    RO[i].src = "img"+(i+1)+"_.gif";
    break;
   }
}

function handle_mouseout()
{
 if(event.srcElement.id == "RO")
  for(var i=0; i<RO.length;i++)
   if(RO[i] == event.srcElement)
   {
    if(i == nlast)
     RO[i].src = "img"+(i+1)+"_.gif";
    else
     RO[i].src = "img"+(i+1)+".gif";
    break;
   }
}

function handle_click()
{
 if(event.srcElement.id == "RO")
 {
  if(nlast >= 0)
   RO[nlast].src = "img"+(nlast+1)+".gif";
  for(var i=0; i<RO.length;i++)
   if(RO[i] == event.srcElement)
   {
    nlast = i;
    break;
   }
 }
}

document.onmouseover = handle_mouseover;
document.onmouseout = handle_mouseout;
document.onclick = handle_click;

//-->
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
for(var i=0; i<4;i++)
{
 document.write("<IMG ID="RO" SRC="img" + (i+1) + ((nlast != i) ? ".gif" : "_.gif") + "">");
}
//-->
</SCRIPT>

<!-- <IMG ID="RO" SRC="./files/attach/images/20240/562/020/1207e6a0e42c79ddb2ab7285b724c565.gif">
<IMG ID="RO" SRC="img2.gif">
<IMG ID="RO" SRC="img3.gif">
<IMG ID="RO" SRC="img4.gif"> -->

</BODY>
</HTML>

 



스타일 시트로 이미지 롤오버 만들기

아래 내용은 CSSLOOK.COM 에서 그대로 가져온 내용입니다.

지난 8월 10일에 있었던 CSS & 웹표준 실무 적용 워크샵에서의 질문을 블로그를 통해서 답해드립니다. 작은 카메라용 크로스 가방을 매고 있던 여성분인데. 이 예제 글이 도움이 되길 바랍니다.

제목에 고급이라는 단어를 붙였듯이, 이 방법은 기존의 CSS 롤오버 버튼을 만드는 방법보다 효율으로 버튼을 만들 수 있는방법입니다. 기존처럼 CSS 포지셔닝을 이용하되, 1개의 배경이미지로 마우스 오버와 아웃 때 둥근 모서리의 배경이미지를 바꿀 수있습니다.

이 방법은 하나의 버튼보다는 여러개의 버튼들로 구성된 탭 네비게이션에서 보다 효율적으로 사용할 수 있으며, 완성된 네비게이션에서 HTML 코드를 확인하실 수 있습니다.

배경이미지 : (text zoom을 고려하여 크게 만들었음)

배경이미지

사용된 CSS :


* {
margin:0;
padding:0;
}

body {
font:normal .75em/1.5em "돋움", Dotum, AppleGothic, verdana, sans-serif;
background:#65BEDC;
}

a {
text-decoration:none;
}

#header { /*자식 요소들을 쉽게 위치시키기 위해 상대적인 위치를 부여*/
position:relative;
width:60em;
height:10em;
margin:10em auto;
border:3px solid #fff;
background:#94D5E6;
}

#nav { /*부모(header)를 참조한 절대적인 위치*/
position:absolute;
bottom:0;
left:2em;
}

#nav li {
float:left;
list-style:none;
margin-right:.5em; /*오른쪽 배경이미지를 위한 여백*/
background:#2395B6 url(bg-nav.png) 0 -40px no-repeat;
}

#nav li a {
display:block;
padding:.75em 1.5em .25em 1em;/*#nav li에서 지정된 여백을 제외하고 설정*/
margin-left:5px;
background:#2395B6 url(bg-nav.png) 100% -40px no-repeat;
color:#fff;
font-weight:bold;
}

#nav li:hover,
#nav li.active
{
background-color:#fff;
background-position:0 0;
}
#nav li:hover a,
#nav li a:hover,
#nav li.active a
{
background-color:#fff;
background-position:100% 0;
color:#369;
}


Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

2개의 댓글

Profile
이온디
2007.04.22
http://ganji.80port.net/bbs/view.php?id=musicAlbum&page=8&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=716
Profile
이온디
2007.04.22
여러개를 사용하는 메뉴에서는아래 간지님 소스가 낫겠음.
에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
[HTML5] 이미지 롤오버 2 2007.04.17 8517
59 [Script] Iframe 크기 내용에 따라 자동조절하기 (by konahn) 1 2007.04.17 9579
58 [Script] 한 번의 클릭으로 두 개의 아이프레임 제어하기 2007.04.16 5765
57 [HTML5] 홈페이지 특정 부분을 아이프레임으로 보기 (by elca) 2007.04.16 7440
56 [HTML5] object - iframe처럼 페이지 삽입 소스 2007.04.16 7356
55 [Script] iframe 자동 리사이즈 6 2007.04.16 13614
54 [DIV] div tag를 iframe 처럼 사용하기 2007.03.27 7139
53 [DIV] div에서 table의 table-layout:fixed;dhk 같은 효과를 사용하기 1 2007.03.27 6609
52 [HTML5] 컬러코드 모음 2006.10.15 5325
51 [HTML5] 자바스크립트와 CSS를 넣는 방법 2005.04.28 5778
50 [Script] 클릭하면 닫히는 창 2005.04.28 5497
49 [Script] 마우스 올렸을 때 바뀌는 커서 (by kiwha) 2004.12.14 4358
48 [Script] ~한지 **일 되었습니다 (by kihwa) 2004.12.14 4857
47 [Script] 클릭하면 경고창 뜨는 스크립트 1 2004.12.14 5627
46 [CGI] Space Checker - 계정 하드용량과 DB용량 동시확인 2003.06.06 6378
45 [Script] 마우스를 올리면 레이어 뜨고 내리면 레이어 사라지는 스크립트 1 2004.06.08 6494
44 [Script] 게시판 등 에서 웹페이지에서 특정 부분 감췄다보여주기 - 레이어 토글 1 2004.06.04 13640
43 [Script] 웹페이지에서 특정 부분 감췄다보여주기 (by 위쯔) 2004.05.30 6008
42 [HTML5] 프레임 나누기 (좌/우, 상/하) 2004.05.28 10063
41 [PHP] <?echo($list_height)?> 의 쓰기 쉬운 변형 (by Hyunee) 2004.05.26 6089