change img on a:hover in menu

Energia · 07-20-2011, 10:37 AM

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)?

vikram1vicky · 07-20-2011, 10:59 AM

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

Energia · 07-20-2011, 11:22 AM

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!

VIPStephan · 07-20-2011, 11:44 AM

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).

Hamza7 · 07-20-2011, 12:27 PM

You can, but this image must be the background of the anchor.

Energia · 07-20-2011, 01:50 PM

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?

VIPStephan · 07-20-2011, 02:49 PM

You must write a:hover img {visibility: hidden;}. You want to hide the image, not the link itself on hover.

Energia · 07-20-2011, 03:29 PM

Good point VIPStephan!

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

VIPStephan · 07-20-2011, 03:33 PM

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.

Energia · 07-20-2011, 04:06 PM

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?

Energia · 07-21-2011, 10:24 AM

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?

VIPStephan · 07-21-2011, 10:36 AM

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;).

Energia · 07-29-2011, 04:35 PM

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

VIPStephan · 07-29-2011, 11:54 PM

OK, several things:

The float shouldn’t be applied to the list but to the list items (remove display: inline for that matter)
The anchors in the list items need display: block;

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 {…}

Energia · 07-30-2011, 09:30 AM

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