...

View Full Version : change img on a:hover in menu



Energia
07-20-2011, 11:37 AM
Is there a way to change image with css or only with JavaScript?

I have this HTML:



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


#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 (http://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, 11: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, 12:22 PM
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, 12:44 PM
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, 01:27 PM
You can, but this image must be the background of the anchor.

Energia
07-20-2011, 02:50 PM
Thanks VIPStephan and Hamza7 for great suggestions!

I tried this:

CSS:



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


<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, 03: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, 04:29 PM
Good point VIPStephan!

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

VIPStephan
07-20-2011, 04: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, 05: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, 11:24 AM
I made a test page: http://koanuka.com/webtv/test.html
(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, 11: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, 05: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 (http://koanuka.com/webtv/test.html)

VIPStephan
07-30-2011, 12:54 AM
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:
#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, 10:30 AM
Iīm a fan of you VIPStephan!
You gave me many "aha! times" :D
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 :thumbsup:

Energia
08-08-2011, 09:35 PM
I realise that this way still take away the link in some browsers. And the image is more blinking than changing. Is there any ideas out there how could make this code work? Because I really like the solution but now it just need to work also! Otherwise maybe I need to take it away and use javascript instead.

HTML:

<!-- meny -->

<div id="menybar">

<ul>
<li id="webtv"><a href="index.html"><img src="bilder/webtv_sel.png" alt="webtv" width="161" height="35"></a></li>
<li id="words"><a href="enlightenment_words.html"><img src="bilder/enlightenment.png" alt="enlightement words" width="161" height="35"></a></li>
<li id="photos"><a href="minglephoto.html"><img src="bilder/photos.png" alt="Photos" width="161" height="35"></a></li>
<li id="about"><a href="reporterkoanuka.html"><img src="bilder/about_webtv.png" alt="About Koanuka webTV" width="161" height="35"></a></li>
<li id="contact"><a href="contactwebtv.html"><img src="bilder/contact_webtv.png" alt="Contact Koanuka webTV" width="161" height="35"></a></li>
<li id="partners"><a href="partners.html"><img src="bilder/partners_webtv.png" alt="Partners of webTV" width="161" height="35"></a></li>
</ul>

<!-- sluttag för menybar -->
</div>

CSS:


#menybar ul {width: 1020px; padding:0; margin:0 auto; height: 36px; border-bottom: 1px solid #8B7500; border-top: 1px solid #8B7500; background-color:#000000;}
#menybar li {list-style-type: none; padding: 0; margin: 0 auto;}
#menybar li a {display: block;}

#webtv{
float:left;
background-image:url("bilder/webtv_sel.png"); background-repeat: no-repeat;

}
#words{
float:left;
background-image:url("bilder/enlightenment_sel.png"); background-repeat: no-repeat;


}
#photos{
float:left;
background-image:url("bilder/photos_sel.png"); background-repeat: no-repeat;


}
#about{
float:left;
background-image:url("bilder/about_webtv_sel.png"); background-repeat: no-repeat;

}

#contact{
float:left;
background-image:url("bilder/contact_webtv_sel.png"); background-repeat: no-repeat;

}

#partners{
float:left;
background-image:url("bilder/partners_webtv_sel.png"); background-repeat: no-repeat;

}

#menybar a:visited{text-decoration: none;}


#menybar img:hover{
visibility: hidden;

}

The homepage is www.koanuka.com/webtv (http://koanuka.com/webtv/) if you need to see more of the codes.

VIPStephan
08-08-2011, 10:14 PM
Not img:hover! It must be a:hover img {visibility: hidden;} then nothing will blink.

Energia
08-08-2011, 10:36 PM
I love this solution, thank you VIPStephan, simple and works perect now! (Iīm sorry it took a while for me to get it!).

Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum