Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Shortening onmouseover & onmouseout attributes ???

    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>

  • #2
    JUD
    JUD is offline
    New Coder
    Join Date
    Jul 2005
    Location
    I'm right here
    Posts
    92
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

    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>
    Last edited by JUD; 07-10-2006 at 12:27 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •