|
Download the
double image swap script .zip file
and modify the pic lists as in the table below.
Images for use in this photo album will
need to be optimized (right size, right format, right resolution)
to speed download time.
Highlight and copy the following script
to preload images onto your photo album page. Since even optimized
images may be large files in bytes, preloading images will help
make the album photo rollovers work more smoothly.
This script is compatible with NS3+ (includes
NS6+) and IE4+ browsers.
Homestead and other users without access
to the html head section can add the main script code to the
body section. The script will still work.
|
RED = on MouseOver
BLUE =
on MouseOut
letter +1 = small Mouse0ut image
letter +2
= small MouseOver image
pic1 = large defaullt image
Button 1 mouseover------> large pic2
Button 2 mouseover------> large pic3
Button 3 mouseover------> large pic4
Button 4 mouseover------> large pic5.....
etc.
Use this button layout to make editing easier
to follow in the html source code.
|
button layout
---1--------2---
3-------XXXX-------4
5-------XXXX-------6
---7--------8---
|
|
whatadog2x.html
uses just one small button
MouseOver pic.
'sm_flying_bernie.jpg'
(a2)
Replace all red letter +2 pics with
a2 in
the A HREF link codes below to duplicate the example shown.
Adding Text to the Status Bar
Text in Green will display in the browser status bar on MouseOver. You
can replace the green text areas in the code with your text of choice.
Add a caption for your pics or whatever you wish but avoid using
apostrophes and quotes. Since ' and ' are used in the script
code , the text will fail to appear.
window.status='Button
1';return true;'
window.status='Bernie is the man!';return
true;'
Text in Yellow can be added to display on MouseOut (function
not supported in NS4 and under browsers but adding code for it
will not affect page display in NS4)
|
| Button# |
small button
image name
MouseOver letter and
#
MouseOut letter and
# |
large pic number |
mouseover
status |
Mouseovers and
Link code .. small image buttons are also clickable links
(edit code areas in
purple)
(editing the green and yellow code
areas is optional)
(Homestead Users add files/
to image name.-------->IMG SRC='files/upbutton2.gif') |
| |
|
|
|
|
| Button1 |
name=a (small button images)
a2 MouseOver
a1 MouseOut
|
pic2
pic1 |
mouseover
mouseout |
<A HREF='a_page_link.html'
onMouseOver='hiLite('pic','pic2','a','a2');
window.status='Button 1';return
true;'
onMouseOut='hiLite('pic','pic1','a','a1');
window.status='xxxxx';return true;'
onclick='window.focus()'>
<IMG SRC='upbutton2.gif'
NAME='a'
ALT='Button 1' BORDER=0 height=XX
width=XX>
</A> |
| Button2 |
name=b
b2 MouseOver
b1 MouseOut
|
pic 3
pic1 |
mouseover
mouseout |
<A HREF='another_page_link.html'
onMouseOver='hiLite('pic','pic3','b','b2');
window.status='Button 2';return
true;'
onMouseOut='hiLite('pic','pic1','b','b1');
window.status='xxxxx';return true;'
onclick='window.focus()'>
<IMG SRC='upbutton3.gif'
NAME='b'
ALT='Button 2' BORDER=0 height=50 width=XX>
</A> |
| Button3 |
name=c
c2 MouseOver
c1 MouseOut |
pic 4
pic1 |
mouseover
mouseout |
<A HREF='your-page.html'
onMouseOver='hiLite('pic','pic4','c','c2');
window.status='Button 3';return
true;'
onMouseOut='hiLite('pic','pic1','c','c1');
window.status='xxxxx';return true;'
onclick='window.focus()'>
<IMG SRC='upbutton4.gif'
NAME='c'
ALT='Button 3' BORDER=0 height=XX
width=XX>
</A> |
| Button4 |
name=d
d2 MouseOver
d1 MouseOut
|
pic 5
pic1 |
mouseover
mouseout |
<A HREF='your-page.html'
onMouseOver='hiLite('pic','pic5','d,'d2');
window.status='Button 4';return
true;'
onMouseOut='hiLite('pic','pic1','d','d1');
window.status='xxxxx';return true;'
onclick='window.focus()'>
<IMG SRC='upbutton5.gif'
NAME='d'
ALT='Button 4' BORDER=0 height=XX
width=XX>
</A> |
| Button5 |
name=e
e2 MouseOver
e1 MouseOut |
pic 6
pic1 |
mouseover
mouseout |
<A HREF='your-page.html'
onMouseOver='hiLite('pic','pic6','e,'e2');
window.status='Button 5';return
true;'
onMouseOut='hiLite('pic','pic1','e','e1');
window.status='xxxxx';return true;'
onclick='window.focus()'>
<IMG SRC='upbutton6.gif'
NAME='e'
ALT='Button 5' BORDER=0 height=XX
width=XX>
</A> |
| Button6 |
name=f
f2 MouseOver
f1 MouseOut |
pic 7
pic1 |
mouseover
mouseout |
<A HREF='your-page.html'
onMouseOver='hiLite(' pic','pic7','f,'f2');
window.status='Button 6';return
true;'
onMouseOut='hiLite('pic','pic1','f','f1');
window.status='xxxxx';return true;'
onclick='window.focus()'>
<IMG SRC='upbutton7.gif'
NAME='f'
ALT='Button 6' BORDER=0 height=XX
width=XX>
</A> |
| Button7 |
name=g
g2 MouseOver
g1 MouseOut |
pic 8
pic1 |
mouseover
mouseout |
<A HREF='your-page.html'
onMouseOver='hiLite('pic','pic8','g,'g2');
window.status='Button 7';return
true;'
onMouseOut='hiLite('pic','pic1','g','g1');
window.status='xxxxx';return true;'
onclick='window.focus()'>
<IMG SRC='upbutton8.gif'
NAME='g'
ALT='Button 7' BORDER=0 height=XX
width=XX>
</A> |
| Button8 |
name=h
h2 MouseOver
h1 MouseOut |
pic 9
pic1 |
mouseover
mouseout |
<A HREF='your-page.html'
onMouseOver='hiLite('pic','pic9','h,'h2');
window.status='Button 8';return
true;'
onMouseOut='hiLite('pic','pic1','h','h1');
window.status='xxxxx';return true;'
onclick='window.focus()'>
<IMG SRC='upbutton9.gif'
NAME='h' ALT='Button 8' BORDER=0 height=XX
width=XX>
</A> |