이미지 슬라이딩 소스
<script>
<script>
function change_img(no)
{
for(i=1;i<=document.getElementById("max").value;i++)
{
if(i==no)
{
var tmp_w=parseInt(document.getElementById("layer_"+i).style.width);
if(tmp_w<620)
{
document.getElementById("layer_"+i).style.width=(tmp_w+10)+"px";
}
var tmp_w2=parseInt(document.getElementById("layer_"+i).style.backgroundPosition);
if(tmp_w2>-120)
{
tmp_w2=tmp_w2-10;
document.getElementById("layer_"+i).style.backgroundPosition = tmp_w2+" 0";
}
}
else
{
var tmp_w=parseInt(document.getElementById("layer_"+i).style.width);
if(tmp_w>120)
{
document.getElementById("layer_"+i).style.width=(tmp_w-10)+"px";
}
var tmp_w2=parseInt(document.getElementById("layer_"+i).style.backgroundPosition);
if(tmp_w2<0)
{
tmp_w2=tmp_w2+10;
document.getElementById("layer_"+i).style.backgroundPosition = tmp_w2+" 0";
}
}
}
setTimeout ("change_img("+document.getElementById("ck").value+")", 1);
}
</script>
<div id="layer_1" style="cursor:pointer; float:left; width:620px; height:299px; overflow:hidden; background:url('http://i1.cartoon.daumcdn.net/svc/image/U03/cartoon/4EF13A08016E1C0002') -120 0;" onmouseover="document.getElementById('ck').value='1'; change_img(1);" onclick="window.open('http://www.naver.com');"></div>
<div id="layer_2" style="cursor:pointer; float:left; width:120px; height:299px; overflow:hidden; background:url('http://i1.cartoon.daumcdn.net/svc/image/U03/cartoon/4EF03CDE067D3A0001') 0 0;" onmouseover="document.getElementById('ck').value='2'; change_img(2);" onclick="window.open('http://www.naver.com');"></div>
<div id="layer_3" style="cursor:pointer; float:left; width:120px; height:299px; overflow:hidden; background:url('http://i1.cartoon.daumcdn.net/svc/image/U03/cartoon/4EEA8C5A0301450001') 0 0;" onmouseover="document.getElementById('ck').value='3'; change_img(3);" onclick="window.open('http://www.naver.com');"></div>
<div id="layer_4" style="cursor:pointer; float:left; width:120px; height:299px; overflow:hidden; background:url('http://i1.cartoon.daumcdn.net/svc/image/U03/cartoon/4EE5A938023A9E0001') 0 0;" onmouseover="document.getElementById('ck').value='4'; change_img(4);" onclick="window.open('http://www.naver.com');"></div>
<input type='hidden' id='ck' name='ck' value='0' />
<input type='hidden' id='max' name='max' value='4' />
출처 네이버지식인
출처 네이버지식인
