homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Javascript that fireworks creates
Is it worth using?
grnidone




msg:849498
 11:26 pm on Mar 30, 2001 (gmt 0)

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

 

tedster




msg:849499
 7:47 am on Mar 31, 2001 (gmt 0)

No, you sure don't need that much code for your situation -- your memory of a simple rollover is accurate. And as you mentioned, just because the rollover is an animation does not increase the javascript code at all.

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.

knighty




msg:849500
 9:51 am on Mar 31, 2001 (gmt 0)

I use Fireworks to do all my rollovers BUT only for the images. The actual image swapping code I either do myself or get DW to do it.

I find its just too confusing and bloated.

mivox




msg:849501
 6:12 pm on Apr 2, 2001 (gmt 0)

Yeah, that code is an abosulute mess compared to what I always use...

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?

knighty




msg:849502
 8:09 am on Apr 3, 2001 (gmt 0)

Hmmmm, to be honest the DW code is pretty compicated but because its so easy to do and I am so lazy I just use it ;)

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.

mivox




msg:849503
 7:24 pm on Apr 3, 2001 (gmt 0)

So, basically... If you want clean, simple javascript code, there's still no substitute for doing it by hand. ;) A simple rollover script should be half the size of the two shown here.

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.

knighty




msg:849504
 1:58 pm on Apr 4, 2001 (gmt 0)

This is the code I usually use

<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 ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved