AJAX

onmouseover and out validation

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2008

Posts: 496

Reputation: veledrom is an unknown quantity at this point

Solved Threads: 0

veledrom

Offline

Posting Pro in Training

onmouseover and out validation

Apr 4th, 2009

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

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: onmouseover and out validation

Apr 4th, 2009

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 —
 .
And be sure to use only elements that is valid in the DOCTYPE that you are using.

•

Join Date: Apr 2007

Posts: 437

Reputation: Fungus1487 is on a distinguished road

Solved Threads: 50

Fungus1487 Fungus1487 is offline

Offline

Posting Pro in Training

Re: onmouseover and out validation

Apr 4th, 2009

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

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
/* 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');
}
/* 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');
}

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Join Date: Apr 2008

Posts: 496

Reputation: veledrom is an unknown quantity at this point

Solved Threads: 0

veledrom

Offline

Posting Pro in Training

Re: onmouseover and out validation

Apr 5th, 2009

Hi Fungus,

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

Thanks

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: onmouseover and out validation

Apr 6th, 2009

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:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<?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>
<?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>