Hi,

I use onmouseover and out for <td> or <div> to change either backgroung image or color. However, onmouseover and out are not validated for HTML. w3scholls HTML validator doesn't validate them. How can i solve this problem?

Thanks

Use the eventListener, instead of assigning it directly on those tags that you have mentioned. The only elements that will validates with those events, are the &#8212; <!-- <a> <img .../> <form><elements></form> <area> --> .
And be sure to use only elements that is valid in the DOCTYPE that you are using.

why use javascript for this ? CSS is perfectly capable of doing this without the scripting overhead.

/* Example changing a td elements background colour */
td {
    background-color:transparent;
}
td:hover {
    background-color:yellow;
}

/* Example changing a div's background image */
div {
    background:transparent url('some_image.jpg');
}
div:hover {
    background:transparent url('another_image.jpg');
}

Hi Fungus,

I want something workes in all browsers. Your doesn't work in IE.

Thanks

Here a simple demo to get you started.
You can validate this entry with W3Cs markup validatation tool's via direct input. Just copy paste the whole code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript DEMO</title>
<style type="text/css" charset="utf-8" media="screen,handheld">
/* <![CDATA[ */
body, div, table, td, th {
   font: normal normal normal 90%/1.4 "Trebuchet MS", Tahoma, Verdana, Helvetica, Arial, Sans-Serif; color: #000; text-align: center }
div {
   height auto;
   margin: 5em auto 5em auto;
   min-height: 200px;
   text-align: left;
   width: 95%; }

div.red {
   background-color: #E00; }

div.white {
   background-color: #fff; }

/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
var div;
var my = function() {

   function red() { 
   if ( document.all ) {
 document.all.myDiv.className = "red"; }
   else if ( document.getElementById ) {
 document.getElementById("myDiv").className = "red"; }
}

   function white() { 
   if ( document.all ) {
 document.all.myDiv.className = "white"; }
   else if ( document.getElementById ) {
 document.getElementById("myDiv").className = "white"; }
}

   function addEvents() {
div = ( document.all ) ? document.all.myDiv : document.getElementById("myDiv");

   if ( document.attachEvent ) {
div.attachEvent("onmouseover",red);
div.attachEvent("onmouseout",white); }
   else if ( document.addEventListener ) { div.addEventListener("mouseover",red,false);

div.addEventListener("mouseout",white,false); }
}

return { 
   colors : addEvents }
}();

if ( window.attachEvent )
window.attachEvent("onload",my.colors);
else if ( window.addEventListener )
window.addEventListener("load",my.colors,false);
else
window.onload = my.colors;
/* ]]> */
</script>

</head>
<body>
<div class="white" id="myDiv">Try MouseOver and MousedOut here!</div>
<div id="div1"><a href="#">Div Filler</a></div>
</body>
</html>

Oops! I forgot to remove the charset attribute in the <style> tag.
Kindly remove it to make the markup valid. Good day...

This article has been dead for over six months. Start a new discussion instead.