Ok so i have two exact images almost, just one is in some funky font, the other in plain english.

now I have my html:

<a class="normal" href="whatever.htm"><img src="pic1">

now in css i have:

a.normal {
}
a.normal:hover {
background-img: pic2;
}

but.... it just sticks with the same picture.... what can i do?

[edit]

There is always a purple box around the image, how do i get rid of this?

[edit]

If i cant use an image do this, how can i keep the font funky, and when they hover over it, its english. Cause to my knowledge fonts that i have, and others don't, can not be viewed by them.

you didn't closed the link:

<a class="normal" href="whatever.htm"><img src="pic1"></a>

also you have to specify the image. You have only pic1, but not .jpg or .gif behind it. So it won't find the image because it just cannot find the type of file :)

and your css should be for your hover:

a.normal { border: 0px; }
a.normal:hover {
background-image: url(pic2.jpg);
}

but still i'm not sure if this is doing what you want, because the image won't change, only the background of the link. And i can't test it right now, but i do think that the second image will appear behind the first one.

Why don't you use mouseovers to do this? that's so much easier. And nope, you can't use other fonts, because people won't see them. The best way is to use images, it's most user friendly way ;)

Love,
Mirna

but still i'm not sure if this is doing what you want, because the image won't change, only the background of the link. And i can't test it right now, but i do think that the second image will appear behind the first one.
correct.
the hover is changing the background of the link only, not actually changing the image itself within the linking area.
a normal javascript rollover would probably do much better.

There is always a purple box around the image, how do i get rid of this?



<image src="image.jpg" border="0">

you didn't closed the link:

<a class="normal" href="whatever.htm"><img src="pic1"></a>

also you have to specify the image. You have only pic1, but not .jpg or .gif behind it. So it won't find the image because it just cannot find the type of file :)

and your css should be for your hover:

a.normal { border: 0px; }
a.normal:hover {
background-image: url(pic2.jpg);
}

but still i'm not sure if this is doing what you want, because the image won't change, only the background of the link. And i can't test it right now, but i do think that the second image will appear behind the first one.

Why don't you use mouseovers to do this? that's so much easier. And nope, you can't use other fonts, because people won't see them. The best way is to use images, it's most user friendly way ;)

Love,
Mirna


The coding i showed is not my EXACT stuff, just some brief typing to show you what i've done :) thanks everyone

uhm can't edit now... and now the first picture wont even show up :S

I've checked its locations LOTS already, and it the right one

uhm can't edit now... and now the first picture wont even show up :S

I've checked its locations LOTS already, and it the right one

lissa has a thing somewhere on her funstuff that allows you to do it without using that css. i think it is this, but i am not sure.

<a href="link" onmouseover="this.src('image2')" onmouseout="this.src('image1')"><img src="image1" border="0"></a>