PDA

Click to See Complete Forum and Search --> : Rollovers - a better way...

Chris_J_W
03-03-2003, 04:14 AM
Hi, I'm just wondering if anyone knows a better way to do rollover images for javascript than what I'm currently doing (shown below)...I'm looking for a way where i can basically pass in the name of the file (or image name) and get the rollOn() and rollOut() functions (again, shown below) to use that to determine the src's of the images to show rather than the lengthy if statement so that I can add more images, and not have to change the rollOn()/rollOut() as much as I am for every new rollover image i want to add (currently there's about 7...I've edited some out for simplicity's sake). Anyway, here's what I'm currently doing. The file is also attached.

Thanks for your help.

Chris :cool:
Chris_J_W
03-03-2003, 04:19 AM
<HTML>
<HEAD>
<TITLE>TEMPLATE TITLE</TITLE>
</HEAD>
<BODY BACKGROUND="pics/bg.jpg" BGPROPERTIES="fixed" ONLOAD="preLoad();status_text()">
<A NAME="top"></A>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="2" CELLPADDING="0">
<TR HEIGHT="52">
<TD WIDTH="163" VALIGN="TOP">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="2">
<TR><TD><CENTER>
<IMG NAME="crnrLogo" ONMOUSEOVER="RollOn(1)" ONMOUSEOUT="RollOut(1)" SRC="pics/logonewsml.gif" BORDER="0" ALT="The House">
</CENTER></TD></TR>
<TR><TD>
<BR>
<A HREF = "index.htm"><IMG NAME="welcImg" ONMOUSEOVER="RollOn(2)" ONMOUSEOUT="RollOut(2)" SRC="pics/welcome1.gif" BORDER="0" ALT="Welcome"></A>
<BR>
<A HREF = "events.htm"><IMG NAME="eventImg" ONMOUSEOVER="RollOn(3)" ONMOUSEOUT="RollOut(3)" SRC="pics/events1.gif" BORDER="0" ALT="Events"></A>
<BR>
</TD></TR>
</TABLE>
</TD>
<TD HEIGHT="100%" VALIGN="TOP">
<CENTER>
PAGE STUFF HERE.
</CENTER>
</TD></TR><TABLE>

<SCRIPT language="JavaScript">
function status_text()
{
window.status="The House";
}

function preLoad()
{
logo=new Image;
logo2=new Image;
logo.src="pics/logonewsml.gif";
logo2.src="pics/makehomesml.gif";

welc1=new Image;
welc2=new Image;
welc1.src="pics/welcome1.gif";
welc2.src="pics/welcome2.gif";

event1=new Image;
event2=new Image;
event1.src="pics/events1.gif";
event2.src="pics/events2.gif";
}
function RollOn(n)
{
if (n == 1) {
document.crnrLogo.src=logo2.src;
}
if (n == 2) {
document.welcImg.src=welc2.src;
}
if (n == 3) {
document.eventImg.src=event2.src;
}
}
function RollOut(n)
{
if (n == 1) {
document.crnrLogo.src=logo.src;
}
if (n == 2) {
document.welcImg.src=welc1.src;
}
if (n == 3) {
document.eventImg.src=event1.src;
}
}
</SCRIPT>
</BODY>
</HTML>
Vladdy
03-03-2003, 04:57 AM
Look Ma - no Javascript:

<style>
.mylink
{ background: url("image_off.gif");
}

.mylink:hover
{ background: url("image_on.gif");
}
</style>
...
<a class="mylink" ....
Chris_J_W
03-03-2003, 05:13 AM
Thanks, i'd rather use JavaScript tho as I know at least a bit about that compared to CSS which I know nothing about...
gil davis
03-03-2003, 05:52 AM
Take advantage of arrays and the "this" operator:

<script>
var imgAry = new Array();
imgAry["crnrLogo"] = new Image();
imgAry["crnrLogo"].src = "pics/makehomesml.gif";
imgAry["crnrLogo"].org = "pics/logonewsml.gif";

imgAry["welcImg"] = new Image();
imgAry["welcImg"].src = "pics/welcome2.gif";
imgAry["welcImg"].org = "pics/welcome1.gif";

imgAry["eventImg"] = new Image();
imgAry["eventImg"].src = "pics/events2.gif";
imgAry["eventImg"].org = "pics/events1.gif";

function RollOn(img) {
img.src = imgAry[img.name].src;
}

function RollOut(img) {
img.src = imgAry[img.name].org;
}
</script>
<body ... >
<a href="index.htm"><IMG NAME="welcImg" onmouseover="RollOn(this)" onmouseout="RollOut(this)" SRC="pics/welcome1.gif" BORDER="0" ALT="Welcome"></A>
...
</body>

Notice that I did not include a preload for the images that are already in the HTML, because it does no good. Also, the preload operates as a real preload. Your script waited until the page was loaded and then loaded the extra images, which also does no good.
Chris_J_W
03-03-2003, 04:14 PM
Thanks heaps - that's pretty much exactly what I was looking for :) You say my preload() wasn't working (and I think you're right there), how do i get it to preload the images that aren't already displayed as part of the page (ie the rollover images)?
gil davis
03-04-2003, 05:43 AM
My post does a preload. That's why the array contains image objects.
Chris_J_W
03-04-2003, 06:21 PM
Ok, thanks heaps for all your help :) :D :cool: