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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    OnMouseOver / Out into function?

    Hi guys,

    Is there any way to make this a function? It's annoying to have to paste all that code everywhere I need it, it's much easier with a function:

    Code:
    .mouseover {	border:1px #ff6600 solid;
    				}
    Code:
    <table id="main_holder" cellspacing="2px">
    <tr>
    <td onmouseover="this.className='mouseover'" onmouseout="this.className=''"><a href="http://www.newz.dk" target="_blank"><img src="images/newz.png" /></a></td>

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    If you intend to use the onmouseover and onmouseout to all the td tags, you can have this:
    Code:
    for(var i=0,td=document.getElementsByTagName('td');i<td.length;i++){
    td[i].onmouseover=function(){this.style.border='1px solid #f60';}
    td[i].onmouseout=function(){this.style.border='0px';}}
    Hope it helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    That is exactly what I was looking for!
    However, it does not seem to work for me. I've put the code here:

    Code:
    <head>
    <script type="text/javascript">
    for(var i=0,td=document.getElementsByTagName('td');i<td.length;i++){
    td[i].onmouseover=function(){this.style.border='1px solid #f60';}
    td[i].onmouseout=function(){this.style.border='0px';}}
    </script>
    </head>
    and this is my html:
    Code:
    <td><a href="http://www.XXXXXXX.XX" target="_blank"><img src="images/nationx.png" /></a></td>

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You need an event to make it work, if you intend to run the script onload, try to add highlighted:
    Code:
    <head>
    <script type="text/javascript">
    window.onload=function(){
    for(var i=0,td=document.getElementsByTagName('td');i<td.length;i++){
    td[i].onmouseover=function(){this.style.border='1px solid #f60';}
    td[i].onmouseout=function(){this.style.border='0px';}}
    }
    </script>
    </head>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    CaptainB (08-28-2008)

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Thank you, that was exactly what I wanted to do! I'm not keen on javascript at all, so your fast and great help is very appreciated!


  •  

    Posting Permissions

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