Ancient Future Designs
Mouse Over
This is probably the easiest
JavaScript to learn.
Firstly though, try the
image below to see exactly what a mouseover is!
Okay, first of all, this
little script needs two images to work.
These I have named fem and
femmo (being fem mouseover).
The sample script below
is for the MouseOver you see on this page,
but can be adapted very
easily to suit your own graphics.
This part goes in the head
of your document.
In other words, you put
it in the html before the </HEAD> tag.
<SCRIPT
language="javascript">
<!--
if
(document.images) {var inner=new Image();
inner.src="femmo.gif";}
//-->
</SCRIPT>
The
next part of the script goes wherever you wish the graphic to be seen on
your page.
<A
HREF="http://myurl.com" onMouseOver="if
(document.images) document.fem.src=
'femmo.gif';"
onMouseOut="if (document.images)
document.fem.src=
'fem.gif';"><IMG SRC="fem.gif" NAME="fem" BORDER=0 HEIGHT=114 WIDTH=114></A>
To
change this script to suit your graphics, all you need to do is change
where it says fem and femmo.
My
suggestion if you are just learning Java is to name your graphics and use
the 'mo' on the MouseOver image like I have. That way it makes it even
easier for you to follow the script above.
For
example, suppose I had graphics named scully.gif and scullymo.gif. This
is what my script would look like.. <SCRIPT
language="javascript">
<!--
if
(document.images) {var inner=new Image();
inner.src="scullymo.gif";}
//-->
</SCRIPT>
And
for the rest...
<A
HREF="http://myurl.com" onMouseOver="if
(document.images) document.scully.src=
'scullymo.gif';"
onMouseOut="if (document.images)
document.scully.src=
'scully.gif';"><IMG SRC="scully.gif" NAME="scully" BORDER=0 HEIGHT=114
WIDTH=114></A>
Does
that make it any easier?
All
you do is change everything that says fem and femmo, including in
the 'document.fem.src' part.
This
you change to whatever you have named your script in the NAME="fem" part
of your script.
I
like to keep them similar so I don't get mixed up!
That's
it. Done.
|
