View Thread: rollover images using CSS

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: CSS - Styling your pages with Cascading Style Sheets.

Thread: rollover images using CSS

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 5

[ ]

Author

This topic has been viewed 6998 times and has 4 replies

AMS
Stranger

Portugal
Joined: Dec 11, 2004
Post Count: 8
Status: Offline


rollover images using CSS

HI!

Anybody knows how to make the following code work?

The rollover image disappears When the mouse is over it.
Where can i put a reference path to the secondary rollover image?

TNX!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.cssnav {
position: relative;
font-family: arial, helvetica, sans-serif;
background-image: url(overbtn.jpg);
background-repeat: no-repeat;
white-space: nowrap;
display: block;
width: 211px;
height: 44px;
margin: 0;
padding: 0;
}

.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 211px;
height: 44px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.cssnav img {width: 211px; height: 44px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

.cssnav span {
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
}

</style>

</head>

<body>
<div class="cssnav"> <a href="http://path.com" title="teste"> <img src="image.gif" alt="teste1" width="68" height="67" />
<span> your_keyword </span> </a> </div>
</body>

</html>

The code can be found in the following link:
http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml

[Jan 7, 2005 3:10:08 AM]

[Link]

tpattison
Advanced Member

UK
Joined: Dec 29, 2004
Post Count: 1662
Status: Offline


Re: rollover images using CSS

Hi

Your images disappear because you've told them to:

.cssnav a:hover img{visibility:hidden}

I would assume that you could use background images for both button states.

.cssnav a {background-image: url(overbtn.jpg)}
.cssnav a:hover {background-image: url(overbtn2.jpg)}

I have no idea if this would work or not. Background images can be set via CSS, so surely you could set both states using CSS?

Give it a go and let me know how you get on!

Tim
----------------------------------------
Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen

[Jan 7, 2005 5:01:49 AM]

[Link]

tpattison
Advanced Member

UK
Joined: Dec 29, 2004
Post Count: 1662
Status: Offline


Re: rollover images using CSS

Hi again!

Is your CSS page in a different place to your HTML? URLs are interpreted relative to the style sheet source, not to the HTML source.

Tim
----------------------------------------
Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen

[Jan 7, 2005 5:09:55 AM]

[Link]

AMS
Stranger

Portugal
Joined: Dec 11, 2004
Post Count: 8
Status: Offline


Re: rollover images using CSS

TNX!
The problem was in the backgound image URL:

background-image: url(image1.gif);

Anybody knows other forms to implement CSS rollover images?
(For example, without using the background to store one of the images)

[Jan 7, 2005 10:18:11 AM]

[Link]

goggie
Stranger

New Zealand
Joined: Oct 18, 2004
Post Count: 15
Status: Offline


Re: rollover images using CSS

you can try eric meyers pure css popups rollovers, thats who i learnt from.
hope that helps a bit more.

[Jan 7, 2005 2:29:01 PM]

[Link]

[ ]

Current timezone is GMT
Sep 5, 2010 10:03:16 PM