# Image swap behaviour from Dreamweaver not 'behaving'!



## paulkaye

Hello everyone!

I am currently designing a site using Dreamweaver MX:

http://www.conceptwheel.com

The thumbnails on some pages (let's choose 'catalogues' as an example) have image swap behaviors assigned.

Initial state = thumbxxx.jpg
Mouseover => thumbxxxpink.jpg
Mouseout => thumbxxx.jpg
Click = "blankimage" (central "please click..." image) => xxx.jpg

I did it like this because using dreamweaver's 'restore image on mouseout' restored ALL swaps, including the main picture. I messed around till I got this method.

I think the mouseover and mouseout behaviours are working but the 'click' is ok only when I preview (Dreamweaver F12) but not when they are on the web. Interestingly, they do seem to replace the 'please click' image with nothing instead!!! It works on my computer (preview and from web) and it works on my sister-in-law's mac (from web) but not on her PC (from web)!!!

It seems like it should be a simple url/src problem but I can't find one! I've looked everywhere but I can't find an answer to this one - I hope one of you guys can help?


Thank you!

Paul


----------



## v-six

First, let me say that the site looks very good. Second, I hate to be the bearer of bad news, but the solution at hand may be browser debugging. This works perfectly in Firefox, but not in IE 6. Somewhere in there, you've got some code that internet explorer doesn't like... I wasn't aware that IE had javascript compatibility issues. I'll keep searching for an answer for you, but hopefully someone will have experience with the issue, and have an immediate answer for you.


----------



## paulkaye

Thank you for your compliment! I look forward to hearing if you come up with any potential problems! Do you think it could be the list of three behaviours to each image?

Also, can I ask you if the thumbnails temselves are appearing properly and being highlighted upon mouseover?


----------



## v-six

The thumbnails look fine, and are being highlighted on mouseover. If you want, try it out on firefox, and see for yourself. http://www.mozilla.org/products/firefox/
In a perfect world, you can have multiple behaviors built into one image, and they will all work, as long as they don't interfere with each other, which they shouldnt.
Also, did you already try simply using the image rollover tool? If so, tell me what the problem was with your restores. If not, give it a try.


----------



## paulkaye

When you say "image rollover tool", do you mean 'insert rollover image'? If so, no I did not try it. Do you think it is better to try that next time? The reason my setup was so complicated is that using the 'image swap restore' function, ALL images were restored on mouseout - both the thumbnail and the central image. This was the case, even if I checked the 'restore image on mouseout' box within the original swap behaviour dialogue and it had nothing to do with the other swap behaviour! So I figured three swaps would work.

My question about the thumbnails behaving was because Dreamweaver got a bit confused when I changed an entire site and moved the template. I think several links/srcs got converted into absolute HD-specific (file://c:...) format. I have been scouring the site and changing them all manually but wanted to know on a remote person's machine if they were displaying correctly. So at least that's cool.

So, what you are suggesting is that I remove ALL the behaviours and start them again, but using the 'insert rollover image' function. Is that right? (you only need to respond if it is not!) I'll do it for one page (catalogues) and see how it goes.

Wish me luck!!


----------



## v-six

paulkaye, that was what I was suggesting. There shouldn't be the need to change your disjointed rollovers. I think that the reason dreamweaver gave you a problem, is that macromedia probably expected most people to just go to *insert>image objects>image rollover* for simple rollovers. I'm not sure it will make any difference, but its worth a shot.
Also, if you haven't already made the changes, don't waste your time with a whole page, just change one or two of your images... it's just troubleshooting... so doing a whole page could just be using up extra time.


----------



## paulkaye

Hi SixShooter,

The 'image rollover' tool just sets up the same behaviours as I did manually. They are visible in the behaviours panel. So, the original problem is still there. I have made a temporary page at

http://www.conceptwheel.com/cataloguesnew.htm

where there are four different 'versions' of what I've been doing. I have made a screenshot of the 'behaviours' panel for each one so you can see what dreamsweaver is doing too. Going from top to bottom:

1. Simply used the 'rollover image' feature of dreamweaver.
Screenshot = http://www.conceptwheel.com/brookshot1.jpg

2. After inserting the rollover image, I set an additional behaviour for a click to change the central image but with 'restore image on mouseout' in the dialogue box unchecked. Note that this erases the 'image restore' behaviour for the rollover image too! http://www.conceptwheel.com/brookshot2.jpg
It's as though the image restore feature is a global setting for the object, not an individual behaviour.

3. To combat this, I went back into the 'swap image' dialogue box that was created by the 'rollover image' feature. I re-checked the 'restore image on mouseout' box. This recreated the 'swap image restore' feature as you can see in the screenshot.http://www.conceptwheel.com/brookshot3.jpg
However, this doesn't solve the problem as the image restore seems active for the large central image that appears after clicking. i.e. both 'swap image' behaviours are controlled by one 'image swap restore' behaviour.

4. Finally, this is how I did it in the first place. There are simply three 'swap image' behaviours. One swaps the image for the outlined version on mouseover. Another swaps them back on mouseout (rather than using image restore and thus eliminating the problem in '3'). The final one swaps the central image for a large version of the thumbnail. http://www.conceptwheel.com/brookshot4.jpg

So this is what I had established myself a while ago. But as far as I knew, I had solved the problem!!! So, as you can see, the rollover image feature doesn't get me any further. However, it could be that simply writing the page again helped. Check the bottom one and tell me if it works ok!

Cheers!


----------



## v-six

well, considering that you seem to be doing everything right, and its just an IE debugging problem, I'd try out your rollovers and disjointed rollovers seperately. See if they work as they should when not used together, or if one of them gives you a problem. This way we'll atleast know the cause of your problem This would be so much easier to fix if you were doing something wrong :smile:

Also, #4 is the correct way of going about this. I just did a mock run, and it worked fine for me, even on internet explorer. The code I used: probably the same that you had originally. Try it out anyway (with your file names of course) If it still doesn't work, and you'd like to send me the files, I'm curious to see if your rollovers would work on my server. 
<a href="javascript:;"onClick="MM_swapImage('centerimage','','newimage.gif',1)" onMouseOver="MM_swapImage('icon','','highlightedthumbnail.gif',1)" onMouseOut="MM_swapImage('icon','','original_thumbnail.gif',1)">
<img src="original_thumbnail.gif" alt="thumbnail" name="icon" border="0" id="icon">
If it still wont work with this script, then the problem doesn't lie with your javascript.


----------



## paulkaye

Thanks SixShooter,

I'll have a look at the script over the weekend and let you know how it goes!

Paul


----------



## v-six

good luck!


----------



## paulkaye

Hi again SixShooter,

Ok, I've remade the pages for 'catalogues' and 'advertising'. I didn't want to do them all until you've had a look and I'm sure it's working. However, they are working on my machine so I'm feeling optimistic! When you've got some time, if you could just check those pages that the thumbs and central image are working properly I would REALLY appreciate it!

Paul


----------



## v-six

They worked, looks like you've got it under control. The only thing that you might want to consider is changing the alt-text to say _loading_. That way if someone's on a slower connection, they'll atleast know its working


----------



## paulkaye

Hehe - someone else suggested that to me today. Thank you though.

SixShooter, I really appreciate your help and all the time you've spent on this. I hope what goes around comes around and that others do the same for you.

Paul


----------



## v-six

You're very welcome. Im glad you got everything straighted out.


----------



## sdf

*Similar problem with DW image swap*

I just stumbled onto this thread via Google and it sounds like a have a similar (but not identical) problem. Basically, I've set up a group of thumbnail images which onClick change a central image in the main area of the page (a photo gallery). I've selected to preload images and I'm also using another behavior - "change property" to alter the caption placed under each photo in the gallery.

This code is working perfectly on my Mac in several browsers and in Virtual PC with IE. 

Here's where it gets weird. I've asked several friend to check the page out on their PCs and feedback has been very varied. IE on the PC seems to be having trouble with this code - SOMETIMES. When it doesn't work, the central photo never loads and clicking on the thumbnails does nothing. But I have seen it work fine on some PCs with IE. On Firefox (PC) it works fine.

So, why this is working erractically across PCs with IE I have NO idea, but am wondering if perhaps either of you guys might have a thought based on all the troubleshooting you've been doing on this.

Thanks in advance,
Scott


----------

