Показывать разные значки эскизов при указании мыши по ширине 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, исключая необходимость в атрибутах фона 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

ответ

Смежные вопросы