Rollovers
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/first1.gif";
img2off = new Image();img2off.src = "/images/back1.gif";
img3off = new Image();img3off.src = "/images/next1.gif";
img4off = new Image();img4off.src = "/images/today1.gif";
}
function imageLoad() {
if (document.images) {
img1on = new Image();img1on.src = "/images/first2.gif";
img2on = new Image();img2on.src = "/images/back2.gif";
img3on = new Image();img3on.src = "/images/next2.gif";
img4on = new Image();img4on.src = "/images/today2.gif";
return (loaded = true);
}
}
function rollOut(imgName) {
if (document.images) {
document[imgName].src = eval(imgName+"off.src");
}
}
function rollIn(imgName) {
if (document.images && (loaded == true)) {
document[imgName].src = eval(imgName+"on.src");
}
}
function getFirst() {
var firstHTML;
if (fstDay == '') {
firstHTML='<img SRC=\"/images/nofirst.gif\" BORDER=\"0\" WIDTH=\"110\" HEIGHT=\"110\">';
}
else {
firstHTML='<a href=\"' + fstDay.slice(9,25) + '\" onMouseOver=\"rollIn(\'img1\'); return true;\" onMouseOut=\"rollOut(\'img1\'); return true;\"><img SRC=\"/images/first1.gif\" BORDER=\"0\" NAME=\"img1\" WIDTH=\"110\" HEIGHT=\"110\" ></a>';
}
return firstHTML;
}
function getPrevious() {
var previousHTML;
if (prvDay == '') {
previousHTML='<img SRC=\"/images/noback.gif\" BORDER=\"0\" WIDTH=\"110\" HEIGHT=\"110\">';
}
else {
previousHTML='<a href=\"' + prvDay.slice(9,25) + '\" onMouseOver=\"rollIn(\'img2\'); return true;\" onMouseOut=\"rollOut(\'img2\'); return true;\"><img SRC=\"/images/back1.gif\" BORDER=\"0\" NAME=\"img2\" WIDTH=\"110\" HEIGHT=\"110\" ></a>';
}
return previousHTML;
}
function getNext() {
var nextHTML;
if (nxtDay.slice(12,16) == 'Next') {
nextHTML='<a href=\"/index.html\" onMouseOver=\"rollIn(\'img3\'); return true;\" onMouseOut=\"rollOut(\'img3\'); return true;\"><img SRC=\"/images/next1.gif\" BORDER=\"0\" NAME=\"img3\" WIDTH=\"110\" HEIGHT=\"110\" ></a>';
}
else {
nextHTML='<a href=\"' + nxtDay.slice(9,25) + '\" onMouseOver=\"rollIn(\'img3\'); return true;\" onMouseOut=\"rollOut(\'img3\'); return true;\"><img SRC=\"/images/next1.gif\" BORDER=\"0\" NAME=\"img3\" WIDTH=\"110\" HEIGHT=\"110\" ></a>';
}
return nextHTML;
}
function getToday() {
var todayHTML;
todayHTML='<a href=\"/index.html\" onMouseOver=\"rollIn(\'img4\'); return true;\" onMouseOut=\"rollOut(\'img4\'); return true;\"><img SRC=\"/images/today1.gif\" BORDER=\"0\" NAME=\"img4\" WIDTH=\"110\" HEIGHT=\"110\" ></a>';
return todayHTML;
}
I've tweaked Todd's script so it runs from a *.js file to save on bandwidth and load times [they won't be downloading the script again and again as they go through your archives].
It was a straight search-and-replace so there shouldn't be any problems. If there are though, let me know.
Yeah, it looks intimidating at first glance. If you're still interested, let's see if I can simplify it:
1: Either copy and paste everything into a text file and save it as rollovers.js, or just download it [right click > "save as"].
It was a straight search-and-replace so there shouldn't be any problems. If there are though, let me know.
Upload the script into your images folder. 2: Copy and paste all of this (everything between -and including- <script... and </script> ) somewhere between your <head> and </head> HTML 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/rollovers.js"></script>
-
onLoad="imageLoad();"
(Don't forget to delete or rename your XXXX_day buttons if you've got them)
("off" buttons) first1.gif, back1.gif, next1.gif, today1.gif
("on" buttons) first2.gif, back2.gif, next2.gif, today2.gif
(faded/disabled buttons) nofirst.gif, noback.gif 5: Insert the following code wherever you want your buttons to appear:
-
<script>document.write(getFirst());</script>
<script>document.write(getPrevious());</script>
The two below are for your dailytemplate only.
<script>document.write(getNext());</script> <script>document.write(getToday());</script>
Todd Micheals - Boarders and Sister
