Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Dreamweaver Swap Image Restore onClick not working.

L

Lau

Guest
Original poster
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, 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.
 
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?
 
homerjward said:
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?
Click to expand...

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. :eek: If there's a simpler way to do this I'd be grateful. :)
 
Lau said:
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. :eek: If there's a simpler way to do this I'd be grateful. :)
Click to expand...
it's very confusing at first definitely. on the off chance you decide to use flash i've attached an example flash document.
 

Attachments

  • example.zip
    5.9 KB · Views: 165
zarathustra said:
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
Click to expand...

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

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

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. :)
 
This will work (or at least it does on my test ).

1. Paste this code immediatly after the end of the MM_swapImage function :
Code: 
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 :

Code: 
<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 :

Code: 
<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.
 
littlejim said:
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.
Click to expand...

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.
 
Lau said:
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.
Click to expand...

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!
 
littlejim said:
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!
Click to expand...

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. :)
 
Lau said:
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. :)
Click to expand...

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
 
littlejim said:
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
Click to expand...

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.
 
Lau said:
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.
Click to expand...

I'm still working on it, but yep, you can adjust the speed of fades/clicking on the image.
 
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
 
Can we take this discussion a liiiitle bit further?

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:eek:) 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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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>
Click to expand...


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 :)
 
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
 
SrWebDeveloper said:
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
Click to expand...

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!
 
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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back