Featured Content Slider v2.4 - onmouseover/hover images

[yazta]

1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.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]

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]

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]

you are a legend!