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-transiti
onal.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/b
reads_tab_top.gif','../images/recipecards/breakfasts_tab_top
.gif','../images/recipecards/maindishes_tab_top.gif','/Recip
es/images/recipecards/breakfasts_tab_top.gif','/Recipes/imag
es/recipecards/maindishes_tab_top.gif','../images/recipecard
s/smoothies_tab_top.gif','../images/recipecards/desserts_tab
_top.gif','../images/recipecards/salads_tab_top.gif','../ima
ges/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.gi
f" width="79" height="24"
name="breads" usemap="#breadsMap"
border="0"></td>
<td><img
src="/Recipes/images/recipecards/breakfasts_tab_top_gra
y.gif" width="80" height="24"
name="breakfasts"
usemap="#breakfastsMap" border="0"
></td>
<td><img
src="/Recipes/images/recipecards/maindishes_tab_top_gra
y.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.gi
f" 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','brea
dtabRandom','','show','breakfastsInfo','','show','breakfasts
tabRandom','','show','dessertsInfo','','hide','dessertstabRa
ndom','','hide','maindishesInfo','','hide','maindishestabRan
dom','','hide','saladsInfo','','hide','saladstabRandom','','
hide','smoothiesInfo','','hide','smoothiestabRandom','','hid
e','soupsInfo','','hide','soupstabRandom','','hide');MM_swap
Image('breakfasts','','/Recipes/images/recipecards/breakfast
s_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.adob
e.com/products/coldfusion/flex2/?sdid=LVNU
Archive: http://www.houseoffusion.com/groups/Jav
ascript/message.cfm/messageid:3479
Subscription: http://www.houseoffusion.com/groups/Javascript/subsc
ribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/u
nsubscribe.cfm?user=22184.15789.33
|