PDA

View Full Version : Dreamweaver Swap Image Restore onClick not working.




Lau
Feb 4, 2006, 12:11 PM
I'm trying to set up my website so that when you click on an image it will swap to a different image, and then when you click it will restore the original one. This works fine when it's a swap image which is activated by a rollover onMouseOver then restored onMouseOut, but although the swap image works when I set it to onClick, it doesn't restore onClick.

Here's the page in question: http://www.laurabarnard.co.uk/newsite/test.html.

Unfortunately my JavaScript knowledge is non-existent, so although I've found some code that might work here (http://www.webdeveloper.com/forum/archive/index.php/t-57445.html), I have no idea where to put it, or where my image files should go. It seems strange that the Dreamweaver code doesn't work (although I know it's dodgy for JavaScript in particular).

Has anyone else come across this and found a workaround? Thanks.



homerjward
Feb 4, 2006, 12:34 PM
if it's something like the link, can't you just make a small flash movie with two buttons on two frames and on (press) { gotoAndStop(); } events?

Lau
Feb 4, 2006, 12:40 PM
if it's something like the link, can't you just make a small flash movie with two buttons on two frames and on (press) { gotoAndStop(); } events?

Hmm. Thanks for the suggestion, I'll give it a try. I was hoping to keep things simple (and quick to load), but I suppose for everyone who hasn't got Flash, there'll be someone else who's turned off Javascript.

Ooh, and I could have fancy zooming in effects in Flash. Hmm <strokes chin>. You see this is what happens, I start things out simple, and then get ideas ahead of my station (and ability!). :D

Edit: Hmm, ok, Flash is really difficult. :o If there's a simpler way to do this I'd be grateful. :)

zarathustra
Feb 4, 2006, 02:34 PM
I think it works exactly as you told it to. It needs to have some sort of validation control: if click happens check to see which picture is showing, and then show the other one...

Or you can use CSS and keep one of the "layers" hidden. When click on one, show the other, and vice versa. I have created a quick and VERY dirty example.

http://www.contrabrandcreative.com/downloads/imageswap/test.html

hope it helps

homerjward
Feb 4, 2006, 02:50 PM
Hmm. Thanks for the suggestion, I'll give it a try. I was hoping to keep things simple (and quick to load), but I suppose for everyone who hasn't got Flash, there'll be someone else who's turned off Javascript.

Ooh, and I could have fancy zooming in effects in Flash. Hmm <strokes chin>. You see this is what happens, I start things out simple, and then get ideas ahead of my station (and ability!). :D

Edit: Hmm, ok, Flash is really difficult. :o If there's a simpler way to do this I'd be grateful. :)
it's very confusing at first definitely. on the off chance you decide to use flash i've attached an example flash document.

Lau
Feb 4, 2006, 04:39 PM
Or you can use CSS and keep one of the "layers" hidden. When click on one, show the other, and vice versa. I have created a quick and VERY dirty example.

http://www.contrabrandcreative.com/downloads/imageswap/test.html

hope it helps

Excellent! That's great. I'd rather do it in CSS anyway, because it avoids the problem of people not having JavaScript enabled. Thanks very much for that, I appreciate it. I'll give it a try tomorrow when my brain is melting less. :D

it's very confusing at first definitely. on the off chance you decide to use flash i've attached an example flash document.

And thank you for that as well. If I can't get the CSS working, I'll definitely use it. Looks like I could do with learning Flash as well, so I'll have a go just to learn it. :)

Edit: Just realised that the CSS example still uses JavaScript, but nevertheless is still very helpful. :)

littlejim
Feb 4, 2006, 06:46 PM
This will work (or at least it does on my test ).

1. Paste this code immediatly after the end of the MM_swapImage function :
var toggle = 0;

function toggleImage(imdid, nstr, img, zval ) {
if( !toggle ) {
MM_swapImage(imdid, nstr, img, zval);
}
else {
MM_swapImgRestore();
}
toggle ^= 1;
}

