Forum Moderators: not2easy
I want to display image.jpg when your mouse hovers over the link to somepage.com.
Anyone know the css to do this. Thanks,
in your previous post [webmasterworld.com] - simply replace the span with your image in the HTML and then replace "span" in the CSS with "img"
or put the image inside the span and leave the CSS as it is
an image is an inline element and can be nested inside a link
[edited by: SuzyUK at 3:05 pm (utc) on Sep. 4, 2008]
a:hover {
background-image: url(aaa.jpg);
}
This works in all the good stuff. Does not work in IE, or at least IE6. For that you must declare a background-color: or the image won't work.
Easiest fix is to simply color match to the image, which you would probably do anyway.
a:hover {
background: #fff url(aaa.jpg);
}
The trick then is how to get rid of the text. Simply changing color: to match and blend in with the image MAY work and would be a very quick solution.
Sample code provided. Depending upon the image used, this would work very well - or horribly - and we will have to get into some <span>s - hiding and showing them. It all depends upon the image and the ease of simply changing the color text to hide it when the image shows.
But, it you are going to use an image on the a:hover, why not just use on image on the <a> and take dealing with the text out of the equation.
(You may want to preload the :hover image so that it pops into place instantly - that there isn't a hesitation between the over and the rendering of the image.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:hover {
background: #fff url(aaa.jpg); background-color; color: #000;
}
</style>
</head>
<body>
<div>
<a href="http://www.example.com">LINK to some page</a>
<div>
<!--##########
I have a link and I would like to display an image on hover.
lets say we have this link
<a href = "somepage.com">Some Page</a>
and an image image.jpgI want to display image.jpg when your mouse hovers over the link to somepage.com.
Anyone know the css to do this. Thanks,
-->
</body>
</html>
}
a.info:hover {
z-index: 25;
color: #FFFF00;
text-decoration: none;
}
a.info img {
display: none;
border: none;
}
.spanClass{
padding-left: .5em;
padding-top: .5em;
font: 17px bold;
padding-bottom: .5em;
padding-right: .5em;
font-family: cursive;
border: none;
}
a.info:hover img { /*the span will display just on :hover state*/
display: block;
position: absolute;
bottom: 2em;
left: 2em;
color: black;
border: none;
}
<a class = "info" href = "http://www.bulletformyvalentine1.com/news.php" target = "blank">Bullet For My Valentine
<img class = "spanClass" src = "bullet.jpg"></img>
</a>
however there is another bug which that reminded me on which can be triggered when using the display:none/block method so try this code instead..
a.info {
position: relative;
color: #00f;
font-family: cursive;
border: none;}
a.info:hover {
color: #FFFF00;
text-decoration: none;
background: #fff; /* added to get around IE bug.. there are more choices if a background: color doesn't suit your site */
}a.info img {
border: none;
margin-left: 10px; /*adjusting this will control the space betwwen the image and the text */
position: absolute;
left: -9999px; /* hide the "popup" offscreen*/
}a.info:hover img {
left: auto; /* bring it back on on hover */
}
}
a.info:hover {
text-decoration: none;
background: url("fileDoesNotExist.jpg");
z-index: 6;
}
a.info img {
border: none;
margin-left: 10px; /*adjusting this will control the space betwwen the image and the text */
position: absolute;
left: -9999px; /* hide the "popup" offscreen*/
}
a.info:hover img {
left: auto; /* bring it back on on hover */
top: -16em;
}
and here is the HTML
<a class = "info" href = "http://www.example.com" target = "blank" title = "example's Website">Coldplay<img src = "example.jpg"></img></a>
Thanks to everyone for their help
[edited by: jatar_k at 12:51 pm (utc) on Sep. 5, 2008]
[edit reason] please use example.com [/edit]
