Try using jQuery's tab plugin. Loads of ways to customize it: http://www.stilbuero.de/2006/11/05/tabs-version-2/
Andy matthews -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Monday, January 15, 2007 1:34 PM To: CF-Talk Subject: JavaScript Forum Needed Does anyone know a good JavaScript forum? If anyone has any ideas for the JavaScript issue below, thank you. Other wise don't read below. D Tabbed images Load first tab by default. I'm stuck, 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/maindish es_tab_top.gif','/Recipes/images/recipecards/breakfasts_tab_top.gif','/Recip es/images/recipecards/maindishes_tab_top.gif','../images/recipecards/smoothi es_tab_top.gif','../images/recipecards/desserts_tab_top.gif','../images/reci pecards/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','maindishe stabRandom','','hide','saladsInfo','','hide','saladstabRandom','','hide','sm oothiesInfo','','hide','smoothiestabRandom','','hide','soupsInfo','','hide', 'soupstabRandom','','hide');MM_swapImage('breakfasts','','/Recipes/images/re cipecards/breakfasts_tab_top.gif',1)"> </map> </body> </html> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Create robust enterprise, web RIAs. Upgrade & integrate Adobe Coldfusion MX7 with Flex 2 http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:266631 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
