HTML Forum

**zoom252105** · 02-18-2009, 02:50 PM

Hi,

I want to use rollover images on my website for links but don't yet know Javascript, so I'm using CSS to change the background image when the user "hovers" over it.
I learnt how to make rollover images using CSS today... but I discovered after lots of trial and error that they will only display on my site if I remove the Doc Type(?).

I'm fairly new to web design, so the Doc Type I've been using is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

I've heared this is more forgiving then "strict".

Is there a specific Doc Type I have to use in order for my website to show rollover CSS images? I didn't even know the Doc Type *did* anything to a website - I thought it was just something to tell the validator what type of site you are making.

Hope this makes sense. Any help would be great!

**LadynRed** · 02-18-2009, 03:26 PM

Quote:

they will only display on my site if I remove the Doc Type(?).

Nope,that cannot be. You NEED a proper doctype. If it's not working with a DTD, then you have something else wrong.

Get away from that awful loosey-goosey HTML Loose doctype and use at LEAST HTML 4.01 Strict.

Css rollovers should work just fine, even with that lousy "loose" dtd.

You don't need javascript to do rollovers - it's better that you do NOT use it, in fact.

Show us the code or a URL so we can actually see what you've got.

**zoom252105** · 02-18-2009, 05:58 PM

Hi, thanks for replying.

I've copied the code from HTML and CSS. Sorry, it's a bit long.

For the HTML I've got:
__________________________________________________ _______
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Mind Body Achievements | Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<table width="900px" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="title" rowspan="2" width="300px"><h1 class="title">Mind Body<br />Achievements</h1></td>
<td><a class="btnhome" href="index.htm"></a></td>
<td><a class="btnaboutus" href="aboutus.htm"></a></td>
<td><a class="btnservices" href="services.htm"></a></td>
<td><a class="btnproducts" href="products.htm"></a></td>
<td><a class="btnresources" href="resources.htm"></a></td>
<td><a class="btncontactus" href="contactus.htm"></a></td>
</tr>
<tr>
<td colspan="7"><p class="titletlf">0845 123 1234</p></td>
</tr>
</table>
__________________________________________________ _______

and in the stylesheet I've got:
__________________________________________________ _______
/* HOME BUTTON */
.btnhome {
width: 80px;
height: 25px;
font-size: 10px;
text-decoration: none;
background-repeat: no-repeat;
background-image: url("btnhome.jpg");
}
.btnhome:hover {
background-image: url("btnhomeover.jpg");
}

/* ABOUT US BUTTON */
.btnaboutus {
width: 80px;
height: 25px;
font-size: 10px;
text-decoration: none;
background-repeat: no-repeat;
background-image: url("btnaboutus.jpg");
}
.btnaboutus:hover {
background-image: url("btnaboutusover.jpg");
}

/* SERVICES BUTTON */
.btnservices {
width: 80px;
height: 25px;
font-size: 10px;
text-decoration: none;
background-repeat: no-repeat;
background-image: url("btnservices.jpg");
}
.btnservices:hover {
background-image: url("btnservicesover.jpg");
}

/* PRODUCTS BUTTON */
.btnproducts {
width: 80px;
height: 25px;
font-size: 10px;
text-decoration: none;
background-repeat: no-repeat;
background-image: url("btnproducts.jpg");
}
.btnproducts:hover {
background-image: url("btnproductsover.jpg");
}

/* RESOURCES BUTTON */
.btnresources {
width: 80px;
height: 25px;
font-size: 10px;
text-decoration: none;
background-repeat: no-repeat;
background-image: url("btnresources.jpg");
}
.btnresources:hover {
background-image: url("btnresourcesover.jpg");
}

/* CONTACT US BUTTON */
.btncontactus {
width: 80px;
height: 25px;
font-size: 10px;
text-decoration: none;
background-repeat: no-repeat;
background-image: url("btncontactus.jpg");
}
.btncontactus:hover {
background-image: url("btncontactusover.jpg");
}

etc...

I think the code is right. But the rollovers only display if I remove the Doc Type

**LadynRed** · 02-18-2009, 08:26 PM

Try:
.btnservices a:hover {
background-image: url(btnservicesover.jpg);
}

Hover in IE only works on the <a> You need to be specific

**Brilliant_view** · 02-19-2009, 04:25 AM

The best solution for this is to do it in javascript.Simply if you have Dreamweaver installed then go to rollover images it takes just two to three seconds.

**zoom252105** · 07:54 AM

I was tempted to but I want to learn how to do everything indepently ( excluding help from the forums

).

I've found out why it didn't work now! It is because I did not have a:
"display: block;"

in my CSS.

Thanks for your suggestions anyway.

**LadynRed** · 02-19-2009, 09:29 AM

Quote:

The best solution for this is to do it in javascript

No, it isn't. CSS rollovers are much more accessible and unless you're doing something really complicated, javascript just is NOT necessary.

**zoom252105** · 02-19-2009, 10:31 AM

Hi,

Out of interest; what is more accessible out of using JavaScript or Flash to create buttons?

**bz1406** · 02-20-2009, 11:20 AM

Thanks for tips...it really work for me...

**LadynRed** · 02-20-2009, 12:59 PM

Quote:

Out of interest; what is more accessible out of using JavaScript or Flash to create buttons?

It's a wash. Google, at least, is now able to 'read' text inside flash. It cannot, however, read an IMAGE. Real text will always be more accessible than images.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!