a curiosity about js and layers.

Greetings all,

Being new to js, I have a question about layers/div stuff.
The site for the company I"m working for is set up pretty easily.
But what I'm wanting to do is create layers or something for a mouseover effect for images I have.
Following is the code I'm using now:

<td align=center valign=middle bgcolor="#808080"><img src="{PhotoRef}"
name=mainpic border=2 width=360>
<td>


<table cellpadding=0 cellspacing=0 border=1 width=100%>
<tr>
<td bgcolor="#808080"><img src="{Photo2}"
onMouseOver="document.mainpic.src='{Photo2}'" width=125 border=2
onMouseOut="document.mainpic.src='{PhotoRef}'">
<td bgcolor="#808080"><img src="{Photo3}"
onMouseOver="document.mainpic.src='{Photo3}'" width=125 border=2
onMouseOut="document.mainpic.src='{PhotoRef}'">
<td bgcolor="#808080"><img src="{Photo4}"
onMouseOver="document.mainpic.src='{Photo4}'" width=125 border=2
onMouseOut="document.mainpic.src='{PhotoRef}'">
</tr>
<tr>
<td bgcolor="#808080"><img src="{Photo5}"
onMouseOver="document.mainpic.src='{Photo5}'" width=125 border=2
onMouseOut="document.mainpic.src='{PhotoRef}'">
<td bgcolor="#808080"><img src="{Photo6}"
onMouseOver="document.mainpic.src='{Photo6}'" width=125 border=2
onMouseOut="document.mainpic.src='{PhotoRef}'">
<td bgcolor="#808080"><img src="{Photo7}"
onMouseOver="document.mainpic.src='{Photo7}'" width=125 border=2
onMouseOut="document.mainpic.src='{PhotoRef}'">
</tr>
<tr>
<td bgcolor="#808080"><img src="{Photo8}"
onMouseOver="document.mainpic.src='{Photo8}'" width=125 border=2
onMouseOut="document.mainpic.src='{PhotoRef}'">
<td bgcolor="#808080"><img src="{Photo9}"
onMouseOver="document.mainpic.src='{Photo9}'" width=125 border=2
onMouseOut="document.mainpic.src='{PhotoRef}'">
<td bgcolor="#808080"><img src="{Photo10}"
onMouseOver="document.mainpic.src='{Photo10}'" width=125 border=2
onMouseOut="document.mainpic.src='{PhotoRef}'">
</tr>
</table>

What I'm wanting to do, is replace the first picture (PhotoRef) with 5 seperate pictures. 4 with the fifth over it.
I realize that its hard to see what I'm talking about so here is a link.
http://j.b5z.net/i/u/2022067/h/ewiggins/Detail-186.html

The mainpic at the moment is 1 picture fixed up in photoshop. My boss wants me to make it 5, with the border as a seperate image.
Now, I think I have away of doing that, tho not sure yet, but the issue I'm having is when someone points to one of the other images, we want the original 'mainpic' replaced with what ever picture the mouse is over.

I'm wondering if I'm confusing anyone else besides myself at the moment....

Anyhow.

I've heard layers only works for NS, where as DIV's for IE.
Anyone know of an easy (easier then this question maybe) way of accomplishing what I"m looking for.

Thanks in advance.

WW.

You just happen to come here right after I did?

Edit: That is horrible code, I thought you were learning PHP...

Or possibly another WhiteWolf besides the one I know? Not many people use that name it seems....

You just happen to come here right after I did?

Edit: That is horrible code, I thought you were learning PHP...

Or possibly another WhiteWolf besides the one I know? Not many people use that name it seems....


Could be another WhiteWolfe...been using this name for 'bout 10 yrs now...
tho, not based on anything like some think..

and..um...whats wrong with the code???
I know its not the cleanest, but it's not the worst I've seen.

I don't see what you want changed, your main picture will already be altered.

Is the "main" image going to do something other than sit there and still be replaced by the other images as you mouseover them? If not, I can't see any value whatsoever in breaking that image into pieces.

If you are planning to add additional effects to those images there are some ways to still allow the whole of the area to be replaced by the other images while also allowing for additional effects within that area but those tables make this page more complex than necessary and therefore add difficulty in implementing this kind of plan.

I also noted that the other images on the page loaded very, very, very slowly which indicated that you have another serious problem that may be driving away potential customers. The thumbnail images you're loading are not the exact sizes you're showing them at except when you mouseover them and they replace the "main" image. You really need to create seperate images that are the exact sizes you're showing them at and then use an image preloading script to get the full sized images to the users browser so they'll display quickly when the user does a mouseover. The overhead of downloading those larger images and resizing them to fit the smaller spaces you've defined for them seriously slows down the page load and makes your users wait.

Is the "main" image going to do something other than sit there and still be replaced by the other images as you mouseover them? If not, I can't see any value whatsoever in breaking that image into pieces.
I realized this also. My boss, on the other hand, is looking at upload time, as well as time used to create the "four pic" which is the mainpic. I've been playing around with the <div></div> tags today, by themselves with the pic's
it worked, but with all the other tables etc that I need on the page, its not worth while, I guess. at least, not at this stage of the game.


You really need to create seperate images that are the exact sizes you're showing them at and then use an image preloading script to get the full sized images to the users browser so they'll display quickly when the user does a mouseover. The overhead of downloading those larger images and resizing them to fit the smaller spaces you've defined for them seriously slows down the page load and makes your users wait.

I've been looking at some scripts to prevent the overload. And I'm sure I can implement one. The only issue I have with preloaded images, is that the html file I use is actually filled out by a program I use to upload the images/information to the server.

Thanks for taking a look at it however, I appreciate the critique.

I don't see what you want changed, your main picture will already be altered.

Am trying to create the 'mainpic' with 5 different images, tho am thinking its a no-go....

Now, if I had any programming knowledge..and could get into the program I'm using...maybe.....but...*shrugs*.