2. Replace your line :

<a href="javascript:;" onclick="MM_swapImgRestore();MM_swapImage('Image1','','Images/cons.gif',1)"><img src="Images/pins.gif" name="Image1" width="525" height="385" border="0" id="Image1" /></a>


with :

<a href="javascript:;" onclick="toggleImage('Image1','','Images/cons.gif',0)"><img src="Images/pins.gif" name="Image1" width="525" height="385" border="0" id="Image1" /></a>


This isn't the best way to accomplish the task but it gets the job done with the minimum of changes to your code!

My personal preference would be to avoid using Flash to solve this problem.

Lau
Feb 4, 2006, 06:51 PM
This will work (or at least it does on my test ).

This isn't the best way to accomplish the task but it gets the job done with the minimum of changes to your code!

My personal preference would be to avoid using Flash to solve this problem.

Fantastic! http://www.laurabarnard.co.uk/newsite/test2.html

Thanks so much for that. Why isn't it the best way, just out of interest? It's always good to know how to improve.

littlejim
Feb 4, 2006, 06:56 PM
Fantastic! http://www.laurabarnard.co.uk/newsite/test2.html

Thanks so much for that. Why isn't it the best way, just out of interest? It's always good to know how to improve.

Cool. Glad to help.

Don't worry about it 'not being the best way'. It's just the MM code is bloated for what you are using it for ... just me being anal about javascript!

Lau
Feb 4, 2006, 07:03 PM
Cool. Glad to help.

Don't worry about it 'not being the best way'. It's just the MM code is bloated for what you are using it for ... just me being anal about javascript!

Fair enough! I have heard Dreamweaver is hideous for JavaScript. I've been trying to get a working knowledge of HTML and CSS due to 'bloat'age, but JavaScript gives me the fear. :p

Well, thanks again for your help. I can get back to enjoying making the damn thing now. :)

littlejim
Feb 4, 2006, 07:20 PM
Fair enough! I have heard Dreamweaver is hideous for JavaScript. I've been trying to get a working knowledge of HTML and CSS due to 'bloat'age, but JavaScript gives me the fear. :p

Well, thanks again for your help. I can get back to enjoying making the damn thing now. :)

JavaScript can be a bit daunting, but if you can get a basic knowledge of how it works then it's great for bringing your web site to life.
I've been working on a site that uses javascript to fade images instead of just 'flipping' them :

http://www.pannibharti.com

Lau
Feb 4, 2006, 07:28 PM
JavaScript can be a bit daunting, but if you can get a basic knowledge of how it works then it's great for bringing your web site to life.
I've been working on a site that uses javascript to fade images instead of just 'flipping' them :

http://www.pannibharti.com

That's a nice effect. A lot softer than just flipping them, especially for a slideshow as well - firing images one after another without the fade might look a bit clumsy. I presume you could adjust the length of the fade as well, so if someone was clicking something instead of a slideshow it would fade quicker so that something happened immediately.

littlejim
Feb 6, 2006, 06:07 PM
That's a nice effect. A lot softer than just flipping them, especially for a slideshow as well - firing images one after another without the fade might look a bit clumsy. I presume you could adjust the length of the fade as well, so if someone was clicking something instead of a slideshow it would fade quicker so that something happened immediately.

I'm still working on it, but yep, you can adjust the speed of fades/clicking on the image.

Syll
Apr 5, 2007, 01:23 AM
Hey, I've the same kind of problem, except I'm using CSS (well, was) and I have backgroundImages

I already used some other code to make the backgroundImage behind an Anchor tag change on click and change back

But I'm wondering, can I still have background image rollovers?

I can use the MM script if I have to, any script really, I've been working so long on this that I'm desperate xD

Wee Beastie
Sep 2, 2008, 09:59 PM
I ran across this thread while looking for an answer to the same question that the OP asked. I adapted littlejim's snippet to fit my needs and everything is working great. My question is this:

