Mouse Over Button

Double Image Swap
Photo Album Rollover

<---------- try the demo to the left
watch the browser status bar below for text messages
Click on 'Flying Bernie' image for the photo album demo


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>