| | |
|
|
|
CSS and image rollover effect |
|---|
| message from Jacob 99 on 15 Jul 2004 |
Hi,
I would like to make an image rollover effect completely in CSS, whereby
when the user hovers over an image, the background color of the image
.vendorLogo{
float: right;
border:0px;
background-color:#EBEBEB;
}
.vendorLogo a:hover{
background-color:#FFF;
}
and my HTML looks like this:
<a href="http://www.cisco.com" target="_blank">
<img src="_vendorLogos/cisco.gif" alt="Vendor Logo" class="vendorLogo"
/>
</a>
am I not using the correct setup? Thanks for any help!
Jacob
|
| Joe Makowiec replied to Jacob 99 on 15 Jul 2004 |
You've got the style on the image, which is *inside* (ie, more specific)
whereas the class is set up to be outsite the link. You need to have a
container for the <a> tag, with class vendorLogo:
<span style="vendorLogo"><a href="whatever"><img src="whatever.gif" />
</a></span>
|
| Jacob 99 replied to Joe Makowiec on 15 Jul 2004 |
Thanks, but Im getting a very weird result: it doesnt look like the
background of the image is affected, but rather the background of something
else (a very small non-rendering element).
Any ideas?
Jacob
"Joe Makowiec" <webmaster@munged.brunswicklibrary.invalid> wrote in message
news:Xns952787C1C4A8EmakowiecatnycapdotrE@216.104.212.96...
|
| John Gaver replied to Jacob 99 on 15 Jul 2004 |
It is possible. Try this. The key is, to set "block", in the "rollover a"
style.
I used a couple of shades of blue in the CSS Styles. Just change the colors
to suit your site.
Styles
|
| Jacob 99 replied to John Gaver on 16 Jul 2004 |
Wonderful!!!
It looks great!
Thanks
Jacob
"John Gaver" <jgaEVERYver@ActionThingAmerica.org> wrote in message
news:BD1CBD86.B85E%jgaEVERYver@ActionThingAmerica.org...
|
| Joe Makowiec replied to Jacob 99 on 15 Jul 2004 |
That's true. You can't change the background on an image using CSS.
Assuming that .gif has a transparent background, all you can do is change
the color of the element behind it, in your case the <a> tag.
You have a couple of choices:
- USE CSS and pure text:
a:link {background-color : white;}
a:hover {background-color : red;}
<a href="xyzzy.php">Text goes here</a>
- Use rollover images. Create one with the regular background color you
want, and one with the rollover background. ISTR that Fireworks has a
pretty good tutorial on how to do this. Or just create the first image,
export it, change the background color and re-export with a new name.
Then in DW:
- Insert the image and add the link
- Name the image (Properties bar, left side, next to the thumbnail)
- Go to the Behaviors panel (Window>Behaviors)
- With the image selected, click on the "+" button
- Pick the "Swap Image" behavior
- Pick the rollover image
- Click OK
|
|
Archived message: CSS and image rollover effect (Macromedia Dreamweaver)
