Mouse Over Image Effect in Xhtml

Discussion in 'HTML & Website Design' started by annbee, Jun 16, 2010.

0
  1. #1
    If there is anyone who is familiar with this please let me know thanks :)
     
    annbee, Jun 16, 2010 IP
  2. imperialDirectory

    imperialDirectory Peon

    Messages:
    395
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What kind of effect are you looking for? Like fade in, fade out, dimming, zoom etc?
     
    imperialDirectory, Jun 16, 2010 IP
  3. annbee

    annbee Member

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #3
    image switch on mouse over
     
    annbee, Jun 16, 2010 IP
  4. Summer Cart

    Summer Cart Guest

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Try:
    
a.img:link, a.img:visited, a.img:active{background-image: url(path/to/image.png);}
a.img:hover{background-image: url(path/to/image_hover.png);}
    Code (markup):
     
    Summer Cart, Jun 16, 2010 IP
  5. annbee

    annbee Member

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #5
    oh wow thank you but will it pass validation or is that the price i pay for the mouse over effect :)
     
    annbee, Jun 16, 2010 IP
  6. Masteroa

    Masteroa Peon

    Messages:
    54
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Best way to do this is with CSS. That way it will also pass the test.
     
    Masteroa, Jun 16, 2010 IP
  7. mahesh2011

    mahesh2011 Peon

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    why not try adobe flash .....set a time for the image as soon as the time is out another image should be displayed......................OR else try with adobe dreamweaver ...you have a option called navigation the code is immediately generated ....as soon as u click ....
     
    mahesh2011, Jun 16, 2010 IP
  8. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Summer Cart's "image rollover" code passes CSS validation.
     
    Cash Nebula, Jun 18, 2010 IP
  9. kothinti

    kothinti Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I hope you r looking for this

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>jQuery Hover Effect</title>
    <script type='text/javascript' src='http://yoursite.com/jquery.js'></script>
    <script type='text/javascript'>
    $(document).ready(function(){
    $(".button").hover(function() {
    $(this).attr("src","button-hover.png");
    }, function() {
    $(this).attr("src","button.png");
    });
    });
    </script>
    </head>

    <body>
    <img src="button.png" alt="My button" class="button" />
    </body>
    </html>
     
    kothinti, Jun 19, 2010 IP
  10. jezzz

    jezzz Notable Member

    Messages:
    4,884
    Likes Received:
    190
    Best Answers:
    0
    Trophy Points:
    200
    #10
    Check out Dynamic Drive! it is loaded with variety of Scripts that can hopefully meet your requirements with no more hassles
     
    jezzz, Jun 19, 2010 IP
  11. Lam3r

    Lam3r Active Member

    Messages:
    235
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #11
    No need for dynamicdrive for something so easy; he's gotten at least two correct different ways to do this, one with javascript, another with CSS.
     
    Lam3r, Jun 19, 2010 IP