.hstyleSec{width:100%; margin-top:0px; }
.hstyleSec .hstyle{overflow:hidden; width:995px; height:605px; }
.hstyleSec .hstyle .list{position:relative; float:right; padding:0px;}
.hstyleSec .hstyle .list li{overflow:hidden; padding:0;line-height:0%; font-size:0%;}
.hstyleSec .hstyle .list .overB1{position:absolute; top:-1px; left:-618px; width:153px; height:153px; padding:0px;}
.hstyleSec .hstyle .list .overB2{position:absolute; top:75px; left:-542px; width:153px; height:153px; padding:0px;}
.hstyleSec .hstyle .list .overB3{position:absolute; top:150px; left:-466px; width:153px; height:153px; padding:0px;}
.hstyleSec .hstyle .visual{float:left; padding:-230px 0 0 0px;}
.rollover img { border-width:0px; display:block;}
.rollover img.over { display:none;}
.rollover:hover img { display:none;}
.rollover:hover img.over { display:block;}
.over1 img {position:absolute; top:0px; left:529px;}
.over2 img {position:absolute; top:0px; left:681px;}
.over3 img {position:absolute; top:75px; left:606px;}
<div class="hstyleSec">
<div class="hstyle" onmouseout="hstyleOut();" onmouseover="hstyleOver();">
<div class="list">
<ul>
<li class="overB1"><a href="#" onfocus="blur()" onmouseover="javascript:oSty(1); return false;"><img src="images/main/main_1!.gif" /></a></li>
<li class="overB2"><a href="#" onfocus="blur()" onmouseover="javascript:oSty(2); return false;"><img src="images/main/main_2!.gif" /></a></li>
<li class="overB3"><a href="#" onfocus="blur()" onmouseover="javascript:oSty(3); return false;"><img src="images/main/main_3!.gif" /></a></li>
</ul>
<div id="overB1" class="overB1" style="display:block"><a href="#"><img src="images/main/main_1!on.gif" alt="" /></a></div>
<div id="overB2" class="overB2" style="display:none"><a href="#"><img src="images/main/main_2!on.gif" alt="" /></a></div>
<div id="overB3" class="overB3" style="display:none"><a href="#"><img src="images/main/main_3!on.gif" alt="" /></a></div>
</div>
<div class="visual">
<p id="oStyB1" style="display: block;"><a href="#"><img src="images/main/main_1!on_img.gif" alt="" /></a></p>
<p id="oStyB2" style="display: block;"><a href="#"><img src="images/main/main_2!on_img.gif" alt="" /></a></p>
<p id="oStyB3" style="display: block;"><a href="#"><img src="images/main/main_1!on_img.gif" alt="" /></a></p>
</div>
</div>
<div style="position:relative;top:-606px;">
<a href="#" class="rollover over1"><img class="over" src="images/main/main_p1!on.gif"><img src="images/main/main_p1!.gif"></a>
<a href="#" class="rollover over2"><img class="over" src="images/main/main_p1!on.gif"><img src="images/main/main_p1!.gif"></a>
<a href="#" class="rollover over3"><img class="over" src="images/main/main_p1!on.gif"><img src="images/main/main_p1!.gif"></a>
</div>
</div>
<script type="text/javascript">
function oSty(id) {
hstyleval = id;
hstyleval++;
if (hstyleval > 3) {
hstyleval = 1;
}
var max = 3; //맥스숫자
for (var i = 1; i <= max; i++) {
var obj = document.getElementById("oStyB" + i);
var obj2 = document.getElementById("overB" + i);
if (i == id) {
obj.style.display = "";
obj2.style.display = "";
} else {
obj.style.display = "none";
obj2.style.display = "none";
}
}
}
//hstyle 5초 롤링
var hstyleInterval = document.getElementById('oStyB1');
var hstyleval = 1
function hstyleOver() {
clearInterval(hstyleInterval.move);
}
function hstyleOut() {
hstyleInterval.move = setInterval(function() {
oSty(hstyleval);
}, 3200);
}
hstyleOut();
</script>
상단선언
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>형지몰닷컴-여성크로커다일, 샤트렌, 올리비아하슬러, 라젤로, 아날도바시니, 와일드로즈 정품판매처</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
</head>
'CSS HTML5 > 퍼블리싱 팁' 카테고리의 다른 글
| 세로롤링배너 (0) | 2016.11.09 |
|---|---|
| 플래시 웹상보이기 (0) | 2016.11.09 |
| css로 이미지 롤오버하기 (0) | 2016.11.09 |
| 이미지버튼에 팝업링크 (0) | 2016.11.09 |
| 스크롤바 없애기 (0) | 2016.11.09 |