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
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
Jump to PostUse 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 —
<!-- <a> <img .../> <form><elements></form> <area> -->
.
And be sure to use only elements that is valid in the DOCTYPE that you …
Jump to Postwhy 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'); } …
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 — <!-- <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...
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.