HTML "ROLLOVER" CODE:
<A HREF = "C:\My Documents"
onMouseOver = "document.pix.src = 'JB2.jpg'"
onMouseOut = "document.pix.src = 'JB1.jpg'">
<IMG SRC = "JB1.jpg" ALT = "Two Image Rollover" NAME = "pix">
</A>
<A HREF = "C:\My Documents"
onMouseOver = "document.picture.src = 'ZEBRA_SPIDER.jpg'"
onMouseOut = "document.picture.src = 'BLANK.jpg'">
<IMG SRC = "BLANK.jpg" ALT = "Disappearing Image" NAME = "picture">
</A>
<A HREF = "C:\My Documents"
onMouseOut = "document.pic.src = 'MOURNING_CLOAK.jpg'"
onMouseOver = "document.pic.src = 'POLYPHEMUS_MOTH.jpg'"
onMouseDown = "document.pic.src = 'TAILED_BLUE.jpg'"
onLoad = "document.pic.src = 'LUNA_MOTH.jpg'">
<IMG SRC = "LUNA_MOTH.jpg" ALT = "Four Image Rollover" NAME = "pic">
</A>
CODE NOTES:
Anchor referencing a NAME on this page, another page, site url(s), javascript, etc ...
JB2.jpg : Image invoked when the mouse hovers over JB1.jpg
JB1.jpg : Image invoked on Mouse Out (off image)
JB1.jpg : Image source on Load or Refresh
End anchor
Anchor referencing another (or same, if desired) url(s)
ZEBRA_SPIDER.jpg : Image invoked when the mouse hovers over the current image BLANK.jpg, the same color as the page background.
BLANK.jpg : Image invoked on Mouse Out (off image)
BLANK.jpg : Image source on Load or Refresh
End anchor
Anchor referencing another (or same, if desired) url(s)
POLYPHEMUS_MOTH.jpg : Image invoked when the mouse hovers over the current image
MOURNING_CLOAK.jpg : Image invoked on Mouse Out (off image)
TAILED_BLUE.jpg : Image invoked if focus is on the link (on Mouse Down)
LUNA_MOTH.jpg : Image source on Load, Refresh or Back
End anchor
MISCELLANEOUS NOTES:
The NAME "pix" is the same in IMG SRC, onMouseOver and onMouseOut for the left-hand pair of images.
Any name that is not html code or a javascript command is valid.
"pix" is changed to "picture" to distinguish the center pair of images,
and to "pic" to distinguish the right-hand group of images.
The commands onFocus, onBlur, onClick will also invoke a hyperlink.
It is not necessary to specify image attributes HEIGHT = "68" and WIDTH = "99"
(HEIGHT = "106" and WIDTH = "113" for the ZEBRA_SPIDER.jpg and BLANK.jpg images).
The following may be viewed in the Source Code:
Html tags < SPAN > and < /SPAN > were used in conjuction with the onMouseOver and onMouseDown events to invoke the background and font color changes.
The javascript for the self-scroll event can also be initiated with a more typical hyperlink rather than SPAN.
|
|
[ 
