Swap Trans Image
Swap Trans Image is very similar to the standard Swap Image behavior which simply swaps one image for another by changing the SRC attribute of the IMG tag.
This type of action is used to create button rollovers and other image effects, including disjointed rollovers and swapping more than one image at a time.
Using Swap Trans Image, visitors using IE4+ on PC will see a very dynamic-animated image rollover: the original image disappears while at the same time the new image appears.
For the transition between the original image and the new image, you can choose from 25 different transition effects, including a fade effect (see demo).
In all other browsers the script degrades gracefully to a simple image swap.
| Author: | Marja Ribbers (FlevOOware.nl) |
|---|---|
| Version: | 1.0.2 |
UI Access
Swap Trans an image that is already on the page:
- select the Swap Trans trigger (e.g. the image itself or a link),
- apply the 'Swap Trans Image' behavior from the 'FlevOOware' flyout in the Behaviors panel.
- either by clicking the Swap Trans Image icon in the Objects palette, or
- using the 'Swap Trans Rollover Image' menu entry in the 'FlevOOware' flyout in the Insert menu.
| Features in Detail » |
Marja Ribbers-de Vroed
Well, what's there to tell?
I worked as a software engineer for a well-known Dutch software company for about 10 years. But then I decided I did not want to work there anymore. 
Since then, I've been working with my husband in our own company.
I "discovered" web development early 2000, and I soon found out that I could actually create my own extra (DHTML) features in Dreamweaver by building custom extensions.
My first extension was Cross-browser AutoScroller, but I've developed several other ones since then.
User Reviews
Total of 15 reviewsRE: RE: RE: swapping multiple images
Written by Marja Ribbers-de Vroed on March 8, 2004The only thing you're accomplishing here is that the swap images get preloaded. If you check the 'Preload images' option in the DW dialog for Swap trans Image (and for the default Swap Image behavior as well), the images get preloaded as well.Did ...
RE: RE: swapping multiple images
Written by sip pai on March 8, 2004Hi, I have found a workaround that is compatible with all browsers and probably works for the standard swap image browser as well. Code below... Basically if you move the onClick statement inside the href '' with javascript:; at the front it works ...
RE: swapping multiple images
Written by Marja Ribbers-de Vroed on March 8, 2004Does this IE issue also occur when you specify a separate trigger for each image? Eg. <a href='javascript:;' ...
swapping multiple images
Written by sip pai on March 8, 2004Hi, Nice fade transition but as with the dreamweaver default behaviour, in IE for some reason when I use it with the onClick state across multiple images, some of the images disappear completely. Here's the code snippet below... very frustrating as ...
Would be nice if this had snapping
Written by Kenny Darcy on March 3, 2004It would be nice if one could apply this extension and have it snap to an image or something so one can set the x and y in a table.RegardsKenny
RE: RE: RE: Using onClick instead of onMouseOver
Written by Marja Ribbers-de Vroed on October 9, 2003Hi Andrew, Sorry for this delayed reply, but I just now saw your post.I have tried using onClick in my example page, but it works just fine then.You say you don't want to preload the images, but have you tried if that would make a difference? Does ...
RE: RE: Using onClick instead of onMouseOver
Written by Andrew Ross on October 2, 2003Thanks for your response and sorry it took me awhile to get back to you. You can visit the URL below for an example. http://www.xcelco.on.ca/~aross/demo/image_swap5.html This page works fine with onMouseOver, but when I replace it with onClick it ...
RE: Using onClick instead of onMouseOver
Written by Marja Ribbers-de Vroed on September 28, 2003Hi Andrew, No, it should work equally well with onMouseOver. Can you show me an URL? Regards, Marja
