[Javascript] Images for Tabs

Mon Jan 22 20:23:52 CST 2007

All,

Any help woul dbe great.

I have this row of images.  The functionality I have working is that 
each tabbed image is grayed out and changes to a colorized version of 
the same tab after you click on the tab.  What I can't figure out is 
 how to get the first image to show
the colorized version by default when the page loads and the turn off 
 as the user clicks on the other tabs. 

 Should I add to the <body tag with an onload = ???  But I not sure 
 what I should write.  Any suggestions would be very helpful.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; 
 charset=iso-8859-1" />
 <title>Untitled Document</title>

 <script language="JavaScript">
 <!--
 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_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_findObj(n, d) { //v4.01

 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);

 if(!x && d.getElementById) x=d.getElementById(n); 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];}
 }

 function MM_showHideLayers() { //v6.0

 var i,p,v,obj,args=MM_showHideLayers.arguments;

 for (i=0; i<(args.length-2); i+=3) if 
 ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

 if (obj.style) { obj=obj.style; 
 v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

 obj.visibility=v; }
 }
 //-->
 </script>
 <body 
 onload="MM_preloadImages('/Recipes/images/recipecards/breads_tab_top.
 gif','../images/recipecards/breakfasts_tab_top.gif','..
 /images/recipecards/maindishes_tab_top.gif',
 '/Recipes/images/recipecards/breakfasts_tab_top.gif',
 '/Recipes/images/recipecards/maindishes_tab_top.gif','..
 /images/recipecards/smoothies_tab_top.gif','..
 /images/recipecards/desserts_tab_top.gif','..
 /images/recipecards/salads_tab_top.gif','..
 /images/recipecards/soups_tab_top.gif')">

 </head>

 <body>
 <div id="triggers" style="position:absolute; left:188px; top:530px; 
 width:560px; z-index:8;; visibility: visible">

 <table border="0" cellspacing="0" cellpadding="0">

 <tr>

 <td><img src="/Recipes/images/recipecards/breads_tab_top_gray.gif" 
 width="79" height="24" name="breads" usemap="#breadsMap" 
 border="0"></td>

 <td><img src="/Recipes/images/recipecards/breakfasts_tab_top_gray.gif" 
 width="80" height="24" name="breakfasts" usemap="#breakfastsMap" 
 border="0" ></td>

 <td><img src="/Recipes/images/recipecards/maindishes_tab_top_gray.gif" 
 width="80" height="24" border="0" name="maindishes" 
 usemap="#maindishesMap"></td>

 <td><img src="/Recipes/images/recipecards/smoothies_tab_top_gray.gif" 
 width="80" height="24" name="smoothies"  border="0" 
 usemap="#smoothiesMap"></td>

 <td><img src="/Recipes/images/recipecards/desserts_tab_top_gray.gif" 
 width="80" height="24" border="0" name="desserts" 
 usemap="#dessertsMap"></td>

 <td><img src="/Recipes/images/recipecards/salads_tab_top_gray.gif" 
 width="80" height="24"  border="0" name="salads" 
 usemap="#saladsMap"></td>

 <td><img src="/Recipes/images/recipecards/soups_tab_top_gray.gif" 
 width="80" height="24" name="soups" border="0" 
 usemap="#soupsMap"></td>

 </tr>

 </table>
 </div>
 <map name="breakfastsMap">

 <area shape="rect" coords="0,-3,124,21" href="#recipetabs2" 
 onfocus="MM_swapImgRestore()" onClick="MM_showHideLayers('breadsInfo',
 '','hide','breadtabRandom','','show','breakfastsInfo','','show',
 'breakfaststabRandom','','show','dessertsInfo','','hide',
 'dessertstabRandom','','hide','maindishesInfo','','hide',
 'maindishestabRandom','','hide','saladsInfo','','hide',
 'saladstabRandom','','hide','smoothiesInfo','','hide',
 'smoothiestabRandom','','hide','soupsInfo','','hide','soupstabRandom',
 '','hide');MM_swapImage('breakfasts','',
 '/Recipes/images/recipecards/breakfasts_tab_top.gif',1)">
 </map>
 </body>
</html>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20070123/35218753/attachment.htm>