how do i do a (image) mousover in <span>

It worked in <div> but its not the same as in <div>

[essiw]

my doctype is Xhtml 1.0 and i use css 2.0
I want to make a mousover so when you hover on an image link, you get an other image

i will first show the <div> which did work:

In html:

<div id="home"><a href="/Website%20bertus/website%20bertus.html"><img src="/image2/home.jpg" alt=" " width="109" height="42" /></a></div>

in css:

#home
{
background-image:url(/image2/homev.jpg);
}
#home a {display:block}
#home img {width:100%; height:100%;}
#home a:hover img {visibility: hidden;}

when i try that whit this <span> code it doesn't work:
<span id="home"><a href="/Website%20bertus/website%20bertus.html"><img src="/image2/home.jpg" alt=" " width="109" height="42" /></a></span>

does someone knows how i can fix this?

[essiw]

ow btw, if you ask: why aren't you using <div> then if it is working? that is because i want multiple mousovers next to eachother and <div> creates a hard return ;)

[BadBoyMcCoy]

use the div method but just add this css

.navlink {float:left;}

and add the class to the nav elements

<div id="home" class="navlink"><a href="/Website%20bertus/website%20bertus.html"><img src="/image2/home.jpg" alt=" " width="109" height="42" /></a></div>

<div id="aboutus" class="navlink"><a href="/Website%20bertus/website%20bertus.html"><img src="/image2/home.jpg" alt=" " width="109" height="42" /></a></div>

That should get them to line up;

or if you wanted to you could lose the div and span completly and put

a.navlink {display:block; float:left;}
a.navlink img {width:100%; height:100%;}
a:hover.navlink img {visibility:hidden;}

Just out of curiosity why do you need the 100% width and height on the image?

[edited by: BadBoyMcCoy at 10:51 am (utc) on Oct. 17, 2008]

[essiw]

don't know i just did copy that from some internet site, i know the basics of css but not the more advanced things

[essiw]

it does work your code, the only thing is that i need them to be in the center. is that possible too
and i forgot to mention 2 lines in the css

it was:

#home
{
width:100; 
height:42px;
background-image:url(/image2/homev.jpg);
}

maybe that is why i needed width and height at 100%

[essiw]

if i am typing nonsense whit that code, feel free to adjust it ;)

[essiw]

got a new update, managed to get it working in an <ul> but now my mouseover does not work right, the background image is to low, does anyone know how to fix this?

css:

ul.navlink li { display: inline; 
list-style-type: none; 
}
ul.navlink {
margin: 0px;
padding: 0px;
}
#home
{
width:109px; 
height:42px;
background-image:url(/image2/homev.jpg);
}
#home a:hover img {visibility: hidden;}

html:

<ul class="navlink"><li id="home"><img src="/image2/home.jpg" alt="" width="109" height="42" /></li></ul>

[essiw]

problem solved ;) just made it in an other <div> and did set the margin for that <div>: margin-left: auto; margin-right: auto;

[swa66]

Just out of curiosity why do you need the 100% width and height on the image?

don't know i just did copy that from some internet site, i know the basics of css but not the more advanced things

I'm afraid the source of your problems are from copying from others -which might be a problem in itself considering copyright- and doing it from others who didn't understand what they had themselves or in a context where it's not needed anymore.

Often when I look at CSS it's stuffed with things where it's just not clear as to why the author did add it. I guess often it's something one added out of ignorance, a test that got left in, or just something that developed due to changes. Often it's also there to create some side effect in e.g. IE.
Things do deteriorate with old age and ongoing maintenance.

But if you create something new, don't just settle for "it works". Make it beautiful, easy to maintain, well documented.
And above all do understand all that's in there. Have some pride in your work!