Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    change img on a:hover in menu

    Is there a way to change image with css or only with JavaScript?

    I have this HTML:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
      <head>
      
        <div id="menybar">
    
          <ul>
              <li><a href="index.html"><img src="bilder/webtv_sel.png" id="webtv" alt="webtv" width="161" height="35"></a></li>
    		  <li><a href="enlightenment_words.html"><img src="bilder/enlightenment.png" id="words" alt="enlightement words" width="161" height="35"></a></li>
              <li><a href="minglephoto.html"><img src="bilder/photos.png" id="photos" alt="Photos" width="161" height="35"></a></li>
              <li><a href="reporterkoanuka.html"><img src="bilder/about_webtv.png" id="about" alt="About Koanuka webTV" width="161" height="35"></a></li>
              <li><a href="contactwebtv.html"><img src="bilder/contact_webtv.png" id="contact" alt="Contact Koanuka webTV" width="161" height="35"></a></li>
    		  <li><a href="partners.html"><img src="bilder/partners_webtv.png" id="partners" alt="Partners of webTV" width="161" height="35"></a></li>
    	  </ul>
    
    
      </div>
    </body>
    </html>
    CSS:
    Code:
              #menybar ul{width: 1020px; height: 36px; padding: 0; margin: 0 auto; border-bottom: 1px solid #8B7500; border-top: 1px solid #8B7500; background-color:#000000;}
              #menybar li {display: inline; list-style-type: none; padding: 0; margin: 0 auto;}
              #menybar img{padding: 0; margin: 0 auto; padding: 0; margin: 0 auto;}
    		  #menybar a:link{/*color: #8B7500;*/ text-decoration: none; padding: 0; margin: 0 auto; text-decoration: none;}
              #menybar a:visited{text-decoration: none; padding: 0; margin: 0 auto; text-decoration: none;} 
             
    
    #webtv a:hover{
    display: block;
    z-index:1;
    background-image:url("bilder/webtv_sel.png");
    width:161px;
    	
    }
    #words a:hover{
    display: block;
    z-index:1;
    background-image:url("bilder/enlightenment_sel.png");
    width:161px;
    	
    }
    #photos a:hover{
    display: block;
    z-index:1;
    background-image:url("bilder/photos_sel.png");
    width:161px;
    	
    }
    #about a:hover{
    display: block;
    z-index:1;
    background-image:url("bilder/about_webtv_sel.png");
    width:161px;	
    }
    
    #contact a:hover{
    z-index:1;
    display: block;
    background-image:url("bilder/contact_webtv_sel.png");
    width:161px;	
    }
    
    #partners a:hover{
    z-index:1;
    display: block;
    background-image:url("bilder/partners_webtv_sel.png");
    width:161px;	
    }
    The whole page is here if you need to see the hole cod: www.koanuka.com/webtv

    My a:hover dosenīt change the image, does somebody know how to make the image change on a:hover (as you see itīs diffrent images)?

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    With jQuery it is very easy to do.

    Please visit http://api.jquery.com/hover/


    Let me know if it is same what you were looking for

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Change image with CSS

    Thanks for your reply vikram1vicky!

    Great to see an example of one option. I know how to do it with JavaScript but I want to know if there is a way to change the image in my menu only with CSS.

    Iīm open for suggestions!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    The only thing you can do is hide and show images, not replace them. However, I guess what you could do is apply a background image to the the anchors (make them display as block element before) and on hover you hide the HTML image with visibility: hidden, revealing the background image in the anchor(s).

  • #5
    New Coder
    Join Date
    Jun 2011
    Location
    Algeirs,Algeria
    Posts
    43
    Thanks
    5
    Thanked 3 Times in 3 Posts
    You can, but this image must be the background of the anchor.

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    visibility: hidden; & background image

    Thanks VIPStephan and Hamza7 for great suggestions!

    I tried this:

    CSS:
    Code:
              #menybar ul{width: 1020px; height: 36px; padding: 0; margin: 0 auto; border-bottom: 1px solid #8B7500; border-top: 1px solid #8B7500; background-color:#000000;}
              #menybar li {display: inline; list-style-type: none; padding: 0; margin: 0 auto;}
              #menybar img{padding: 0; margin: 0 auto; padding: 0; margin: 0 auto;}
    		  #menybar a:link{ text-decoration: none; padding: 0; margin: 0 auto; text-decoration: none;}
    
    #webtv a:link{
    display: block;
    width:161px;
    background-image:url("bilder/webtv.png");
    	
    }
    #words a:link{
    display: block;
    width:161px;
    background-image:url("bilder/enlightenment.png");
    
    	
    }
    #photos a:link{
    display: block;
    width:161px;
    background-image:url("bilder/photos.png");
    
    	
    }
    #about a:link{
    display: block;
    width:161px;
    background-image:url("bilder/about_webtv.png");
    	
    }
    
    #contact a:link{
    display: block;
    width:161px;
    background-image:url("bilder/contact_webtv.png");
    	
    }
    
    #partners a:link{
    display: block;
    width:161px;
    background-image:url("bilder/partners_webtv.png");
    	
    }
    
              #menybar a:visited{text-decoration: none; padding: 0; margin: 0 auto; text-decoration: none;} 
    
    #menybar a:hover{
    /*display:block; I tried also with block but then the same background image comes under the menu*/ 
    width:161px;
    visibility: hidden;
    	
    }
    HTML:
    Code:
       <div id="menybar">
    
          <ul>
              <li><a href="index.html"><img src="bilder/webtv_sel.png" id="webtv" alt="webtv" width="161" height="35"></a></li>
    		  <li><a href="enlightenment_words.html"><img src="bilder/enlightenment_sel.png" id="words" alt="enlightement words" width="161" height="35"></a></li>
              <li><a href="minglephoto.html"><img src="bilder/photos_sel.png" id="photos" alt="Photos" width="161" height="35"></a></li>
              <li><a href="reporterkoanuka.html"><img src="bilder/about_webtv_sel.png" id="about" alt="About Koanuka webTV" width="161" height="35"></a></li>
              <li><a href="contactwebtv.html"><img src="bilder/contact_webtv_sel.png" id="contact" alt="Contact Koanuka webTV" width="161" height="35"></a></li>
    		  <li><a href="partners.html"><img src="bilder/partners_webtv_sel.png" id="partners" alt="Partners of webTV" width="161" height="35"></a></li>
    	  </ul>
    
      </div>
    Am I writing the background image wrong in css? Because now only the image that I declared in my HTML appears. With mouse over it takes away the image (in a blinking kind of way). So the background image that I declared in my CSS dosenīt appear at all, why?

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    You must write a:hover img {visibility: hidden;}. You want to hide the image, not the link itself on hover.

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Background image dosenīt appear

    Good point VIPStephan!

    But still the background image in the CSS dosenīt appears, why?

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Because you assigned the IDs to the images but in the CSS you address anchors inside elements with the respective ID. Move the IDs to the list items and it should work.

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Diffrent result Firefox and IE

    Of course, great help!

    It seams strange that in Internet Explorer (7) the three last topics in the menubar works exactly as I want! But two topics only get invisible.

    In firefox the three pictures declared in the css is laying under the pictures in the HTML but they are positioned right under so you can see a little part of them..

    For me the topics are declared in the same why so I donīt understand why they are working diffrent. Schould I put a position to the image in the CSS to make them be exactly under the other picture?

  • #11
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Testpage

    I made a test page: http://koanuka.com/webtv/test.html


    were I try to make the code work if somebody have any idea why only the last three of the background images is showing up on mouse over and why the position is "wrong" in firefox?

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    As I said earlier, your links must be displayed as block elements. Likewise, your list items should be displayed as such, and to get them next to each other float them to the left (if you use float you don’t need display: block;).

  • #13
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    backgroundimage donīt show up

    Thank you VIPStephan for your patience, knowledge and explanations!
    I have giving myself some time to try to find the answer of why my backgrounds image donīt show up so I donīt ask to stupid quiestions here!

    Now I have; img tags, id:s in the li tag of the backgroundimage, an img:hover of visibility: hidden and a float in the css.

    I have made the layout look the same both in IE and firefox (finally!) But now none of the browsers will show the background image on mouse over(hover). On mouse over it blinks and I think sometimes a see the background color in the blinkings..! But after the blinking only the background color is shown.

    Have I missed something? I really liked your solution on this VIPStephan and it would be awesome to make it work! Check my codes out: www.koanuka.com/webtv/test.html
    Last edited by Energia; 07-29-2011 at 05:37 PM. Reason: Link to testpage

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    OK, several things:
    1. The float shouldn’t be applied to the list but to the list items (remove display: inline for that matter)
    2. The anchors in the list items need display: block;
    3. All these rules:
      Code:
      #webtv li{
      background-image:url("bilder/webtv_sel.png"); background-repeat: no-repeat;
      }
      #words li{
      background-image:url("bilder/enlightenment_sel.png"); background-repeat: no-repeat;
      }
      #photos li{
      background-image:url("bilder/photos_sel.png"); background-repeat: no-repeat;	
      }
      …
      address list items inside elements with the respective ID. However, the list items themselves have the IDs so you should remove the “li” declaration from these rules so that only the ID remains, like #photos {…}

  • Users who have thanked VIPStephan for this post:

    Energia (07-30-2011)

  • #15
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Thanks!

    Iīm a fan of you VIPStephan!
    You gave me many "aha! times"
    Now it works! Sometimes it gives a little blink still, but I read something that itīs the time it take for the browser to load the image..?

    If you have something to add about that your welcome but Iīm glad that you had a way to do this with only HTML and CSS, and it looks the same on IE and firefox


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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