Rollovers with Remote
This page may be hard to read in older browsers. If this is the case, please read the text-only version
if (document.images) {
img1off = new Image();img1off.src = "/images/first_off.gif";
img2off = new Image();img2off.src = "/images/prev_off.gif";
img3off = new Image();img3off.src = "/images/next_off.gif";
img4off = new Image();img4off.src = "/images/last_off.gif";
}
function imageLoad() {
if (document.images) {
img1on = new Image();img1on.src = "/images/first_on.gif";
img2on = new Image();img2on.src = "/images/prev_on.gif";
img3on = new Image();img3on.src = "/images/next_on.gif";
img4on = new Image();img4on.src = "/images/last_on.gif";
return (loaded = true);
}
}
function imageLoadRem() {
if (document.images) {
img1rem = new Image();img1rem.src = "/images/first_rem.gif";
img2rem = new Image();img2rem.src = "/images/prev_rem.gif";
img3rem = new Image();img3rem.src = "/images/next_rem.gif";
img4rem = new Image();img4rem.src = "/images/last_rem.gif";
return (loaded = true);
}
}
function rollOut(imgName) {
if (document.images) {
document[imgName].src = eval(imgName+"off.src");
document["remote"].src = "/images/remote.gif";
}
}
function rollIn(imgName) {
if (document.images && (loaded == true)) {
document[imgName].src = eval(imgName+"on.src");
document["remote"].src = "eval(imgName+"rem.src");
}
}
function First() {
var first='<a href=\"' + fstDay.slice(9,25) + '\" onMouseOver=\"rollIn(\'img1\'); return true;\" onMouseOut=\"rollOut(\'img1\'); return true;\"><img src=\"/images/first_off.gif\" border=\"0\" name=\"img1\" width=\"32\" height=\"32\" ></a>';
if (fstDay == '') {
first='<img src=\"/images/first_dis.gif\" border=\"0\" width=\"32\" height=\"32\">';
}
return first;
}
function Prev() {
var prev='<a href=\"' + prvDay.slice(9,25) + '\" onMouseOver=\"rollIn(\'img2\'); return true;\" onMouseOut=\"rollOut(\'img2\'); return true;\"><img src=\"/images/prev_off.gif\" border=\"0\" name=\"img2\" width=\"32\" height=\"32\" ></a>';
if (prvDay == '') {
prev='<img src=\"/images/prev_dis.gif\" border=\"0\" width=\"32\" height=\"32\">';
}
return previous;
}
function Next() {
var next='<a href=\"' + nxtDay.slice(9,25) + '\" onMouseOver=\"rollIn(\'img3\'); return true;\" onMouseOut=\"rollOut(\'img3\'); return true;\"><img src=\"/images/next_off.gif\" border=\"0\" name=\"img3\" width=\"32\" height=\"32\" ></a>';
if (nxtDay.slice(12,16) == 'Next' || '') {
next='<a href=\"/index.html\" onMouseOver=\"rollIn(\'img3\'); return true;\" onMouseOut=\"rollOut(\'img3\'); return true;\"><img src=\"/images/next_off.gif\" border=\"0\" name=\"img3\" width=\"32\" height=\"32\" ></a>';
}
return next;
}
Function Last() {
var last='<a href=\"/index.html\" onMouseOver=\"rollIn(\'img4\'); return true;\" onMouseOut=\"rollOut(\'img4\'); return true;\"><img src=\"/images/last_off.gif\" border=\"0\" name=\"img4\" width=\"32\" height=\"32\" ></a>';
return last;
}
This script was based on Todd's, but I feel I changed it enough to call it my own [debate pending :) ]; The main difference is that this version causes another image called 'remote' to change as the buttons are rolled over.
1: Either copy and paste the code above and save the file as rollovers2.js, or grab the script from here. [right click > "save as"]
Upload the script into /images/ 2: Put the following between the <head> </head> tags:
-
<script type="text/javascript" language="JavaScript">
<!--
var loaded=false;
var fstDay='***first_day***';
var prvDay='***previous_day***';
var nxtDay='***next_day***';
//-->
</script>
<script language="JavaScript" src="/images/rollovers2.js"></script>
-
onLoad="imageLoad(); imageLoadRem();"
(Don't forget to delete or rename your XXXX_day buttons if you've got them) ("off" buttons) first_off.gif, prev_off.gif, next_off.gif, last_off.gif
("on" buttons) first_on.gif, prev_on.gif, next_on.gif, last_on.gif
("remote" images for each button) first_rem.gif, prev_rem.gif, next_rem.gif, last_rem.gif
(faded/disabled buttons) first_dis.gif, prev_dis.gif
(the remote base image) remote.gif 5: Insert the following code wherever you want your buttons to appear:
-
<script>document.write(First());</script>
<script>document.write(Prev());</script>
The two below are for your dailytemplate only.
<script>document.write(Next());</script> <script>document.write(Last());</script>
-
<img src="/images/remote.gif" name="remote">
I've set the width and height of images in this script to 32 (Todd's script uses 110), feel free to change these values to suit.
The sections in black may be removed if you don't want 'ghosted' images on your daily pages, but I wouldn't recommend it unless you feel sure of what you're doing.
Seven^3
