Validate my mouse over code

HTML & CSS
1

hi

i m using this code to show hover effect on my buttons.

But w3 validator shows error as


1) there is no attribute "onMouseOut"
2) there is no attribute "onMouseOver"

My code works fine. Here is my code. But how can i validate it.


<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
if(document.images)
{

p1 =  new Image();

p1.src = "pic1_hover.jpg";
}
</script>
</head>

<body>
<p>
<a href="aboutus.html" onMouseOut="a.src='pic1.jpg';" onMouseOver='a.src=p1.src;'><img src="pic1.jpg" name="a" alt="" border="0" /></a>
</p>
</body>
</html>

vineet

2

The attribute names simply need to be all lowercase then they will validate fine.

3

thanks chris

it validates now with lowercase

vineet

4

Your welcome :slight_smile:

5

NOT that what you are doing in the example has ANY business being done using javascript after around 1998… but your doctype says the code is in transition from 1997 to 1998 anyways… as does the use of a name attribute as an element index, the presence of the border attribute, etc, etc…

Czech this out:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<title>
	Rollover demo
</title>

<style type="text/css">
.hoverAnchor img {
	border:0;
}

.hoverAnchor:active img,
.hoverAnchor:focus img,
.hoverAnchor:hover img {
	opacity:0; /* modern browsers */
	-moz-opacity:0; /* FF 3- */
	filter:alpha(opacity=0); /* IE8- */
}
</style>

</head><body>

<p>
	<a
		href="aboutus.html"
		class="hoverAnchor"
		style="background:url(pic1_hover.jpg)"
	>
		<img src="pic1.jpg" alt="" />
	</a>
</p>

</body></html>

Javascript? Vee don’t need no steenking Javascript!

NOT that said method is a technique I’d suggest using either, since image replacement and the incorrectly named “CSS sprites” would mean a faster and smoother working page with graceful degredation – depending on how many of these you plan on putting on a page.