i need help with some CSS! - HTML Forums

maskedcrypt · 05-07-2008, 10:31 AM

im trying to get something like this but for it to work on a image so when the mouse hovers over the image the image well change etheir size or change to a bigger image right now i have it changing a link text size i want to use that to change a image for one to another.

a, a:link, a:visited, a:active {
text-transform:uppercase;
font-size:20px;
font-weight:normal;
font-family:small fonts;
text-decoration:none;
color:black;
}
a:hover {
text-transform:uppercase;
font-size:30px;
font-weight:normal;
font-family:small fonts;
text-decoration:none;
color:99ff33;
}

jessnoonyes · 05-07-2008, 02:42 PM

a, a:link, a:visited, a:active {
text-transform:uppercase;
font-size:20px;
font-weight:normal;
font-family:small fonts;
text-decoration:none;
color:black;
background: url(image.jpg);
}
a:hover {
text-transform:uppercase;
font-size:30px;
font-weight:normal;
font-family:small fonts;
text-decoration:none;
color:99ff33;
background: url(hoverimage.jpg);
}

maskedcrypt · 05-09-2008, 09:32 AM

thank you, but now i have another problem how do i do that for muilt images i mean i dont want them all to change to the same one...

maskedcrypt · 05-09-2008, 09:38 AM

and yet another problem arrises its changing the background of my links but not the image... ahh this is confusing how would you do this in java ?

Pegasus · 05-09-2008, 10:08 AM

You could make up an id for each link and put the new background information into it.

Your CSS would look something like this:

PHP Code:


			
a, a:link, a:visited, a:active {
text-transform:uppercase;
font-size:20px;
font-weight:normal;
font-family: Arial Helvetica sans-serif;
text-decoration:none;
color:black;
}
a:hover {
text-transform:uppercase;
font-size:30px;
font-weight:normal;
font-family: Arial Helvetica sans-serif;
text-decoration:none;
color:99ff33;
}
a.idname:link, a.idname:visited, a.idname:active {background-image: url("image.jpg"); }
a.idname:hover {background-image: url("image2.jpg"); }

And you'd have to make each different image combination just like this one, where idname is the name of your identifier. The links would look like this:

HTML Code:

<a href="linkto.html" id="idname1">Link</a><br>
<a href="linkto2.html" id="idname2">Link 2</a><br>

And so on for all the links.

maskedcrypt · 05-09-2008, 10:33 AM

thank you! ill use this and java this helps alot.

Pegasus · 05-09-2008, 10:37 AM

You're quite welcome. Let me know if it doesn't work out as you expected it to.