View Full Version : Multiple images; single div; one link & imap per image; head spinning

07-30-2006, 11:48 PM
Can someone help me?
I need a bit of a "how to" on doing this.
I'm trying to use best practices by separating my xhtml from my css and so far so good. But I'm not a .js programmer and I think I need some.

I need to populate a single div with multiple images. I can do that with z-index or should I be using an array in .js??? How do I write an event handler using onclick to call one up? :confused:

I want a single plain link anywhere I might want to place it on the page to call a single image in my image stack while keeping the other images hidden. (I might have up to 10 images to change through in this div.)
When another different link is clicked, I want a different image to show in the stack- one link per image- one image shows at a time. I've found 'onmouseovers' and a billion other things, but no simple 'href' or 'onclick' per image, where the link is really not part of the image div. Is my thinking fundamentally flawed?
I want an initial image on page load which I can specify as my top z-index level and/or using visibility and I think I get all that stuff. Sure be nice if there was an 'Ajax'ian solution but I don't even have a javascript handle!!

What I'm trying to do sounds dangerously close to a popup, but I'd like it to not be screened out. It's a navagational aide.
If anyone's done something like this, or has a better clue than I, I would love a hint, a FAQ, or better yet, an example!

I also want a separate image map per image, but I may be asking too much already. I don't think that will be a problem for me if I can map to the image showing, but will the image maps for all of the ones underneath be active at the same time? Should I dynamically load just one image at a time? If I need to do that, I haven't a good clue. :o

I have the prototype and scriptaculous libraries, although I haven't gotten them to work yet; same with ruby and rails. I will learn them, but this current problem consumes me. I need a leg up so I can start climbing.

If someone can respond, thanks ever so much in advance! :D

07-31-2006, 12:58 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<script type="text/javascript">

function SwapImg(id,img){
var obj=document.getElementById(id);
var imgs=obj.getElementsByTagName('IMG');
for (var zxc0=0;zxc0<imgs.length;zxc0++){




<a href="#" onclick="SwapImg('fred','One');" >Link 1</a><br>
<a href="#" onclick="SwapImg('fred','Two');" >Link 2</a><br>
<a href="#" onclick="SwapImg('fred','Three');" >Link 3</a><br>
<a href="#" onclick="SwapImg('fred','Four');" >Link 4</a><br>
put whatever image map you req for each image<br>
and will let you sort the HTML<br><br>
<div id="fred" style="position:relative;width:100px;height:100px;">
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" style="position:absolute;z-index:0;left:0px;top:0px;height:100px;width:100px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" style="position:absolute;z-index:0;left:0px;top:0px;height:100px;width:100px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" style="position:absolute;z-index:0;left:0px;top:0px;height:100px;width:100px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" style="position:absolute;z-index:0;left:0px;top:0px;height:100px;width:100px;" >



07-31-2006, 02:30 AM
The only way I could help ya is to give ya some links for hacking ideas:

slide viewer left and right click is on a popup right now, but that could be modded:

a timed onload/onpage changing viewer:

a horizontal scolling image bar with onclick popup of the image:

This is more what I think your looking for, prob needs some working on though:

This site has many to choose from as well:

Lots more other stuff here:

Actually I came up with this, but I could not get the captions to work, I suck as complex JS and am starting to think it really needs an array and I am obviously lacking im my DOM abilities, it is sort of kewl though, I hacked it up from one of the scripts I was reading through.

<html><head><title>Image Viewer</title><style>
#bg {width: 550px; background-color: #6666FF; padding: 10px;}
p {text-align: center;}
.thumb {height: 75px; width: 100px;}
image1.jpg="This is the first caption.";
image2.jpg="This is the second caption.";
image3.jpg="This is the third caption.";
image4.jpg="This is the fourth caption.";
image5.jpg="This is the fifth caption.";
image6.jpg="This is the first caption.";
image7.jpg="This is the second caption.";
image8.jpg="This is the third caption.";
image9.jpg="This is the fourth caption.";
image10.jpg="This is the fifth caption.";
function changeImage(filename) {
if (document.getElementsById) document.getElementsById("capBox").innerHTML=filename;
<DIV ALIGN="center";><p><img name="mainimage" src="blank.jpg"></p><p ID="capBox";></p><br /><br />
<DIV ID="bg";>
<a href="javascript:changeImage('image1.jpg')"><IMG CLASS="thumb"; src="image1.jpg"; border="0";></a>
<a href="javascript:changeImage('image2.jpg')"><IMG CLASS="thumb"; src="image2.jpg"; border="0";></a>
<a href="javascript:changeImage('image3.jpg')"><IMG CLASS="thumb"; src="image3.jpg"; border="0";></a>
<a href="javascript:changeImage('image4.jpg')"><IMG CLASS="thumb"; src="image4.jpg"; border="0";></a>
<a href="javascript:changeImage('image5.jpg')"><IMG CLASS="thumb"; src="image5.jpg"; border="0";></a><br />
<a href="javascript:changeImage('image6.jpg')"><IMG CLASS="thumb"; src="image6.jpg"; border="0";></a>
<a href="javascript:changeImage('image7.jpg')"><IMG CLASS="thumb"; src="image7.jpg"; border="0";></a>
<a href="javascript:changeImage('image8.jpg')"><IMG CLASS="thumb"; src="image8.jpg"; border="0";></a>
<a href="javascript:changeImage('image9.jpg')"><IMG CLASS="thumb"; src="image9.jpg"; border="0";></a>
<a href="javascript:changeImage('image10.jpg')"><IMG CLASS="thumb"; src="image10.jpg"; border="0";></a>

07-31-2006, 03:59 PM
I thank both of you immensely.
I'll implement this over today (Mon.) and tomorrow and post which does the trick. :)

vw- Did you write this on-the-fly? It seems so elegant, to the point, and tailor made for what I need to do.
It also looks deceptively simple, but experts always make their area of expertise look deceptively simple. I've been attempting and searching for weeks.

Rexx- I'll check your links out and check out your solution. I'll have some adpating to do, it seems, but it looks like a good start. Thank you!

09-11-2006, 09:21 PM
1) All good except getting selected "small" page to "stick" and not reload to the beginning screen.
I have my "screens" stacked in no particular order, save for the first one.
The last one to load is the first one to show.
All good so far. All of the "screens" are set to a z-index of 0.
The javascript works as advertised and loads any screen specified from the image stack while the links associated with 'swapImg" lines are actually "#" so they don't do anything as a link...all perfect.

When you make a selction via a link inside the small screen to take you away from the main page, (only the main page has the "screen") the new page loads just fine.

The issue is now to get back to the last screen by using the browsers back button, the last selected "small" screen won't be there...only the 'last to load-first to see' screen.
I'd really like the last small screen seen to stay put until another screen is selected by the "swapImg" code, so when you surf back to the main page you're right back where you left off.

I'm still not a javascript expert, but the 'swapImg' code is not changing the z-index? It looks as though it's leaving it at "0" - the same as the initial page load. 'swapImg' seems to search among the items with a z-index of "0" to make a choice, but not setting the z-index away from "0" so the choice is now on top?

2) Separate problem in Opera - No "screens" will load. They flash as though 'swapImg' works, but I think the page is immediately reloaded and the main first to see "screen" is all that will 'stick'. Maybe href "#" works as a page reload in Opera? Should I try href="javascript:function Z(){Z=''}Z()" instead to keep the page from relaoding in Opera?

I'm hoping vwPhillips can take a gander. His is the original code that works so well.

3) What is considered the best style with reference to my site, to hide the main page while and until the small "screens" all load? body on load, or something else? Pointer to a faq or good example?

Beta Site:
Repost of 'swapImg':

function SwapImg(id,img){
var obj=document.getElementById(id);
var imgs=obj.getElementsByTagName('IMG');
for (var zxc0=0;zxc0<imgs.length;zxc0++){

Sample .xhtml for initial "screens" image loads:
(The only place style is used outside of my stylesheet - per the original 'swapImg' code!)

<img src="images/downloadTerm.jpg" width="489" height="362" alt="Download Terminal.exe and Support Files for STARGATE and IR-XP2" style="position:absolute;z-index:0;left:0px;top:0px;width:489px;height:362px;border:0px;" usemap="#downloadTerm" />
<img src="images/support.jpg" width="489" height="362" alt="Support for JDS Products" style="position:absolute;z-index:0;left:0px;top:0px;width:489px;height:362px;border:0px;" usemap="#support" />
<img src="images/products.jpg" width="489" height="362" alt="Products" style="position:absolute;z-index:0;left:0px;top:0px;width:489px;height:362px;border:0px;" usemap="#products" />
<img src="images/screenOn.jpg" width="489" height="362" alt="Screen On" style="position:absolute;z-index:0;left:0px;top:0px;width:489px;height:362px;border:0px;" usemap="#screenOn" />
<img src="images/screenWelcomeClass.jpg" width="489" height="362" alt="Welcome Screen - Stargate Class" style="position:absolute;z-index:0;left:0px;top:0px;width:489px;height:362px;border:0px;" usemap="#welcomeClass" />
<!--<img src="images/screenWelcome.jpg" width="489" height="362" alt="Welcome Screen" style="position:absolute;z-index:0;left:0px;top:0px;width:489px;height:362px;border:0px;" usemap="#welcome" /> -->

Sample image map:

<map id="welcome" name="welcomeClass">
<area shape="rect" coords="110,164,380,194" href="classSG.html" alt="SGClass">
<area shape="rect" coords="21,272,96,306" href="javascript:function Z(){Z=''}Z()" alt="Products" onmouseout="window.status=''; return true" onmouseover="window.status='Products'; return true" onclick="SwapImg('i215','products');" />
<area shape="rect" coords="115,272,188,304" href="javascript:function Z(){Z=''}Z()" alt="Downloads" onmouseout="window.status=''; return true" onmouseover="window.status='Downloads'; return true" onclick="SwapImg('i215','downloadMain');" />
<area shape="rect" coords="206,272,282,304" href="pricing.html" alt="Pricing" onmouseout="window.status=''; return true" onmouseover="window.status='Pricing'; return true" />
<area shape="rect" coords="301,272,376,304" href="#" alt="Support" onmouseout="window.status=''; return true" onmouseover="window.status='Support'; return true" onclick="SwapImg('i215','support');" />
<area shape="rect" coords="394,272,469,304" href="#" alt="Contact Us" onmouseout="window.status=''; return true" onmouseover="window.status='Contact Us'; return true" onclick="SwapImg('i215','contact');" />

09-11-2006, 09:47 PM
I' not understanding most of this

as for returning to the last image, cookie will do this.

I do not test in opera but should work

will have a think

09-12-2006, 05:06 PM
The last image map I posted has 2 errors, but that shouldn't cloud the issue. (name & ID should match - 1st line is missing closing tag.)

The code
href="javascript:function Z(){Z=''}Z()" does work in Opera and keeps the page from automatically reloading. Furthermore, the last "small" page seen "sticks" when you go back to it. Just Opera though.

IE initially loads any "small" screen you like and it stays until you leave the page. When you return, you're back to the welcome screen. That's not so bad for content, but for a user interface, it's a bit frustrating. IE people would quickly forget the small screen.

The really strange thing is: I have 2 computers. Both have FF. On computer 1, the small screens won't "stick on return" just like IE. On computer 2, it works like Opera and the way I'd like it to work for everyone; the small screens do "stick on return". The above code doesn't seem to make a difference to FF or IE. (The above code instead of 'href "#"', of course.)
I don't know what's different.

But it will only be unpredictable until I find the cause, or if I find the cause. :)

09-12-2006, 08:44 PM
you have the onclick="SwapImg

and a href location change whick will both be actioned by the same even so the

onclick="SwapImg will do nothing.