PDA

View Full Version : Featured Content Slider v2.4 - onmouseover/hover images



yazta
05-01-2010, 05:24 PM
1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem: How do I make the pagination links change on mouse over when using images?
The fourth example adds a border around the image when you mouse over it, but I would like to display a different image.
Thanks

yazta
05-01-2010, 07:54 PM
just to give an example, http://www.surveymonkey.com/ where the background of the links changes.

I have tried using divs with css for hover but that didn't work and I have also tried using scripts for the onmouseover event, which didn't work either.

jscheuer1
05-02-2010, 04:57 PM
The fourth example's thumbnails' markup looks like so:


<div id="paginate-slider4" style="background:white">

<a href="http://codingforums.com" class="toc" style="margin-left: 35px"><img src="../dynamicindex4/lightbox2/horses_thumb.jpg" /></a> <a href="http://google.com" class="toc someclass"><img src="../dynamicindex4/lightbox/pine_thumb.jpg" /></a> <a href="http://www.cssdrive.com" class="toc someotheclass"><img src="../dynamicindex4/lightbox/ocean_thumb.jpg" /></a> <a href="http://javascriptkit.com" class="toc someotheclass"><img src="../dynamicindex4/lightbox2/sushi2_thumb.jpg" /></a>

</div>

Those are images, not background images. For it to work as you say, you would give each a tag a display of block, a float of left and the dimensions of the image you want to use as background. Now the a tags would all still need the toc class, but as you can see you can add another class, so you could end up with style something like this:


<style type="text/css">
#paginate-slider4 .toc {
display: block;
float: left;
width: 100px;
height: 70px;
margin: 0 2px;
}
.toc1 {
background-image: url(../dynamicindex4/lightbox2/horses_thumb.jpg);
}
.toc1:hover {
background-image: url(../dynamicindex4/lightbox2/horses_hover_thumb.jpg);
}
.toc2 {
background-image: url(../dynamicindex4/lightbox2/pine_thumb.jpg);
}
.toc2:hover {
background-image: url(../dynamicindex4/lightbox2/pine_hover_thumb.jpg);
}
.toc3 {
background-image: url(../dynamicindex4/lightbox2/ocean_thumb.jpg);
}
.toc3:hover {
background-image: url(../dynamicindex4/lightbox2/ocean_hover_thumb.jpg);
}
.toc4 {
background-image: url(../dynamicindex4/lightbox2/sushi2_thumb.jpg);
}
.toc4:hover {
background-image: url(../dynamicindex4/lightbox2/sushi2_hover_thumb.jpg);
}
</style>

and markup something like so:


<div id="paginate-slider4" style="background:white">

<a href="http://codingforums.com" class="toc toc1"></a> <a href="http://google.com" class="toc toc2"></a> <a href="http://www.cssdrive.com" class="toc toc3"></a> <a href="http://javascriptkit.com" class="toc toc4"></a>

</div>

Of course you would need all 8 images for just these 4 links. Use your own images and paths. As some browsers see floated content as outside the flow of the page, style width and height may be needed for the paginate-slider4 division. A table could be used instead of floats, but it's less efficient. Other style tweaks may be desirable.

yazta
05-02-2010, 07:43 PM
you are a legend!