Forum Moderators: not2easy
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
Fireworks has code templates that are designed to accommodate all kinds of situations. But in simpler applications, you get bloated code that can be unintuitive to read and edit.
For instance, instead of preloading individual images one at a time, the Fireworks code creates an image array, so that one line of code preloads however many images you have. But then the images no longer have intuitive names and things can get obscure.
I find its just too confusing and bloated.
Generally speaking, most auto-javascript I've seen is unnecessarily bloated. You'd be better off finding a free, generic rollover script and keeping in a 'library' on your hard drive... I keep about 20 different free scripts on hand to re-use whenever convenient.
Knighty: Could you show us an expample of DW's rollover coding? Is it close to hand-written code as far as simplicity?
I used code rollovers by hand but did'nt notice much difference in performance so I took the easy route where you just point and click!
here is the DW JS :
<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.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);
if(!x && document.getElementById) x=document.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];}
}
//-->
</script>
then for the actual image:
<a href="whatever.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image name','','image.gif',1)">
Not the cleanest code ever.
But hey, if a few extra K on your page doesn't bother you, no reason not to do it automatically, I guess... I'd definitely put the script in an external file though.
<script language="JavaScript">
function filter(imagename,objectsrc)
{
if (ver == "n3")
document.images[imagename].src=eval(objectsrc+".src")
}
//-->
</script>
then mouseover
<a href="whatever.html" onmouseover="filter('one','image02')" onmouseout="filter('one','image01')" target="bottom"><img src="images/filename.gif" name="one"></a>
Slighlty simpler than auto feature ;)
