473,735 Members | 1,903 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 3351

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
1725
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
3615
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
2685
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
1929
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 everything is being converted to SPAN in order to set the font size by points instead of the seven...
2
2822
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 when I mouseover on the image, and then continue once I move the cursor out of the banner image....
7
2342
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
7728
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 write: for (var i = 0; i < attribList.id.length; i++) { var attrib = {};
5
3541
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
1495
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
8965
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8786
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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9466
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9202
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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8202
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 launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6050
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 into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4567
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 the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3278
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2741
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.