Search code examples
javascriptthumbnailsonmouseoverrollovervideo-thumbnails

Show different thumbnails background when mouse over along the width of a DIV

I'm trying to make a Movie preview div who changes when the user move along the width of a div, same as braziers.com movie preview system.

I have this code and it is working but i don't know if this is the best and simple way to do it.

Here is an example of the code:

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

And here is the code:

 <!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>

Thank you.

Solution

  • You could also name the images to match the IDs of your small divs, eliminating the need for the CSS background attributes.

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

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