How to make hover images without JavaScript

Discussion in 'HTML & Website Design' started by asmaster, Jul 27, 2009.

0
  1. #1
    Hello,

    I've implemented a menu that changes its view when user hovers his mouse

    <img border='0' alt='' src='images/1.png' onmouseover="this.src='images/2.png'" onmouseout="this.src='images/1.png'" />

    Is it possible to implement it without JavaScript? For example with CSS

    Thanks
     
    asmaster, Jul 27, 2009 IP
  2. sebau

    sebau Peon

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Last edited: Jul 27, 2009
    sebau, Jul 27, 2009 IP
  3. asmaster

    asmaster Peon

    Messages:
    86
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you for your answer, but this site uses JavaScript...
     
    asmaster, Jul 27, 2009 IP
  4. Wachiraj

    Wachiraj Greenhorn

    Messages:
    63
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    you can use CSS/Stylesheet without JavaScript

    /* ======================================= */
    /* Boxed Class */

    .boxed a {
    display: block;
    background: url(images/arrow.gif) no-repeat left center;
    text-decoration: none;
    overflow: hidden;
    }

    .boxed a:hover {
    display: block;
    background: url(images/arrow_hover.gif) no-repeat left center;
    text-decoration: none;
    overflow: hidden;
    }
    /* ============================= */


    <div id="linktest" class="boxed">
    your links
    </div>
     
    Wachiraj, Jul 27, 2009 IP
  5. sebau

    sebau Peon

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    yes, this site use javascript but this image replace not:

    a.zaloz-bloga:hover {
[B]background-position:0 -175px;[/B]
}
a.zaloz-bloga {
background:transparent url(images/zaloz-bloga.jpg) no-repeat 0 0;
float:left;
height:175px;
margin:20px 22px 0 32px;
width:154px;
}
    Code (markup):
    for a elements with class zaloz-bloga <a class="zaloz-bloga" .... background will be moved in vertical (smart effect on one picture), but Wachiraj method is good too.
     
    sebau, Jul 27, 2009 IP
  6. bjnix04

    bjnix04 Greenhorn

    Messages:
    38
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #6
    My preferred way of doing this:
    
#image{
background: images/1.png
}
#image:hover{
background: images/2.png
}
    Code (markup):
    Simply put, all you do is make a <div> or something with the id="image", after that, you just make the background anything you want it to be. Easy. :)

    sample:
    
<html>
<head></head>
<body>
<div id="image">
stuff?
</div>
</body>
</html>
    Code (markup):
     
    Last edited: Jul 27, 2009
    bjnix04, Jul 27, 2009 IP
  7. lyleham

    lyleham Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Originally what i do is use Dreamweaver and set rollover images. Easy as 2 clicks.
     
    lyleham, Jul 27, 2009 IP