...

View Full Version : OnMouseOver / Out into function?



CaptainB
08-28-2008, 09:59 AM
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:


.mouseover { border:1px #ff6600 solid;
}



<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>

rangana
08-28-2008, 10:02 AM
If you intend to use the onmouseover and onmouseout to all the td tags, you can have this:


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.

CaptainB
08-28-2008, 10:10 AM
That is exactly what I was looking for!
However, it does not seem to work for me. I've put the code here:



<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:

<td><a href="http://www.XXXXXXX.XX" target="_blank"><img src="images/nationx.png" /></a></td>

rangana
08-28-2008, 10:13 AM
You need an event to make it work, if you intend to run the script onload, try to add highlighted:


<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>

CaptainB
08-28-2008, 10:37 AM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum