Shortening onmouseover & onmouseout attributes ??? [Archive]

hater

07-10-2006, 06:46 AM

Hello everyone,

this is my first post & not sure if i am putting it in the right spot... anyways does anyone know of a way to shorten the attribute names onmouseover & onmouseout attributes???

I would like to wrap these to something with a smaller name say "omo" for "onmouseover", I would like to condense the code shown below, I have it repeated significantly throughout my code, about 1000 cells, mapping those attributes to a shorter name would save significant amount in my code...

is there a way to do this through a css style sheet for each <td> or through a javascript wrapper function??? any help would be much appreciated!

<td>
<a href="test1.php"><img src="images/image1.jpg" onmouseover="function1(parameters1);" onmouseout="otherfunction();"/></a>
</td>
<td>
<a href="test2.php"><img src="images/image2.jpg" onmouseover="function1(parameters2);" onmouseout="otherfunction();"/></a></td>
<td>
<a href="test3.php"><img src="images/image3.jpg" onmouseover="funtion1(parameters3);" onmouseout="otherfunction();"/></a>
</td>

JUD

07-10-2006, 11:19 AM

Hi hater,

Unfortunately there's no way to actually shorten those attributes.

However you could have javascript do all the hard work by setting the attributes for you.

Give the table containing your images an id like 'image_container'. Then have javascript loop through those images, setting the attributes for each one.

It should save you a lot of code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
// <![CDATA[ //
function setImageFunctions(){
var imgs = document.getElementById("image_container").getElementsByTagName("IMG");

for(var i = 0; i < imgs.length; i++){
imgs[i].onmouseover = function(){
function1('Parameters' + (i + 1)); // e.g if i = 0 -- function1('Parameters1')
}
imgs[i].onmouseout = function(){
otherfunction();
}
}
}

// ...rest of your functions etc. goes here
// ]]> //
</script>
</head>

<body onload="setImageFunctions()">
<table id="image_container">
<tr>
<td>
<a href="test1.php"><img src="images/image1.jpg" /></a>
</td>
<td>
<a href="test2.php"><img src="images/image2.jpg" /></a></td>
<td>
<a href="test3.php"><img src="images/image3.jpg" /></a>
</td>
</tr>
</table>
</body>
</html>