이온디
글목록
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
이미지 롤오버
2007.04.17 09:44
9636
70
첨부파일
https://imweb.eond.com/coding/20562 
간단한 이미지 롤오버
<img src="처음이미지주소" onmouseover="this.src='바뀔이미지주소';" onmouseout="this.src='처음이미지주소';">
<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;
}
코멘트 2
접기/펴기 | 댓글 새로고침
-
이온디오후 08:00댓글댓글 삭제닫기이온디http://ganji.80port.net/bbs/view.php?id=musicAlbum&page=8&sn1=&divpage=1&sn=off&ss=on&sc=on&select_ar...2007.04.22 20:00
-
이온디여러개를 사용하는 메뉴에서는아래 간지님 소스가 낫겠음.오후 08:00댓글댓글 삭제닫기이온디여러개를 사용하는 메뉴에서는아래 간지님 소스가 낫겠음.2007.04.22 20:00
정말 이 글을 삭제하실건가요? -_-...
닫기
이온디
"이미지 롤오버"
"이미지 롤오버"
Total 235 articles in 12 / 12 pages
| 제목 |
날짜 |
|---|---|---|
 | 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) | 2018/01/03 |
|
| jQuery를 배울수 있는 동네들입니다. | 2013/08/09 |
|
| 관련 링크 [1] | 2010/05/23 |
| 15 |
[프레임워크] [UI Kit] CSS Framework 어떤 것을 사용할 것인가? 출처: https://mobicon.tistory.com/353 [Intelligence Convergence]
| 2019/03/21 |
| 14 | [반응형 웹] 모바일 사이드바 만들기 | 2020/04/10 |
| 13 |
[반응형 웹] 기기별 미디어쿼리 사이즈,모바일 디바이스별 사이즈
| 2020/05/02 |
| 12 | Web Fundamentals | 2020/05/02 |
| 11 | [프레임워크] Material design | 2020/07/02 |
| 10 | [Meta] meta viewport 모바일에서 PC 사이즈 그대로 보기 | 2022/01/09 |
| 9 | [map] 카카오맵 퍼블리싱 | 2022/03/31 |
| 8 | [위지윅에디터] ckeditor5 | 2022/04/11 |
| 7 |
[svg] SVG PATH EDITOR (코드로 SVG 패스 만들기)
| 2022/04/21 |
| 6 | [CSS] css 글자 나누기 | 2022/05/10 |
| 5 | [CSS] safari select background glory style | 2022/07/14 |
| 4 | [swiperjs] swiper.js 기본 템플릿 코드 | 2022/11/27 |
| 3 | [swiperjs] swiper.js 숫자 페이징 | 2022/11/28 |
| 2 | [swiperjs] swiper random shuffle | 2022/11/28 |
| 1 | [CSS] CSS Grid를 배워보는 링크 | 2023/01/31 |
태그
설정
글쓰기