littlejim says this is bloated. What is the non-bloated way to accomplish this effect? I am committing ultimate sin of letting Dreamweaver write my JavaScript. Today marks my first attempt at editing the script. (You should see one of my previous sites which has multiple instances of the same code in head tag...yuck:o) So here is the code that I have currently (with littejim's snippet added at the end):


<script type="text/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];}
}
var toggle = 0;

function toggleimage(imdid, nstr, img, zval ) {
if( !toggle ) {
MM_swapImage(imdid, nstr, img, zval);
}
else {
MM_swapImgRestore();
}
toggle ^= 1;
}
//-->
</script>


Is all of this code necessary? I'll be removing it from the head and placing it in an external .js file so it'll only have to be read in once, so it won't be too bad. I'm just trying to hear some thoughts on writing elegant code--keeping in mind that I have no JavaScript experience. Functionality is simple - click thumbnail, see image, click thumbnail again, no see image.

BTW thanks to littlejim for providing a solution to this issue :)

SrWebDeveloper
Sep 3, 2008, 06:35 AM
RE: Why is DW considered bloatware for this task?

The Dreamweaver code preloads all images and uses the very strict DOM method to search the entire document form object for the button ID which is then swapped. This search method is bloated in my opinion as there are easier ways (less code), still using the DOM, to find an object ID and swap the object contents. On a side note, using the CSS method for simple things like this means no JavaScript is required and no need to pre-load images, but a little less fancy (which might be a good thing, it's called usability).

Otherwise, mootools offers excellent JavaScript libraries for menu systems and rollover effects that 1) work well 2) DOM support, cross browser compatible and 3) only install functions of their class that you need, no bloatware. For future projects, of course.

-jim

Wee Beastie
Sep 3, 2008, 07:46 PM
RE: Why is DW considered bloatware for this task?

The Dreamweaver code preloads all images and uses the very strict DOM method to search the entire document form object for the button ID which is then swapped. This search method is bloated in my opinion as there are easier ways (less code), still using the DOM, to find an object ID and swap the object contents. On a side note, using the CSS method for simple things like this means no JavaScript is required and no need to pre-load images, but a little less fancy (which might be a good thing, it's called usability).

Otherwise, mootools offers excellent JavaScript libraries for menu systems and rollover effects that 1) work well 2) DOM support, cross browser compatible and 3) only install functions of their class that you need, no bloatware. For future projects, of course.

-jim

I have seen mootools mentioned on this forum before, but haven't looked closely. I will tonight. I have actually determined that my previously posted code doesn't quite fit my needs. I'll be sticking with the standard swap image/swap image restore code that DW writes unless a CSS solution works better.

I certainly would prefer a CSS solution. I am much more cozy writing a CSS file. I thought about it but determined that what I wanted to do couldn't be done with CSS alone. Of course I completely forgot about Eric Meyer's CSS popups. I have some time before the deadline to play around with that technique and see if it will fit my needs.

I figured I would eventually have to get my hands dirty in some JavaScript. I'm looking forward to it.

Ps. I'm checking out the mootools site and it looks really interesting!

SrWebDeveloper
Sep 4, 2008, 07:22 AM
One final comment as to mootools:

For those future projects, think of mootools as a framework - a set of methods and classes written in Javascript that use objects to create some really, really outstanding effects. They include good examples and documentation (plus plenty of help via Google) - a great way to learn Javascript and the proper way since as I noted earlier, mootools is very cross browser compatible due to its core code being based on DOM standards and also well written. It's been around for awhile and is very well known.

I've beaten this to death, the rest is up to you to discover! Enjoy.

-jim

littlejim
Sep 5, 2008, 04:53 AM
I agree with comments about mootools.
I gave up coding my own solution to fading and now use mootools.
Only been playing with it for a little while but it's really easy to get some great effects.

http://www.art-atelier.co.uk
http://www.clivelavagna.com/