I made a roll over button in Fireworks. I made a plain rollover with three frames and then saved an animated gif using these three frames as the animation. I saved this animated gif as the "over" button. Here's my train, see if you can follow it:
Step one: Make plain gif consisting of:
frame one --> original button
frame two --> highlighted activated by "onMouseOver"
frame three --> depressed button activated "onClick"
Then, made animated gif using above three frames.
Saved this animated gif as frame two of the plain gif above. The effect should be that when one puts their mouse over the button, the animated gif will show. The animated gif did not have any html/ javascript exported with it, the html/ javascript that was exported was all from the plain gif.
Follow my train so far?
OK. The html/ javascript that was exported looked like this.
==============
<html>
<head>
<title>ani_ovr_but.gif</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Fireworks Splice HTML">
<!-- Fireworks 3.0 Dreamweaver 3.0 target. Created Fri Mar 30 16:22:46 GMT-0600 2001 -->
<script language="JavaScript">
<!--hide this script from non-javascript-enabled browsers
function MM_findObj(n, d) { //v3.0
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); return x;
}
/* Functions that swaps images. */
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_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;
}
/* Functions that handle preload. */
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];}}
}
// stop hiding -->
</script>
</head>
<body bgcolor="#ffffff" onLoad="MM_preloadImages('ani_ovr_but_f2.gif','ani_ovr_but_f3.gif');">
<!-------------------------- BEGIN COPYING THE HTML HERE ---------------------------->
<a href="#" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('ani_ovr_but','','ani_ovr_but_f2.gif',1);" onClick="MM_swapImage('ani_ovr_but','','ani_ovr_but_f3.gif',1);" ><img name="ani_ovr_but" src="ani_ovr_but.gif" width="340" height="159" border="0"></a>
<!--------------------------- STOP COPYING THE HTML HERE --------------------------->
</body>
</html>
=========
The above wouldn't work in IE 5.5 on the Mac, but it did work in Navigator.
Now I have to admit, Javascript is not my thing, but I seem to remember that making a rollover the old fashioned way didn't take that much code.
In fact, if an animated gif doesn't need any code to run, shouldn't the javascript just be the preloads at the top with a simple function to make the rollovers work and then an "onMouseOver" call around the img of the button?
It makes me ask the question: should I use the javascript that fireworks creates, or can you tell from the above code that I did something wrong when I created this mess in the first place?
What is the purpose of all that extra javascript?
-G
