Links

Lists

Latest Updates

Ruby On Rails List
Python list
Advanced Java
The JavaScript List
Apache Users
Full Disclosure
Linux Security

Search the archives!
Having a development problem? Ask eDevelopment.org forums!

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Javascript] Images for Tabs

  • From: coldfusion.developer at att.net (coldfusion.developer@xxxxxxx)
  • Subject: [Javascript] Images for Tabs
  • Date: Mon Jan 22 20:24:18 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: https://lists.LaTech.edu/pipermail/javascript/attachments/20070123/35218753/attachment.html