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:
http://members.cox.net/david.silva
Repost of 'swapImg':
Code:
function SwapImg(id,img){
var obj=document.getElementById(id);
var imgs=obj.getElementsByTagName('IMG');
for (var zxc0=0;zxc0<imgs.length;zxc0++){
imgs[zxc0].style.zIndex=(imgs[zxc0].src.match(img))?'1':'0';
}
}
Sample .xhtml for initial "screens" image loads:
(The only place style is used outside of my stylesheet - per the original 'swapImg' code!)
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:
Code:
<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');" />
</map>
Before you post, read our: 
Multiple images; single div; one link & imap per image; head spinning
