Image Rollover Menus

[spdrcr]

Alright,
I asked this question bout a month and a half ago, and I got the answer to my question. Well, I have since lost all the stuff that I had saved on this subject even the site where it explained how to do it. If anyone can help me out with this I would appreciate it.

It basically deals with having links or what not, where when you mouseover them they will change the image on the screen. Guess I chose the wrong title for my thread. Anyways, that's what it's about. Again, if anyone can help, THANK YOU

speedracer

[creole]

sprcr...


try this script for rollovers

<script language="javascript">
<!--

if (document.images) {
image1on = new Image();
image1on.src = "images/about_us_on.gif";
image1off = new Image();
image1off.src = "images/about_us_off.gif";
}

function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
}
}
}

// -->
</script>

and you call it like this:

<a href="about_us.shtml" onmouseover="changeImages('image1', 'image1on')" onmouseout="changeImages('image1', 'image1off')">

[spdrcr]

I am having a little problem with the document[...] part. Also, I am a little unclear on the image1on = new Image() part. Could you explain?

speedracer

[creole]

spdrcr...the document.images part is basically a test to see if the browser understands enough Javascript to allow the rollovers. Only 3.0 (or maybe 2.0) browsers and above can understand the .images node for Javascript.

as for the image1on = new Image() , that portion of the script "preloads" the images for you, that way when you rollover them, they appear instantly.

Does that help?

[gthorley]

Where exactly do you place the script in your page or does it not matter and the call part does it use the name of the page being linked to. If you had say 4 links in a navigation bar would you repeat the
image1on = new Image();
image1on.src = "images/about_us_on.gif";
image1off = new Image();
image1off.src = "images/about_us_off.gif";

changing 1 to 2,3 &4 and naming new images?

[creole]

Sorry...I should have given you guys two sets of preloaded images so you could see what the differences are...

here is the full script with two sets of images.

<script language="javascript">
<!--

if (document.images) {
image1on = new Image();
image1on.src = "images/about_us_on.gif";
image1off = new Image();
image1off.src = "images/about_us_off.gif";

station_staff_on = new Image();
station_staff_on.src = "images/station_staff_on.gif";
station_staff_off = new Image();
station_staff_off.src = "images/station_staff_off.gif";

}

function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src = eval(changeImages.arguments[i+1] + ".src");
}
}
}

// -->
</script>

and you call it like this:

<a href="about_us.shtml" onmouseover="changeImages('image1', 'image1on')" onmouseout="changeImages('image1', 'image1off')">

[gthorley]

Creole is that script from one of your portfolio design web sites. Is there a place where it could be seen in action?

[creole]

yes...it is from http://www.kbxl-kspd.com. It's a site I did for my friends company. It is really low budget, but I am extremely proud of it.

you can snag the code if you like.

[gthorley]

Thanks Creole

Don't need the code just trying to see how it works and how the best way to set up the images.

I have Dreamweaver and it does the code for rollovers for you. I was doing basically what you did creating a gif with the same background colour as the table but turning it into a button on mouseover.

You do great work looked at some of the web sites in your portfolio quite impressive.

[gthorley]

Just looked at your script vs Dreamweavers and yours looks so much neater.

<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

onLoad="MM_preloadImages('florals2.gif')">

Does dreamweaver script do anything different? Why is it so bloated? It does seem to work and I guess for someone like me that couldn't write it, it gets the job done. I might just take you up on using yours.

[creole]

hehe...the funny thing is I was just going to tell you not to use the DW code BECAUSE mine is so much neater.

You are more than welcome to use that cluttered cryptic DW code if you like...or you can use my code that is nice and clean and can almost be read like a book.

BTW, I can't take credit for that code, I found it on a free site.

[gthorley]

Originally posted by creole
hehe...the funny thing is I was just going to tell you not to use the DW code BECAUSE mine is so much neater.

You are more than welcome to use that cluttered cryptic DW code if you like...or you can use my code that is nice and clean and can almost be read like a book.

BTW, I can't take credit for that code, I found it on a free site.

I have a question about the navigation bar area on http://www.kbxl-kspd.com./index.shtml. If my nav area was on the left side and in a table how do I make sure the left edge colour of the table starts at the very left edge of the screen as at the kbxl site?

You can see what I mean at my test page http://www.artbyjudy.com/test/
<Edited by gthorley on 12-07-2000 at 12:43 AM>

[creole]

you would need to make sure your margins were set properly. I will post it here, but view the BODY tag for the page and you will see what I am talking about.

THis is what you need.

<body bgcolor="#f2eede" rightmargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="cc0000" vlink="000000" link="000000">

that will ensure that anything on your page butts up against the very edge of the browser.

One thing to point out. Since EVERYTHING will butt up against the edge, you need to take that into account when you design your tables making sure that your text DOES NOT ride the edge.

[gthorley]

Thanks Creole fo speedy reply

I put in that code and it still leaves an edge I suspect it has something to do with my nested tables.

I put it in a test folder at our site
http://www.artbyjudy.com/test/
I still have to clean up the rollover code but will do that later when I get all of the graphics made.

This is still much a work in progress and am not real satisfied. I am trying to keep graphics to a minimum so pages load quicker as when the art is on they take time to
load.

[creole]

gthorley...

I think I found out why your page still has space around the edges.

in your first table tag you start with this:

<table BORDER=0 WIDTH="100%" HEIGHT="100%" >

when it should be this:

<table BORDER=0 WIDTH="100%" HEIGHT="100%" cellspacing="0" cellpadding="0">

The reason why is that if you do not specifically tell the table to have 0 cellpadding and cellspacing then the default it 1. That one pixel (two actually 1+1) will push your table away from the edge of the page. Try that and let me know if it works.

[gthorley]

It didn't work with just the top one so I changed the others that followed and then it was fine had to go through after and change my other nested tables to 90% nad center them as the text was lined up on the edger like you cautioned.

Was that the best way to fix the text problem ie:adjusting the table so it wasn't at the edge of the parent table?

[creole]

I would set the table to what I told you above and then nest a table inside that one. That is how I did the kbxl site