Member Avatar for veledrom

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

  • 3 Contributors
  • 5 Replies
  • 163 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

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.

Member Avatar for Fungus1487

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');
}
Member Avatar for veledrom

Hi Fungus,

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

Thanks

Member Avatar for essential

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>
Member Avatar for essential

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.