이미지 위에 이미지 올리는법? 정보
이미지 위에 이미지 올리는법?
본문
밑에 소스가 위에서 왼쪽 그림입니다.
그런데... 위에서 오른쪽 처럼 이미지 위에 이미지를 올리려면 어떻게 해야하죠?
오른쪽이 정성모습인데...
도저히 어려워서.... ㅠㅠ
===================================================================================
<div class="box2" onmouseout="boxOut();" onmouseover="boxOver();">
<p class="rollbtn">
<a href="#" onfocus="blur()" onclick="javascript:return false;" onmouseover="javascript:_DISPLAY1_etc(1); return false;"><img name="tabetc1" id="tabetc1" src="http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12a.gif" width="12" height="12" alt="현재 이미지" /></a>
<a href="#" onfocus="blur()" onclick="javascript:return false;" onmouseover="javascript:_DISPLAY1_etc(2); return false;"><img name="tabetc2" id="tabetc2" src="http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12.gif" width="12" height="12" alt="" /></a>
<a href="#" onfocus="blur()" onclick="javascript:return false;" onmouseover="javascript:_DISPLAY1_etc(3); return false;"><img name="tabetc3" id="tabetc3" src="http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12.gif" width="12" height="12" alt="" /></a>
<a href="#" onfocus="blur()" onclick="javascript:return false;" onmouseover="javascript:_DISPLAY1_etc(4); return false;"><img name="tabetc4" id="tabetc4" src="http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12.gif" width="12" height="12" alt="" /></a>
</p>
<script language="JavaScript" type="text/javascript">
function _DISPLAY1_etc(id) {
boxval=id;
boxval++;
if (boxval>4)
{
boxval=1;
}
var max = 4; //맥스숫자
for (var i = 1; i <= max; i++) {
var obj = document.getElementById("DISPLAY_etc" + i);
var img = document.getElementById("tabetc" + i);
if (i == id) {
obj.style.display = "";
img.src = "http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12a.gif"; //원본
} else {
obj.style.display = "none";
img.src = "http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12.gif"; //변할꺼
}
}
}
</script>
<div id="DISPLAY_etc1">
<p>
<!-- 이미지 사이즈 고정 width="238" height="160" -->
<a href='/shop/detail.asp?prdid=1066844'><img src='http://img.halfclub.com/images_Ogage/used/200911/Ogage200911131943566441.jpg' alt='1' /></a></a>
</p>
<!-- today sale tag s -->
<p style="position:absolute; top:-2px; left:-2px;"><img src='http://img.halfclub.com/images_Ogage/used/200909/Ogage20090901501208477.gif' alt='1' /></p>
<!-- today sale tag e -->
</div>
<div id="DISPLAY_etc2" style="display:none">
<p>
<!-- 이미지 사이즈 고정 width="238" height="160" -->
<a href='/shop/detail.asp?prdid=1064682&FP=BR'><img src='http://img.halfclub.com/images_Ogage/used/200911/Ogage200911131337123977.jpg' alt='2' /></a></a>
</p>
<!-- today sale tag s -->
<p style="position:absolute; top:-2px; left:-2px;"><!--img src="http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/tag_ititem.gif" width="62" height="62" alt="today sale" /-->
<img src='http://img.halfclub.com/images_Ogage/used/200909/Ogage20090909983310536.gif' alt='2' />
</p>
<!-- today sale tag e -->
</div>
<div id="DISPLAY_etc3" style="display:none">
<p>
<!-- 이미지 사이즈 고정 width="238" height="160" -->
<a href='/shop/detail.asp?prdid=1066731'><img src='http://img.halfclub.com/images_Ogage/used/200911/Ogage200911131023888280.jpg' alt='3' /></a></a>
</p>
<!-- today sale tag s -->
<p style="position:absolute; top:-2px; left:-2px;"><img src='http://img.halfclub.com/images_Ogage/used/200909/Ogage200909091163037636.gif' alt='3' /></p>
<!-- today sale tag e -->
</div>
<div id="DISPLAY_etc4" style="display:none">
<p>
<!-- 이미지 사이즈 고정 width="238" height="160" -->
<a href='/shop/detail.asp?prdid=1031307'><img src='http://img.halfclub.com/images_Ogage/used/200911/Ogage20091113699463109.jpg' alt='4' /></a></a>
</p>
<!-- today sale tag s -->
<p style="position:absolute; top:-2px; left:-2px;"><img src='http://img.halfclub.com/images_Ogage/used/200909/Ogage200909011117824522.gif' alt='4' /></p>
<!-- today sale tag e -->
</div>
</div>
</div>
<script>
// Box 3초롤링
var boxInterval =document.getElementById('DISPLAY_etc1');
var boxval = 1
function boxOver()
{
clearInterval(boxInterval.move);
}
function boxOut()
{
boxInterval.move = setInterval(function () {
_DISPLAY1_etc(boxval);
},3000);
}
boxOut();
</script>
===================================================================================
댓글 전체
<div style="position:relative; top:0px; left:0px; width:100px; height:100px; overflow:hidden;">
<div style='position:absolute; top:0px; left:0px; z-index:1;'>1</div>
<div style='position:absolute; top:0px; left:0px; z-index:2;'>2</div>
<div style='position:absolute; top:0px; left:0px; z-index:3;'>3</div>
<div style='position:absolute; top:0px; left:0px; z-index:4;'>4</div>
</div>
<div style='position:absolute; top:0px; left:0px; z-index:1;'>1</div>
<div style='position:absolute; top:0px; left:0px; z-index:2;'>2</div>
<div style='position:absolute; top:0px; left:0px; z-index:3;'>3</div>
<div style='position:absolute; top:0px; left:0px; z-index:4;'>4</div>
</div>
연후하은아버님 감사드립니다. ^^
