Optimizing code for span mouseover invocation.

[Alex]

On my page I have a lot string like this:
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc3</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc4</span>

How can I optimize it?
Is it possible to move this definition what to do to style/css or some
other common place?

And have something like this:
<span id="callMe">abc</span>

[Julian Turner]

Alex wrote:

On my page I have a lot string like this:
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc3</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc4</span>

How can I optimize it?
Is it possible to move this definition what to do to style/css or some
other common place?

And have something like this:
<span id="callMe">abc</span>

Yes it is.

Firstly, I would perhaps choose a different id name, because that could
conflict with your function name callMe().

Secondly, because events "bubble" up the node tree, they end up at the
document node.

You can therefore attach a handler to the document node as follows:-

document.onmouseover=function(theEvent)
{
var theEvent=(theEvent)? theEvent||window.event;
var
theTarget=(theEvent.target)?theEvent.target:theEve nt.srcElement;

if (theTarget.id=="mySpan")
{
callMe(theTarget);
return;
}
};

document.onmouseout=function(theEvent)
{
var theEvent=(theEvent)? theEvent||window.event;
var
theTarget=(theEvent.target)?theEvent.target:theEve nt.srcElement;

if (theTarget.id=="mySpan")
{
callMe(null);
return;
}
};

Julian

[RobG]

Alex wrote:

On my page I have a lot string like this:
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc3</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc4</span>

How can I optimize it?
Is it possible to move this definition what to do to style/css or some
other common place?

And have something like this:
<span id="callMe">abc</span>

Following on from Julian's idea, this one fires mouseover/out for any
element with class ('doMoMo') within the page. Note that you can add
multiple classes to elements and they don't have to be defined in a
stylesheet:
<script type="text/javascript">

// This is the important bit - handles the mouseover/out
// And calls the appropriate function
function doOverOut(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
if (tgt && tgt.className && /\bdoMoMo\b/.test(tgt.className)){
('mouseover' == e.type)? mOver(tgt) : mOut(tgt);
}
}

// Just a dummy mouseover function
function mOver(el)
{
// mouseover function
document.getElementById('xx').innerHTML =
'Mouse<b>over</b> fired';
el.style.backgroundColor = '#ccccff';
}

// Just a dummy mouseout function
function mOut(el)
{
// mouseout function
document.getElementById('xx').innerHTML =
'Mouse<b>out</b> fired';
el.style.backgroundColor = '#ffffff';
}

// Add mousever/out functions to the document
window.onload = function(){
var _Bdy = document.body || document.documentElement;
_Bdy.onmouseover = doOverOut;
_Bdy.onmouseout = doOverOut;
}
</script>

<p>This is some plain text. <span class="someClass doMoMo">Here is a
doMoMo span</span> This is not a doMoMo bit<span
class="someOtherClass doMoMo">Here is another doMoMo
span</span></p>

<div id="xx" class="doMoMo"></div>

--
Rob