Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 1757

Apr 4th, 2009

onmouseover and out validation

Expand Post »

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

Similar Threads

Dynamically enlarge image on mouseover and mouseout in JavaScript / DHTML / AJAX
XML Bug Error. in XML, XSLT and XPATH
HTML onMouseOver and Out validation problem in HTML and CSS
Really Stuck - ASP/Javascript Form Validation in ASP
JavaScript form validation - please help in JavaScript / DHTML / AJAX

veledrom

Reputation Points: 38

Solved Threads: 0

Master Poster

Offline

724 posts
since Apr 2008

Permalink

Apr 4th, 2009

Re: onmouseover and out validation

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.

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Apr 4th, 2009

Re: onmouseover and out validation

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

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');
}

Fungus1487

Reputation Points: 66

Solved Threads: 56

Posting Pro in Training

Offline

459 posts
since Apr 2007

Permalink

Apr 5th, 2009

Re: onmouseover and out validation

Hi Fungus,

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

Thanks

veledrom

Reputation Points: 38

Solved Threads: 0

Master Poster

Offline

724 posts
since Apr 2008

Permalink

Apr 6th, 2009

Re: onmouseover and out validation

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:

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>

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Apr 6th, 2009

Re: onmouseover and out validation

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

Last edited by essential; Apr 6th, 2009 at 1:51 am.

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Dynamic DIV tags don't work.

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Websites Takeover - Help

DaniWeb Message

Cancel Changes

User Name
Password