Results 1 to 4 of 4

Thread: Featured Content Slider v2.4 - onmouseover/hover images

  1. #1
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Featured Content Slider v2.4 - onmouseover/hover images

    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

  2. #2
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The fourth example's thumbnails' markup looks like so:

    Code:
    <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:

    Code:
    <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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    yazta (05-02-2010)

  5. #4
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    you are a legend!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •