473,216 Members | 1,351 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,216 software developers and data experts.

complicated OnMouseOver

Hi Gurus

I am trying to make this rather complicated maps with an a huge number of mouseovers and the like.

I want to set up a function that OnMouseDown swaps the OnMouseOver and OnMouseOut for the same element.

E.g.
<A HREF="#"
OnMouseOver="A(); return true"
OnMouseOut"B(); return true;"
OnMouseDown="S(); return false;"


where...

function S () {
'swap onMouseOver with OnMouseOut.....
}

I would prefer not to work with IDs (as there are just so many A HREFs) but maybe with something like "me" or "this" if that exists.

Then, to make it all more complicated, I need to be able to read which areas received a swap....

For your information, the OnMouseOver and OnMouseOut swap images (highlights part of the map).

TIA

- Nicolaas
Jul 23 '05 #1
7 3297

"windandwaves" <wi*********@coldmail.com> wrote

For your information, the map can be found here:

http://switch.hosts.net.nz/~admin64/m/m.html

Thank you

- Nicolaas
Jul 23 '05 #2
windandwaves wrote:

[snip]
I want to set up a function that OnMouseDown swaps the OnMouseOver
and OnMouseOut for the same element.


[snip]

function swap(e) {var t;
t = e.mouseover;
e.mouseover = e.mouseout;
e.mouseout = t;
return false;
}

<a ... onmousedown="return swap(this);">

The this operator provides a reference to the target of the event -
the link.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

"Michael Winter" <m.******@blueyonder.co.invalid> wrote in message news:Sz*******************@text.news.blueyonder.co .uk...
windandwaves wrote:

[snip]
I want to set up a function that OnMouseDown swaps the OnMouseOver
and OnMouseOut for the same element.


[snip]

function swap(e) {var t;
t = e.mouseover;
e.mouseover = e.mouseout;
e.mouseout = t;
return false;
}

<a ... onmousedown="return swap(this);">

The this operator provides a reference to the target of the event -
the link.

Mike


Thanks Mike, brilliant as always. Thank you so MUCH!
Jul 23 '05 #4

"Michael Winter" <m.******@blueyonder.co.invalid> wrote in message news:Sz*******************@text.news.blueyonder.co .uk...

[...]

function swap(e) {var t;
t = e.mouseover;
e.mouseover = e.mouseout;
e.mouseout = t;
return false;
}

<a ... onmousedown="return swap(this);">


to make it work for me, I just had to add the "on" part i.e.

function swap(e) {var t;
t = e.onmouseover;
e.onmouseover = e.onmouseout;
e.onmouseout = t;
return false;
}

Now, of course (!), I have another problem, I need to also swap the onmouseover and onmouseout for the other <A HREFs> that share
the same onmouseover and onmouseout elements. I have written this function, but it does not seem to work (yet):

function findothers(ono1){
var el;
var c;
el = document.all.tags("A");
c = el.length
for(var i = 0; i < c; i++){
var e = el(i);
var ono2 = e.onmouseover;
if (ono1 == ono2) {
swap(e);
}
}
}

Any help greatly appreciated.

- Nicolaas
Jul 23 '05 #5
windandwaves wrote:

[snip]
to make it work for me, I just had to add the "on" part
Oops. Sorry.

[snip]
Now, of course (!), I have another problem, I need to also swap the
onmouseover and onmouseout for the other <A HREFs> that share the
same onmouseover and onmouseout elements.
When are you doing this? Just whenever you call the new function?

function swapAll(l) {
for(var c = document.links, i = 0, n = c.length; i < n; ++i) {
if(c[i].onmouseover == l) {swap(c[i]);}
}
}

The links collection contains all A elements with href attributes.
Like other DOM collections, you /should/ be able to index it by name
(that is, an id or name attribute value) however IE doesn't support
this for some reason.
function findothers(ono1){
var el;
var c;
el = document.all.tags("A");
It would be better to use document.getElementsByTagName. The all
collection and its properties should only be used for IE4. Newer IE
versions support the equivalent DOM methods.
c = el.length
for(var i = 0; i < c; i++){
var e = el(i);


Use square brackets not parentheses. That should be interpreted as a
function call by any sane user agent.

[snip]

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #6
windandwaves wrote:
[...]
Now, of course (!), I have another problem, I need to also swap the onmouseover and onmouseout for the other <A HREFs> that share
the same onmouseover and onmouseout elements. I have written this function, but it does not seem to work (yet):

function findothers(ono1){
What is ono1?

Case 1: Is it a reference to an onmouseover event, like:

...
var ono1 = someElement.onmouseover;
findothers(ono1);
...

Case 2: Is a reference to an element that has an onmouseover:

var ono1 = document.getElementById('elementWithAnOnmouseover' );
findothers(ono1);

Case 3: It is the string name of an onmouseover that has been
defined elsewhere:

function aFunkyFunc(){
...
}

...
var ono1 = 'aFunkyFunc';
findothers(ono1);
...
var el;
var c;
el = document.all.tags("A");
You seem to like IE, but a more cross-browser way is:

if (document.getElementsByTagName) {
var el = document.getElementsByTagName('A');
} else if (document.all) {
var el = document.all.tags('A');
}

And you can declare the variables el & c and give them values
when you first use them. Sometimes in long scripts it's nice to
declare them all in one spot so you don't accidentally double-up
on names, but for short scripts, it's common to declare them and
give them values at the same time, right where you need them.
c = el.length
for(var i = 0; i < c; i++){
This will run a lot faster as:

for ( var c = el.length - 1; c >= 0; c-- ) {
var e = el(i);
var ono2 = e.onmouseover;
if (ono1 == ono2) {


Why bother with ono2? You only use it once, so don't bother to
create it (unless you have some other use for it not shown here).

Assuming case 1 above:

var e = el[c];
if ( ono1 == e.onmouseover ){
swap(e);
}

Assuming case 2 above:

var e = el[c];
if ( ono1.onmouseover == e.onmouseover ){
swap(e);
}

Assuming case 3 above:

I can't help, I don't know how to get the name of the function
attached to an onmouseover unless you use some IE only method
(innerText? adjacentHTML?). Maybe it can be done with regExp.

Mike?

All of the above is offered as a suggestion, untested of course.

e.onmouseover is actually the entire script, not just the name of
the function. Do alert(e.onmouseover) and you'll see what I
mean.

e.g.

<script type="text/javascript">
function hiNic(a){
alert(a.onmouseover);
}
</script>
<span onmouseover="hiNic(this)">blah blah blah</span>

Displays:

function onmouseover(event) {
hiNic(this);
}

--
Rob
Jul 23 '05 #7

"RobG" <rg***@iinet.net.auau> wrote in message news:42***********************@per-qv1-newsreader-01.iinet.net.au...
windandwaves wrote:
[...]
Now, of course (!), I have another problem, I need to also swap the onmouseover and onmouseout for the other <A HREFs> that share
the same onmouseover and onmouseout elements. I have written this function, but it does not seem to work (yet):

function findothers(ono1){


What is ono1?

Case 1: Is it a reference to an onmouseover event, like:

...
var ono1 = someElement.onmouseover;
findothers(ono1);
...

Case 2: Is a reference to an element that has an onmouseover:

var ono1 = document.getElementById('elementWithAnOnmouseover' );
findothers(ono1);

Case 3: It is the string name of an onmouseover that has been
defined elsewhere:

function aFunkyFunc(){
...
}

...
var ono1 = 'aFunkyFunc';
findothers(ono1);
...
var el;
var c;
el = document.all.tags("A");


You seem to like IE, but a more cross-browser way is:

if (document.getElementsByTagName) {
var el = document.getElementsByTagName('A');
} else if (document.all) {
var el = document.all.tags('A');
}

And you can declare the variables el & c and give them values
when you first use them. Sometimes in long scripts it's nice to
declare them all in one spot so you don't accidentally double-up
on names, but for short scripts, it's common to declare them and
give them values at the same time, right where you need them.
c = el.length
for(var i = 0; i < c; i++){


This will run a lot faster as:

for ( var c = el.length - 1; c >= 0; c-- ) {
var e = el(i);
var ono2 = e.onmouseover;
if (ono1 == ono2) {


Why bother with ono2? You only use it once, so don't bother to
create it (unless you have some other use for it not shown here).

Assuming case 1 above:

var e = el[c];
if ( ono1 == e.onmouseover ){
swap(e);
}

Assuming case 2 above:

var e = el[c];
if ( ono1.onmouseover == e.onmouseover ){
swap(e);
}

Assuming case 3 above:

I can't help, I don't know how to get the name of the function
attached to an onmouseover unless you use some IE only method
(innerText? adjacentHTML?). Maybe it can be done with regExp.

Mike?

All of the above is offered as a suggestion, untested of course.

e.onmouseover is actually the entire script, not just the name of
the function. Do alert(e.onmouseover) and you'll see what I
mean.

e.g.

<script type="text/javascript">
function hiNic(a){
alert(a.onmouseover);
}
</script>
<span onmouseover="hiNic(this)">blah blah blah</span>

Displays:

function onmouseover(event) {
hiNic(this);
}

--
Rob


Thanks for the in-depth reply Rob, I kind of had to go another way with my project, but the post above was brilliant, it basically
helped me to understand a lot better all the things that I was doing wrong!

Thank all of you again for all the notes.

- Nicolaas
Jul 23 '05 #8

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

Similar topics

7
by: Richard | last post by:
I know I can have like <a href="#" onclick="dothis" onmouseover="dothat"> But how do you properly code two mouseover's in one statement? <a href="#" onmousever="dothis" onmouseover="dothat"> As...
2
by: news.west.cox.net | last post by:
I have been writing a practice sliding div navigation script. I am finding myself in the position where I need to force a div into showing the hover behavior defined in css. So my question is...
3
by: drjackk | last post by:
Hello, I'm trying to change the onmouseover event dynamically. This sets-up the initial onmouseover event: <a href="home.html"> <img border="0" id="img22" src="images/home1.jpg"...
2
by: MrCode2k | last post by:
Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore....
7
by: MrCode2k | last post by:
Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore....
2
by: Justin Rowe | last post by:
I'm attempting to design a site with alot of dynamic content and intractability, however I've hit a snag when it comes to the function of the onMouseOver and onMouseOut events. Using a bit of code...
1
by: den2005 | last post by:
Hi everybody, I am confused and still looking why this codes is not working. Can anyone notice or know why this code is not working? Thanks in advance. Code working: <form id="form1"...
3
by: oopaevah | last post by:
I have written some dom code to create a list of divs, each with it's own id. I want to set the onmouseover and onmouseout events to highlight the div when the mouse is over it. However I cannot...
2
by: Daz | last post by:
Hi everyone. I think my problem is a simple one, but I am completely baffled as to how to pull it off. I have a piece of code like so... document.write( "<img id=\"slideshow_toggle\"...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.