Validate my mouse over code

**vinpkl** · Apr 15, 2012 07:42

hi

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

But w3 validator shows error as

Code:

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.

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 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

**chris.upjohn** · Apr 15, 2012 08:09

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

**vinpkl** · Apr 15, 2012 08:12

Originally Posted by chris.upjohn

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

thanks chris

it validates now with lowercase

vineet

**chris.upjohn** · Apr 15, 2012 08:13

Your welcome

**deathshadow60** · Apr 16, 2012 04:29

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:

Code:

<!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.

User Tag List

Thread: Validate my mouse over code

Thread Tools

Display

Validate my mouse over code

Bookmarks

Bookmarks

Posting Permissions