이거 소스 어떻게 하시는 지 아시는 분 도움좀.. 정보
이거 소스 어떻게 하시는 지 아시는 분 도움좀..본문
http://www.gaebongprugio.co.kr/prugio_gaebong/prugio_gaebonge.asp?pnCode=010100fB&Pqty=1&fileCode=gbPo5_1&qtCody=1
여기 홈페이지 들어가면
이런식으로 나오는데 침실에 마우스만 대도 사진과 같이 보이게 하는 기법 어떻게 하시는지 아시는 고수님들
도움 좀 주십시오..
드림위버에서 롤오버 하는 식으로 구성하려고 하는데 테이블 등 어떻게 해야할지를 모르겠네요;;;
여기 홈페이지 들어가면
이런식으로 나오는데 침실에 마우스만 대도 사진과 같이 보이게 하는 기법 어떻게 하시는지 아시는 고수님들
도움 좀 주십시오..
드림위버에서 롤오버 하는 식으로 구성하려고 하는데 테이블 등 어떻게 해야할지를 모르겠네요;;;
댓글 전체
div 를 position:absolute; 를 하셔서 여러개를 겹쳐 놓고
겹친 div 각각의 id 를 지정하시고 (예. div1, div2, div3)
위의 버튼(침실, 욕실 등)에 마우르 오버 mouseover="스크립트 함수(변수)"를 만들고
스크립트를
var old_divid = 1;
function 함수명(divid){
document.getElementById("div"+old_divid).style.display='none';
document.getElementById("div"+divid).style.display='block';
old_divid = divid;
}
대충 요딴식으로 ㅡㅡ;;
아예 소스를 올릴걸 그랬나 보네요 막상 쓰고나니 ㅡㅡ;; 보기 더 어려워보이는게~
겹친 div 각각의 id 를 지정하시고 (예. div1, div2, div3)
위의 버튼(침실, 욕실 등)에 마우르 오버 mouseover="스크립트 함수(변수)"를 만들고
스크립트를
var old_divid = 1;
function 함수명(divid){
document.getElementById("div"+old_divid).style.display='none';
document.getElementById("div"+divid).style.display='block';
old_divid = divid;
}
대충 요딴식으로 ㅡㅡ;;
아예 소스를 올릴걸 그랬나 보네요 막상 쓰고나니 ㅡㅡ;; 보기 더 어려워보이는게~
소스가 이런데 여기에선 어떻게 수정해야하는지욤 ㅜㅜ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.clsBannerScreen {overflow: hidden;position: relative;height: 506;width: 825px; border:1px solid #e1e1e1; cursor:pointer; clear:both;}
.clsBannerScreen .images {position:absolute; display:none; }
ul, li {list-style:none; margin:0; padding:0; font-size:10pt; }
.clsBannerButton {width:600px;cursor:pointer;border-bottom:1px solid #e1e1e1;}
.clsBannerButton li {width:100px;float:left;border-right:1px solid #e1e1e1;padding:2px;}
.clsBannerButton li.fir {border-left:1px solid #e1e1e1;}
.clsBannerButton li.labelOverClass {font-weight:bold;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/jquery.banner.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("#image_list_1").jQBanner({ //롤링을 할 영역의 ID 값
nWidth:825, //영역의 width
nHeight:543, //영역의 height
nCount:4, //돌아갈 이미지 개수
isActType:"up", //움직일 방향 (left, right, up, down)
nOrderNo:1, //초기 이미지
nDelay:2000 //롤링 시간 타임 (1000 = 1초)
/*isBtnType:"li"*/ //라벨(버튼 타입) - 여기는 안쓰임
}
);
$("#image_list_2").jQBanner({nWidth:825,nHeight:543,nCount:4,isActType:"left",nOrderNo:1,isStartAct:"N",isStartDelay:"Y",nDelay:2000,isBtnType:"li"});
$("#image_list_3").jQBanner({nWidth:825,nHeight:543,nCount:4,isActType:"left",nOrderNo:1,isStartAct:"N",isStartDelay:"Y",nDelay:3000,isBtnType:"img"});
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('../메인디자인/images/photo2_1barover.gif')">
<div id="image_list_2">
<div class="clsBannerScreen">
<div class="images" style="display:block"><img src="../메인디자인/images/photo1_p(예).gif" width="825" height="506" /></div>
<div class="images"><img src="../메인디자인/images/photo2_p(예).gif" width="825" height="506" /></div>
<div class="images"><img src="../메인디자인/images/photo3_p(예).gif" width="825" height="506" /></div>
<div class="images"><img src="../메인디자인/images/photo4_p(예).gif" width="825" height="506" /></div>
</div>
<ul id="label_2"><span class="clsBannerButton">
<li overclass="labelOverClass" outclass="fir"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','../메인디자인/images/photo2_1bar.gif',1)"><img src="../메인디자인/images/photo2_1barover.gif" name="Image5" width="205" height="32" border="0"></a></li>
<li overclass="labelOverClass" outclass=""><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','../메인디자인/images/photo2_1bar.gif',1)"><img src="../메인디자인/images/photo2_1barover.gif" name="Image5" width="205" height="32" border="0"></a></li>
<li overclass="labelOverClass" outclass="">네이버<br />(naver.com)</li>
</span>
<li overclass="labelOverClass" outclass="">네이트<br />
(nate.com)</li>
</ul>
</div>
<p> </p>
<p> </p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.clsBannerScreen {overflow: hidden;position: relative;height: 506;width: 825px; border:1px solid #e1e1e1; cursor:pointer; clear:both;}
.clsBannerScreen .images {position:absolute; display:none; }
ul, li {list-style:none; margin:0; padding:0; font-size:10pt; }
.clsBannerButton {width:600px;cursor:pointer;border-bottom:1px solid #e1e1e1;}
.clsBannerButton li {width:100px;float:left;border-right:1px solid #e1e1e1;padding:2px;}
.clsBannerButton li.fir {border-left:1px solid #e1e1e1;}
.clsBannerButton li.labelOverClass {font-weight:bold;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/jquery.banner.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("#image_list_1").jQBanner({ //롤링을 할 영역의 ID 값
nWidth:825, //영역의 width
nHeight:543, //영역의 height
nCount:4, //돌아갈 이미지 개수
isActType:"up", //움직일 방향 (left, right, up, down)
nOrderNo:1, //초기 이미지
nDelay:2000 //롤링 시간 타임 (1000 = 1초)
/*isBtnType:"li"*/ //라벨(버튼 타입) - 여기는 안쓰임
}
);
$("#image_list_2").jQBanner({nWidth:825,nHeight:543,nCount:4,isActType:"left",nOrderNo:1,isStartAct:"N",isStartDelay:"Y",nDelay:2000,isBtnType:"li"});
$("#image_list_3").jQBanner({nWidth:825,nHeight:543,nCount:4,isActType:"left",nOrderNo:1,isStartAct:"N",isStartDelay:"Y",nDelay:3000,isBtnType:"img"});
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('../메인디자인/images/photo2_1barover.gif')">
<div id="image_list_2">
<div class="clsBannerScreen">
<div class="images" style="display:block"><img src="../메인디자인/images/photo1_p(예).gif" width="825" height="506" /></div>
<div class="images"><img src="../메인디자인/images/photo2_p(예).gif" width="825" height="506" /></div>
<div class="images"><img src="../메인디자인/images/photo3_p(예).gif" width="825" height="506" /></div>
<div class="images"><img src="../메인디자인/images/photo4_p(예).gif" width="825" height="506" /></div>
</div>
<ul id="label_2"><span class="clsBannerButton">
<li overclass="labelOverClass" outclass="fir"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','../메인디자인/images/photo2_1bar.gif',1)"><img src="../메인디자인/images/photo2_1barover.gif" name="Image5" width="205" height="32" border="0"></a></li>
<li overclass="labelOverClass" outclass=""><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','../메인디자인/images/photo2_1bar.gif',1)"><img src="../메인디자인/images/photo2_1barover.gif" name="Image5" width="205" height="32" border="0"></a></li>
<li overclass="labelOverClass" outclass="">네이버<br />(naver.com)</li>
</span>
<li overclass="labelOverClass" outclass="">네이트<br />
(nate.com)</li>
</ul>
</div>
<p> </p>
<p> </p>
</body>
</html>
거실 침실 주방 욕실이 tab1,2,3,4이고 아래 이미지가 img1,2,3,4 일때
tab1에 롤오버시 img1은 display:block 이고 나머지 img2,3,4는 display:none이다. 라고 비헤이비어에서 지정해 주면 되겠네요. 나머지 3개의 tab도 마찬가지.
tab1에 롤오버시 img1은 display:block 이고 나머지 img2,3,4는 display:none이다. 라고 비헤이비어에서 지정해 주면 되겠네요. 나머지 3개의 tab도 마찬가지.
디브로 디스플레이 하시면되용...
꺄 여긴 DIV 나라 ~ !
