complicated OnMouseOver

[windandwaves]

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

 

[windandwaves]

For your information, the map can be found here:

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

Thank you

- Nicolaas

 

[Michael Winter]

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

 

[windandwaves]

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!

 

[windandwaves]

[...]

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

 

[Michael Winter]

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.onmouseover == l) {swap(c);}
}
}

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

 

[RobG]

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);
}

 

[windandwaves]

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);
}

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