473,573 Members | 2,698 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Optimizing code for span mouseover invocation.

On my page I have a lot string like this:
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(null)" >abc1</span>
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(null)" >abc2</span>
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(null)" >abc3</span>
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(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>

Oct 20 '05 #1
2 3339

Alex wrote:
On my page I have a lot string like this:
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(null)" >abc1</span>
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(null)" >abc2</span>
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(null)" >abc3</span>
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(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.onmous eover=function( theEvent)
{
var theEvent=(theEv ent)? theEvent||windo w.event;
var
theTarget=(theE vent.target)?th eEvent.target:t heEvent.srcElem ent;

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

document.onmous eout=function(t heEvent)
{
var theEvent=(theEv ent)? theEvent||windo w.event;
var
theTarget=(theE vent.target)?th eEvent.target:t heEvent.srcElem ent;

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

Julian

Oct 20 '05 #2
Alex wrote:
On my page I have a lot string like this:
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(null)" >abc1</span>
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(null)" >abc2</span>
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(null)" >abc3</span>
<span onmouseover="ca llMe(this)" onmouseout="cal lMe(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.class Name)){
('mouseover' == e.type)? mOver(tgt) : mOut(tgt);
}
}

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

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

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

<p>This is some plain text. <span class="someClas s doMoMo">Here is a
doMoMo span</span> This is not a doMoMo bit<span
class="someOthe rClass doMoMo">Here is another doMoMo
span</span></p>

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

--
Rob
Oct 21 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
1716
by: Ivan Marsh | last post by:
Hey Folks, This code works in IE but not in Mozilla. I'd like it to work in both. I'm sure it has something to do with the way I'm passing the anchor object but I can't figure it out. <SCRIPT TYPE='text/JavaScript'> function GetTime(TimeAnchor) { today = new Date();
7
3587
by: x muzuo | last post by:
Hi guys, I have got a prob of javascript form validation which just doesnt work with my ASP code. Can any one help me out please. Here is the code: {////<<head> <title>IIBO Submit Page</title> </head> <style type="text/css">
2
2681
by: robin9876 | last post by:
In a HMTL Span element I have a mouseover event which calls a javascript function. How in this function can I get the cursor position?
2
1917
by: toddaa | last post by:
I'm sorry if this has previously asked and answered. I have been searching for a while and have come up empty. I am trying to write a function which will return the font size attribute for the current location of the cursor in an editable iframe. Unfortunately, queryCommandValue doesnt seem to be working. Instead of using the FONT tag...
2
2812
by: sgMuser | last post by:
Hi, I am not a good developer of Javascript codes. Needs this help to make some modification to this famous free javascript from Anarchos. i am using this in one of my webpage. What it does is, rotates banners with hyperlink specific to each image. it works just perfect but i need a simple modification. now I want to stop rotating the images...
7
2321
by: mavigozler | last post by:
IE7 does not appear to set an event on contained text inside SPAN elements whose 'onclick', 'onmouseover', and 'onmouseout' events, defying the HTML recommendation. Firefox appears to conform. Is that so?
15
7719
RMWChaos
by: RMWChaos | last post by:
As usual, an overly-long, overly-explanatory post. Better too much info than too little, right? A couple weeks ago, I asked for some assistance iterating through a JSON property list so that my code would either select the next value in the member list or the single value. The original post can be found here. This is the code gits helped me...
5
3526
by: Brent | last post by:
Take this small HTML fragment: span.theClass{float:left;width:100px;cursor:pointer;cursor:hand;} ------------------------ <div> <span id="1" class="theClass">&nbsp;<span> <span id="2" class="theClass">Stuff in span<span> <span id="3" class="theClass"><span> </div> ------------------------
2
1490
by: Bill77 | last post by:
<!--Force IE6 into quirks mode with this comment tag--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> a.img-border img, a.img-border:link img{border:12px solid #6040c0;}
0
7707
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8213
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
8080
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6430
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5604
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5296
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3737
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1320
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1048
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.