JScript Rollover query

Martin Thomson

unread,

May 16, 2002, 3:32:11 PM5/16/02

to

Hi folks, me again...

Could you take a quick shufty at URL : http://fimeds.org.uk/rollover.html

I seem to have got the rollover effect that I want working OK, but I want
the text to disappear when the mouse is not on the image (is that
OnMouseOut?).

Two points.
1 - I know hee-haw about Javascript, I downloaded this one from
JavascriptSource, so don't blame me if it's badly written....

2 - There are no images on this page, as it's just a trial to see if I can
get the rollover working before I implement it on the proper page.

If some kind chap (or chappess) could tell me what to add and where, I'd be
most awfully grateful!

TIA

Martin
--
http://www.martin-thomson.co.uk
http://www.LoNoteMusic.com

Tony Morgan

unread,

May 16, 2002, 4:47:22 PM5/16/02

to

In message <ac11fq$sta$1...@knossos.btinternet.com>, Martin Thomson
<mar...@martin-thomson.co.uk> writes

> If some kind chap (or chappess) could tell me what to add and where,
>I'd be most awfully grateful!

Since no one has come up with the script, try the following (just cut
and paste where indicated):

1. Define your JavaScript functions by putting the following
code immediately before the </HEAD> closing tag:

function swapImgRestore() {
var i,x,a=document.sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}

function findObj(n, d) {
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=findObj(n,d.layers[i].document); return x;
}

function swapImage() {
var i,j=0,x,a=swapImage.arguments; document.sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}

</script> var i,x,a=document.sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function findObj(n, d) {
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=findObj(n,d.layers[i].document); return x;
}

function swapImage() {
var i,j=0,x,a=swapImage.arguments; document.sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
-->
</script

2. Preload your images within the <BODY ... > tag like this (cut and
paste and add any BODY attributes you require (I've included
the bgcolor) - here we're preloading three mouseover images
'mouseoverdn1.gif', 'mouseoverdn2.gif', and:
'mouseoverdn3.gif' - change the graphic filenames/add more
as required):

Now we're cooking :-)

3. Where required include the following code to load the original
graphic and action the rollover.

</a>

Here, I've just shown the insertion for mouseover1 - just add the rest
where required changing the names.

I've also split-out the <a>..</a> code for clarity.

Note the use of 'mouseover1 as a label for each piece of code.

So to summarise:

We've declared the JavaScript function in the <HEAD> ... </HEAD>
section. The advantage of this (rather that do it in-line) is that the
function is processed and stored just once - a bit like caching - and
this increases execution speed.

Next, in the <BODY ... > tag we preload the images - putting them into
the browser's cache. Note we only need to do this for the rollover
images.

Lastly, we use the construct as shown in (3).

The above code is optimised for all V3 and later browsers.
--
Tony Morgan

Stephen Chalmers

unread,

May 16, 2002, 7:40:57 PM5/16/02

to

"Martin Thomson" <mar...@martin-thomson.co.uk> wrote in message news:ac11fq$sta$1...@knossos.btinternet.com...

> Hi folks, me again...
>
> Could you take a quick shufty at URL : http://fimeds.org.uk/rollover.html
>
> I seem to have got the rollover effect that I want working OK, but I want
> the text to disappear when the mouse is not on the image (is that
> OnMouseOut?).
>
> Two points.
> 1 - I know hee-haw about Javascript, I downloaded this one from
> JavascriptSource, so don't blame me if it's badly written....
>
> 2 - There are no images on this page, as it's just a trial to see if I can
> get the rollover working before I implement it on the proper page.
>
> If some kind chap (or chappess) could tell me what to add and where, I'd be
> most awfully grateful!
>

Actually having looked at your code, it's clear that image pre-loading and displaying are not really appropriate.

Adding to what you have in place, for the first link use:
onMouseOut ='Words.innerHTML = "" ' and similar for the other link.

Having said that, innerHTML is not universally supported, therefore the site as it stands is not widely compatible.

I recommend displaying and hiding layers, which can be made to work on the main browsers, requires only one function and little
modification to what you have now.
Here is a skeletal example, based on your original page:

http://homepage.ntlworld.com/stephen.chalmers/foimieds/

--
Stephen Chalmers

Martin Thomson

unread,

May 16, 2002, 9:44:34 PM5/16/02

to

"Tony Morgan" <to...@atomor.com> wrote in message
news:JDM96xCa...@atomor.demon.co.uk...

> In message <ac11fq$sta$1...@knossos.btinternet.com>, Martin Thomson
> <mar...@martin-thomson.co.uk> writes
> > If some kind chap (or chappess) could tell me what to add and where,
> >I'd be most awfully grateful!
>
> Since no one has come up with the script, try the following (just cut
> and paste where indicated):
>

As usual, Tony, you have surpassd yourself! I have absolutely no idea what
75% of your answer means, but I have it saved and will definately be
referring to it in the not-too-distant future.

Thank you for taking the time and energy to provide such a full response.

Cheers

Martin Thomson

unread,

May 16, 2002, 9:47:42 PM5/16/02

to

"Stephen Chalmers" <starts_here:stephen....@ntlworld.com> wrote in
message news:pQXE8.4839$Ag2.1...@newsfep1-win.server.ntli.net...

>
> "Martin Thomson" <mar...@martin-thomson.co.uk> wrote in message
news:ac11fq$sta$1...@knossos.btinternet.com...
> > Hi folks, me again...
> >

> Actually having looked at your code, it's clear that image pre-loading and
displaying are not really appropriate.
>
> Adding to what you have in place, for the first link use:
> onMouseOut ='Words.innerHTML = "" ' and similar for the other link.
>
> Having said that, innerHTML is not universally supported, therefore the
site as it stands is not widely compatible.
>
> I recommend displaying and hiding layers, which can be made to work on the
main browsers, requires only one function and little
> modification to what you have now.
> Here is a skeletal example, based on your original page:
>
> http://homepage.ntlworld.com/stephen.chalmers/foimieds/
>
> --
> Stephen Chalmers

This is exactly what I was looking for, Thanks Stephen.

One thing.... what is innerHTML? As I said, I just downloaded it, and that
did confuse me just a tad!

Thanks again

David Edwards

unread,

May 17, 2002, 11:46:58 AM5/17/02

to

I think innerHTML is whatever is inside the opening and closing tags of the
element whose ID calls innerHTML:
e.g.
1) <P ID="x"><B>Hello world</B></P>
therefore, in the JavaScript DOM:
document.all.x.innerHTML evaluates to '<B>Helloworld</B>'

2) <P ID="y"><INPUT TYPE="BUTTON" VALUE="SUBMIT"></P>
therefore, in the JavaScript DOM:
document.all.x.innerHTML evaluates to '<INPUT TYPE="BUTTON" VALUE="SUBMIT">'

3) Here's an example of innerText/OuterText/innerHTML/outerHTML:
http://developer.irt.org/script/1370.htm

Dave.

"Martin Thomson" <mar...@martin-thomson.co.uk> wrote in message

news:ac1nfu$33a$1...@knossos.btinternet.com...

David Edwards

unread,

May 21, 2002, 8:54:03 AM5/21/02

to

> Lastly, we use the construct as shown in (3).
>
> The above code is optimised for all V3 and later browsers.
> --
> Tony Morgan

Martin,
Be warned that there is a cut-and-paste error in Tony's script(sorry
Tony - I'm not trying to be a smart arse - just trying to save Martin from a
potential headache!). I guess this is probably obvious as there are 2 lots
of opening and closing<SCRIPT></SCRIPT> tags, but just in case you didn't
notice or are new to JavaScript, then the script in part (1) of Tony's post
should be:
_____________________________________________________
<script language="JavaScript">

_____________________________________________________
While I haven't checked that the code works, I have re-arranged it with one
statement per line so that it might be a bit easier to follow. That's how I
have to do JavaScript anyway - maybe I'm just a retard?
Dave.

Martin Thomson

unread,

May 21, 2002, 11:00:05 PM5/21/02

to

"David Edwards" <DA...@edwardsd85.fsnet.co.uk> wrote in message
news:acdg23$abq$1...@newsg1.svr.pol.co.uk...

> > Lastly, we use the construct as shown in (3).
> >
> > The above code is optimised for all V3 and later browsers.
> > --
> > Tony Morgan
>
> Martin,
> Be warned that there is a cut-and-paste error in Tony's script(sorry
> Tony - I'm not trying to be a smart arse - just trying to save Martin from
a
> potential headache!). I guess this is probably obvious as there are 2 lots
> of opening and closing<SCRIPT></SCRIPT> tags, but just in case you didn't
> notice or are new to JavaScript, then the script in part (1) of Tony's
post
> should be:
> _____________________________________________________

<snip>

_____________________________________________________
> While I haven't checked that the code works, I have re-arranged it with
one
> statement per line so that it might be a bit easier to follow. That's how
I
> have to do JavaScript anyway - maybe I'm just a retard?
> Dave.

Anyone who can even come close to understanding half of all that stuff is
nothing short of a genius, IMHO!

Thanks for the advice

In case anyone's interested, the final effect is now uploaded at URL
http://www.fimeds.org.uk/skeleton along with my first attempts at both CSS
and PHP!

It's been a busy couple of weeks...

Cheers
Martin (who's feeling pretty smug about himself right now)
;)

Tony Morgan

unread,

May 27, 2002, 9:25:31 AM5/27/02

to

In message <acdg23$abq$1...@newsg1.svr.pol.co.uk>, David Edwards
<DA...@edwardsd85.fsnet.co.uk> writes

>I guess this is probably obvious as there are 2 lots of opening and
>closing<SCRIPT></SCRIPT> tags

You can have as many <SCRIPT> ... </SCRIPT> declarations as you wish,
providing you close one before opening another, and don't nest them..

--
Tony Morgan