沿着寬度的DIV顯示不同的縮略圖背景

我正在試圖製作一個電影預覽div，當用戶沿着div的寬度移動時，它與braziers.com電影預覽系統相同。沿着寬度的DIV顯示不同的縮略圖背景

我有這個代碼，它工作，但我不知道這是否是最好的和簡單的方法來做到這一點。

下面是代碼示例：

http://lamarungawings.com/test/thumbnail.html

這裏是代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>Thumb Roll over</title> 
<script> 


      function getStyle(el, cssprop) 
      { 
       if (el.currentStyle) //IE 
        return el.currentStyle[cssprop] 
       else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox 
        return document.defaultView.getComputedStyle(el, "")[cssprop] 
       else //try and get inline style 
        return el.style[cssprop] 
      } 

      function changeColor(el) 
      { 
       var bcolor= getStyle(el, 'backgroundImage') 
        //alert(bcolor); 
       document.getElementById("chosenColor").style.backgroundImage = bcolor; 

      } 
</script> 
<style type="text/css"> 

.largeImg { 
    width:286px; 
    height:166px; 
    float:left; 
} 
.smallImg { 
    width:54px; 
    height:166px; 
    float:left; 
    margin:0 0 0 3px; 
} 

#chosenColor { 
background-image:url(img/th_main.jpg); 
width:288px; 
height:166px; 
} 

#c1 { background-image:url(img/th_one.jpg); } 
#c2 { background-image:url(img/th_two.jpg); } 
#c3 { background-image:url(img/th_three.jpg); } 
#c4 { background-image:url(img/th_four.jpg); } 
#c5 { background-image:url(img/th_five.jpg); } 
</style> 

</head> 
<body> 


<div class="largeImg" id="chosenColor"> 
    <div id="c1" class="smallImg" style="opacity:0;" onMouseover="changeColor(this)"></div> 
    <div id="c2" class="smallImg" style="opacity:0;" onMouseover="changeColor(this)"></div> 
    <div id="c3" class="smallImg" style="opacity:0;" onMouseover="changeColor(this)"></div> 
    <div id="c4" class="smallImg" style="opacity:0;" onMouseover="changeColor(this)"></div> 
    <div id="c5" class="smallImg" style="opacity:0;" onMouseover="changeColor(this)"></div> 
</div> 

<p>ROLLOVER THE IMAGE</p> 

</body> 
</html>

謝謝。

來源

2014-02-13 Peter

看起來很合理，儘管HTML中的事件處理程序通常不是一個好主意。相反，在你的JS中使用監聽器。 – isherwood

您也可以命名圖像以匹配您的小div的ID，無需CSS背景屬性。

<div id="c2"></div> 

var bcolor= el.id; 
document.getElementById("chosenColor").style.backgroundImage = '/img' + bcolor + ".jpg";

來源

2014-02-13 19:39:07 isherwood

非常感謝，但是當我把代碼搞亂一切都停止工作..我的編程技巧非常糟糕..我真的很感激，如果你能給我一個代碼的例子嗎？請。謝謝。 – Peter

沿着寬度的DIV顯示不同的縮略圖背景

回答

相關問題