How can I turn this into one function?

Hi,

Is it possible to change this code so I just have one function for the onMouseOver and onMouseOut calls?

I know it's a basic question, but i'm a bit of a n00b with JS if I'm honest.

Thanks in advance!

<div class="headLink" id="Windows">
<div class="fisheyeTarget"></div>
<div class="inner" onMouseOver="javascript:dojo.fadeOut({node:this,duration:200}).play();" onMouseOut="javascript:dojo.fadeIn({node:this,duration:200}).play();">Windows</div>

<span class="subtext">Windows OS Tutorials</span>

</div>
<div class="headLink" id="Linux">
<div class="fisheyeTarget"></div>
<div class="inner" onMouseOver="javascript:dojo.fadeOut({node:this,duration:200}).play();" onMouseOut="javascript:dojo.fadeIn({node:this,duration:200}).play();">Linux</div>
<span class="subtext">Linux OS Tutorials</span>
</div>
<div class="headLink" id="Webdev">
<div class="fisheyeTarget"></div>
<div class="inner" onMouseOver="javascript:dojo.fadeOut({node:this,duration:200}).play();" onMouseOut="javascript:dojo.fadeIn({node:this,duration:200}).play();">Web Dev</div>
<span class="subtext">Web Dev Tutorials</span>
</div>
<div class="headLink" id="Programming">
<div class="fisheyeTarget"></div>
<div class="inner" onMouseOver="javascript:dojo.fadeOut({node:this,duration:200}).play();" onMouseOut="javascript:dojo.fadeIn({node:this,duration:200}).play();">Programming</div>
<span class="subtext">Programming Tutorials</span>
</div>

I haven't worked with Dojo yet, but maybe worth a try on removing all the inline events in your markup and use this script instead:

<script type="text/javascript">
window.onload=function(){
for(var i=0,iDiv=document.getElementsByTagName('div');i++)
{
if(iDiv[i].className.toLowerCase()=='inner')
{
iDiv[i].onmouseover=function(){dojo.fadeOut({node:this,duration:200}).play();}
iDiv[i].onmouseout=function(){dojo.fadeIn({node:this,duration:200}).play();}
}
}
}
</script>


Hope that helps.

Woohoo! Thanks for that code.

I had to change it a little bit because I got an incorrect syntax error:


<script type="text/javascript">

window.onload=function() {

var iDiv = document.documentElement.getElementsByTagName("div");

for(var i=0; i < iDiv.length;i++)
{
if(iDiv[i].className.toLowerCase()=='inner')
{
iDiv[i].onmouseover=function(){dojo.fadeOut({node:this,duration:200}).play();}
iDiv[i].onmouseout=function(){dojo.fadeIn({node:this,duration:200}).play();}
}
}
}
</script>