Dreamweaver Swap Image Restore onClick not working.

Discussion in 'Web Design and Development' started by Lau, Feb 4, 2006.

  1. Lau Guest

    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.
  2. homerjward macrumors 68030


    May 11, 2004
    fig tree
    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?
  3. Lau thread starter Guest

    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. :)
  4. zarathustra macrumors 6502a


    Jul 16, 2002
    Philadelphia, PA
    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.


    hope it helps
  5. homerjward macrumors 68030


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

    Attached Files:

  6. Lau thread starter Guest

    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

    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. :)
  7. littlejim thread starter Guest

    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	{
    	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.
  8. Lau thread starter Guest

    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.
  9. littlejim thread starter Guest

    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!
  10. Lau thread starter Guest

    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. :)
  11. littlejim thread starter Guest

    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 :

  12. Lau thread starter Guest

    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.
  13. littlejim thread starter Guest

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

    Apr 4, 2007
    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
  15. Wee Beastie macrumors regular

    Aug 20, 2007
    In the snow with Rosebud
    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):

    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 :)
  16. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    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.

  17. Wee Beastie macrumors regular

    Aug 20, 2007
    In the snow with Rosebud
    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!
  18. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    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.

  19. littlejim thread starter Guest


Share This Page