PDA

View Full Version : Rollover Button Help


sidorak95
01-13-2009, 07:41 PM
Well, I'm trying to create a rollover button with just CSS and HTML, no Javascript. Problem is, when I hover my mouse on it, the button image disappears and no graphic takes is place. You can see where I am here (http://www.fungamesuniverse.com/test). Problem is, I really have no idea what I'm doing. Some help is appreciated.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>FunGamesUniverse - Where the Fun Begins! </title>
<link href="teststyle.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="logo">
<img alt="Logo" height="150" src="Logotry.png" width="500" />
</div>

<div class="home">
<a href="http://fungamesuniverse.com" title="Home">
<img src="Homeoff.png" alt="Home" />
</a>
</div>


</body>

</html>


CSS Stylesheet:

body
{
background-color:black
}

div.logo {
width: 500px;
margin: 25px auto;
}


.home {
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(Homeon.png) no-repeat;
white-space: nowrap;
display: block;
margin: 0px;
padding: 0px;
}


.home a {
display: block;
color: #000;
font-size: 11px;
float: left;
text-decoration: none;
}
.home img { border: 0; }
* html a:hover {visibility:visible}

.home a:hover img{visibility:hidden}


.home span {
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
}
shadmego
01-13-2009, 08:14 PM
Check this link out. CSS rules are in the head if you view source.


http://www.4christministry.org/testing/rollover/index.html

Is this what you wanted?
Falcon1986
01-13-2009, 08:15 PM
Shouldn't you add some properties for .home a:hover{ }?

EDIT: Yeah, Shadmego's got it!
shadmego
01-13-2009, 08:21 PM
This is one with a clickable image:

www.4christministry.org/testing/rollover/index2.html

~regards
sjlplat
01-13-2009, 09:53 PM
Let's say you have 2 images that are 100px by 100px. Use them as a background image in a container using the following XHTML and CSS examples:

XHTML Code:


<div class="image"></div>

CSS Code:


.image {
width: 100px;
height: 100px;
background-image: url('/relative/path/to/originalImage.jpg');
background-repeat: no-repeat;
}
.image:hover {
width: 100px;
height: 100px;
background-image: url('/relative/path/to/rolloverImage.jpg');
background-repeat: no-repeat;
}
sidorak95
01-14-2009, 06:42 PM
This is one with a clickable image:

www.4christministry.org/testing/rollover/index2.html

~regards

Thanks shadmego,
I used your code, however the hyperlink won't work and I'm going crazy trying to figure out why my 2nd one is appearing.
www.fungamesuniverse.com/test
www.fungamesuniverse.com/test/teststyle.css
Falcon1986
01-14-2009, 06:59 PM
Shouldn't your <span> tags be surrounded by the <a> tags for the particular <div>?
shadmego
01-14-2009, 07:53 PM
Falcon is correct. You need to wrap the span tags inside the <a> tags.

Your Games images aren't showing up because you defined them in the CSS to show in #games span.image and you have it labeled in your html as <div id="games">...<span class="games"></span></div>

Change the span to a class of image and your Games images will show up. Your code should look like this (with the fixed <a> tags:



<div id="games"><a href="#"><span class="image"></span></a></div>


One last thing you should get in the habbit of doing is ending each line in your css rules with a semi-colon. Check for your background-repeat lines. Put a semi-colon at the end of each of those lines.

~regards