|
이제 막 스크립트 시작한지라....
일케 질문 올립니다.
어떤 thumnail이미지에서 작은 화살표 버튼에 mouseover가 되면
boxLayer안에 3개의 이미지를 보여 주려고 합니다.
이 boxLayer는 width=0에서 점차적으로 넓어집니다.
이 boxLayer가 보인 후에 이 boxLayer 위에서 mouseout하면 다시 이 레이어를
숨기려고 합니다.
그런데 boxLayer에 이미지개체를 올리니 boxLayer에 mouseout이 먹질 않네요.
이 div안에 이미지에 마우스를 가져가면 mouseout이 먹혀 버리네요
제가 원하는건 이 레이어를 벗어나면 out이벤트가 일어 나게 하려고 하는데요..
어케하면 될까요?
아래 소스입니다.
답변 부탁드립니다.
<!---- 소스 ------------>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
html {font-size:12px;}
img{cursor:pointer;}
.clr_ns {clear:both;line-height:0}
#smallImage{float:left;position:relative;height:150px;overflow:visible;}
#smallImage #Simg {border:1px solid #d2d2d2;width:72;height:100;position:relative;}
#smallImage #btn{position:absolute;cursor:pointer;line-height:0;clear:both;}
#boxLayer {
background-color:#fff;
position:absolute;
height:58px;
border:1px solid #d2d2d2;
visibility:hidden;
overflow:hidden;
float:left;
white-space:nowrap;
display:inline;
padding:4px;
}
* html #boxLayer {height:66;}
#boxLayer img{
float:left;
position:relative;
overflow:hidden;
}
#showImage {float:left;position:relative;}
</style>
<script type="text/javascript">
rolling_img = null;
function imgRollover(obj, img)
{
obj.src = img;
}
Function.prototype.bind = function(obj) {
var method = this;
temp = function() {
return method.apply(obj, arguments);
};
return temp;
}
function Rolling(objID) {
this.ImageId=null;
this.Arg=null;
this.positionValue=0;
this.imgState;
this.Tid=null;
this.pos=0;
this.initialized=function(objID)
{
this.ImageId=document.getElementById(objID);
}
this.initialized(objID);
this.setObject=function(obj)
{
this.Arg=obj;
this.getDetailImage();
}
this.getDetailImage=function()
{
var arrDetailImage = new Array();
arrDetailImage[0] = "1.gif";
arrDetailImage[1] = "2.gif";
arrDetailImage[2] = "3.gif";
for(j=0; j<arrDetailImage.length; j++){
this.ImageId.innerHTML += "<span><img src='" + arrDetailImage[j] + "' width='82px' style='margin-top:1px;magin-left:" + (84 * Number(j)) + "'/></span>";
}
this.ImageId.innerHTML += "<div class='clr_ns'></div>";
}
this.doRolling=function(state)
{
this.imgState = state;
if(this.imgState=="show")
{
this.positionValue=this.Arg[0];
this.ImageId.style.visibility = "visible";
}
else if(this.imgState=="hide")
{
this.positionValue=this.Arg[1];
}
if(!this.Tid) {
this.startMission();
this.Tid=setInterval(this.startMission.bind(this),1);
// 0.005초 후에 this.startMission.bind(this) 함수 호출 - 무한 루프// Tid : timer ID
}
}
this.startMission=function()
{
if( (this.positionValue >= this.pos && this.imgState=="show") || ( this.positionValue <= this.pos && this.imgState=="hide") )
{
this.adjust = (this.imgState=="show"?1:-1);
this.pos = this.pos + ((this.positionValue-this.pos)*0.08) + this.adjust ;
this.ImageId.style.width=this.pos+'px';
}
if( (this.pos >= this.positionValue && this.imgState == "show") || (this.pos <= this.positionValue && this.imgState == "hide"))
{
this.missionComplete();
}
}
this.missionComplete=function()
{
clearInterval(this.Tid);
this.Tid=null;
this.ImageId.style.width = this.positionValue +'px';
if( this.imgState == "hide")
this.ImageId.style.visibility = "hidden";
}
}
function SetBtnImage()
{
this.objSimg = document.getElementById('Simg');
this.objBtn = document.getElementById('btn');
this.objBtn.style.top = parseInt(this.objSimg.style.height) - parseInt(this.objBtn.style.height)+2;
this.objBtn.style.left = parseInt(this.objSimg.style.width) - parseInt(this.objBtn.style.width)+2;
}
function LoadFun()
{
SetBtnImage();
rolling_img = new Rolling("boxLayer");
rolling_img.setObject(["256","0"]);
}
</script>
</HEAD>
<BODY onload="LoadFun();">
<div id="Rolling" >
<div id="smallImage">
<img src="lem.gif" id="Simg" style="width:85px;height:48px;"/>
<img src="btn_list_up.gif" id="btn" onmouseover="imgRollover(this, 'btn_list_down.gif');rolling_img.doRolling('show');" style="width:17px;height:15px"/>
</div>
<div id="showImage" >
<div id="boxLayer" onmouseout="rolling_img.doRolling('hide');imgRollover(btn, 'btn_list_up.gif');"></div>
</div>
<div id="text">
[OSEN=홍윤표 기자]이승엽(31. 요미우리 자이언츠)이<br />
동점 2루타를 포함 모처럼 멀티히트(2안타 이상)를 기록했다. <br />
인터리그(교류전) 들어 타격이 주춤했던 이승엽은 27일<br />
도쿄돔 홈구장에서 열린 오릭스 버팔로스전에서 4번타자로<br />
선발출장, 4회 2번째 타석에서 동점 1타점 적시 우익선상<br />
2루타를 날린 데 이어 8회 4번째 타석에서 투수강습 행운의<br />
내야안타로 출루했다. <br />
</div>
</div>
<div class="clr_ns"></div>
</BODY>
</HTML>
| 
현재위치: 
DIV위의 onmouseover/out 
