Swap image

I've set up a table to swap a series of thumbnail and display a larger image. That works but it also replaces my header image. In the behavious menu I see two image files foe the larger swap. The one I expect and the header image file.
Help?
Harry

can anyone help me with this?

Similar Messages

Swap Image Behavior with Text

I am trying to figure something out but can't seem to find
it. I'm sure it must be pretty simple, but I'm stumped. Basically,
I have a main image and a few thumbnail images below it. I've
attached the Swap Image behavior to each thumb to change the main
image to a different photo and then changed the onMouseOver to
onClick.
The problem is I want to also have some photo text or caption
below the main image to change. Does anyone know how to do this
with more or less stock DW behaviors? Or if not, how to do it in
the most efficient way possible?
Thanks in advance.
-Bill

You could always embed the caption information in the image,
you know? That
would be the simplest way. Is that possible?
Alternatively you could create a series of stacked
containers, each hidden,
in the location where you want your captions. Then you would
make your
onclick event do both the image swap and the Show/Hide on the
associated
caption container (*and* a hide on all the rest of the
caption containers).
This can be pretty tedious when there are lots of images, and
you are using
only the DW User interface (as opposed to Code view). It will
also take you
into the realm of positioned elements (probably) which can be
troublesome
themselves.
Finally, if this is all too much for you, there are EXCELLENT
alternatives
over at projectseven ($) for doing something like this right
out of the box.
http://www.projectseven.com/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"captcashew" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to figure something out but can't seem to
find it. I'm sure it
>must
> be pretty simple, but I'm stumped. Basically, I have a
main image and a
> few
> thumbnail images below it. I've attached the Swap Image
behavior to each
> thumb
> to change the main image to a different photo and then
changed the
> onMouseOver
> to onClick.
>
> The problem is I want to also have some photo text or
caption below the
> main
> image to change. Does anyone know how to do this with
more or less stock
> DW
> behaviors? Or if not, how to do it in the most efficient
way possible?
>
> Thanks in advance.
>
> -Bill
>
> <p><img src="images/215-suite-2.jpg" alt="Main
Photo" name="mainImage"
> width="300" height="225" id="mainImage" /></p>
> <p> </p>
> <p> </p>
> <p><img src="images/215-suite-2.jpg"
alt="Thumbnail Photo 1"
> name="thumb1"
> width="100" height="75" id="thumb1"
>
onclick="MM_swapImage('mainImage','','images/215-suite-2.jpg',1)"
/>
> <img src="images/renovations_02-after.jpg"
alt="Thumbnail Photo 2"
> name="thumb2" width="100" height="75" id="thumb2"
>
onclick="MM_swapImage('mainImage','','images/renovations_02-after.jpg',1)"
> />
> <img src="images/renovations_03-after.jpg"
alt="Thumbnail Photo 3"
> name="thumb3" width="100" height="75" id="thumb3"
>
onclick="MM_swapImage('mainImage','','images/renovations_03-after.jpg',1)"
> /></p>
>

"While executing applyBehavior in Swap image.htm, a JavaScript error occurred."

What should be a simple web update is turning into a nightmare. I can't select any of my images to apply onMouseOver Swap Image behaviors, and I keep getting the message above.
Can I just say right now that I hate Dreamweaver CS6 and what it's doing to this project?
Ugh!

Is this a plea for help or a rant?
Javascript Errors in CS4, CS5, CS6 (the whole enchilada of trouble shooting)
http://helpx.adobe.com/dreamweaver/kb/troubleshoot-javascript-errors-dreamweaver-cs4.html
Start with #4, #10 and #12
Nancy O.

Swap images while rolling over popup menu

Hello,
I've been playing with fireworks CS5 for some days now and made a first attempt on a website.
So far, i've made a navigation bar with two states in order to be able to add a simple roll over behavior, e.g. darkening text on rollover. I also have been able to make a dropdown menu (popup) via slices.
Then I decided to swap images when on nav bar headings. So far, so good.
When I did a preview in my browser, it appeared that as soon as I was leaving the nav bar, the image swapped back to the old setting. Perfect.
But when I did a mouse over on one of the dropdown menu's of the navigation bar, the image swapped back as well.. I've been trying, but didnt manage to find out how to fix this.
So, is there anyone here that knows if it is possible, and if so, how to keep images swapped to a second stage as long as the mouse is on the dropdown menu, but swaps back to the original state when leaving the dropdown and/or the navigation bar.
Thanks in advance,

Hi Bryan,
It may be possible to cheat and put this onto the button:
the option that you want is called TITLE.
if you set one of the other parameters (e.g. the label)
to be:
LABEL_TEXT" TITLE="TITLE_TEXT
basically when it adds the text onto the form it will wrap it in "
If it doesn't strip out the " from your text you should get your extra parameter.
it may slip past the portal checking.
I can't test it as I only have WebDB, but I have done something similar with javascript in WebDB.
good luck
Michael

Swap images works in preview but not in browser

Hi everyone,
I am attempting to get a swap images to work. It works in the preview window but not when I preview it in the browser. When I open it in a browser the states seem to "cycle" through really quickly in rapid succession. I have linked my png file for you to see. Any thoughts?
Thanks,
denbeck

Your swap image slice is set to Animated GIF. Change it in the Optimize panel to plain GIF or PNG 8
Jim Babbage

Linking to a swapped image...help

I'm trying to set up a page that has a rightside column of thumbnail images, which, when clickedon opens a larger image in another area. I have done this using swap image. That's all set up, but now I would like to link that larger image to a different page...one with zoomify to show large details. I can't find any way in DW cs4 to do that...the only way the swapped image appears is in Live View and in Vive View the image is unselectable.
Thanks for any help.

<div id="BigPic">
    <p id="box1"><a href="" id="box1link"><img src="http://barbarabaum.com/images/BBis760px.jpg" name="largePix" width="600" height="400" id="largePix" /></a></p>
    </div>
<div id="SmlPix">
<table width="240" border="0" cellpadding="10">
<tr>
    <td width="120" align="center" valign="top"><a href="javascript:;" onclick="MM_swapImage('largePix','','http://barbarabaum.com/images/1.jpg',1);document.getElementById('box1link').href='http://w ww.great-web-sights.com';" ondblclick="MM_swapImgRestore()"><img src="http://barbarabaum.com/images/small/1.jpg" name="cvr" width="100" height="39" border="0" class="pixBox" id="cvr" /></a></td>
    <td width="120" align="center" valign="top"><a href="javascript:;" onclick="MM_swapImage('largePix','','images/2.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="images/small/2 copy.jpg" width="100" height="100" border="0" class="pixBox" /></a></td>
</tr>
I must have done something wrong It's not going to your site. Do you see the problem? Thanks once again.

Two Swap Image Behaviors - Only One Swap Image Restore Works

How come?
I have a button image with a two swap image behaviors applied to it - a rollover for the OVER state and one behavior for a disjointed or "remote" rollover effect.
Both rollover effects work fine, but the disjointed or remote rollover effect does not return the button to it's original state. (I've determined this by removing the second or remote swap image behavior and testing it.)
Why doesn't this work?
All scripts are contained within the HTML page itself; no linked scripts are used.
Thanks!

Page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

</script>
<style type="text/css">

</style></head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('images/navigation_2_over-05.gif','images/navigation_2_over-06.g if','images/navigation_2_over-07.gif','images/navigation_over-08.gif','images/navigation_o ver-09.gif','images/navigation_over-10.gif','images/team.gif','images/forms.gif','images/e xport.gif','images/consulting.gif','images/programming.gif','images/contact.gif')">
<table width="792" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td width="792" height="126" colspan="2">
   <img id="index" src="images/index.gif" width="792" height="126" alt="" /></td>
</tr>
<tr>
<td width="792" height="34" colspan="2">
<table id="Table_01" width="792" height="34" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="34" height="34">
   <img src="images\navigation_2.gif" width="34" height="34" alt="" /></td>
<td width="426" height="34">
   <img src="images\navigation_2-02.gif" width="426" height="34" alt="" /></td>
<td width="105" height="34" id="title">
   <img src="images\blank.gif" alt="" name="blank" width="105" height="34" id="blank" /></td>
<td width="5" height="34">
   <img src="images\navigation_2-04.gif" width="5" height="34" alt="" /></td>
<td width="36" height="34">
   <img src="images\navigation_2-05.gif" alt="" width="36" height="34" id="Image1" onMouseOver="MM_swapImage('Image1','','images/navigation_2_over-05.gif',1);MM_swapImage(' blank','','images/team.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="32" height="34">
   <img src="images\navigation_2-06.gif" alt="" width="32" height="34" id="Image2" onMouseOver="MM_swapImage('Image2','','images/navigation_2_over-06.gif',1);MM_swapImage(' blank','','images/forms.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="31" height="34">
   <img src="images\navigation_2-07.gif" alt="" width="31" height="34" id="Image3" onMouseOver="MM_swapImage('Image3','','images/navigation_2_over-07.gif',1);MM_swapImage(' blank','','images/export.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="33" height="34">
   <img src="images\navigation_2-08.gif" alt="" width="33" height="34" id="Image4" onMouseOver="MM_swapImage('Image4','','images/navigation_over-08.gif',1);MM_swapImage('bl ank','','images/consulting.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="31" height="34">
   <img src="images\navigation_2-09.gif" alt="" width="31" height="34" id="Image5" onMouseOver="MM_swapImage('Image5','','images/navigation_over-09.gif',1);MM_swapImage('bl ank','','images/programming.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="42" height="34">
   <img src="images\navigation_2-10.gif" alt="" width="42" height="34" id="Image6" onMouseOver="MM_swapImage('Image6','','images/navigation_over-10.gif',1);MM_swapImage('bl ank','','images/contact.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="17" height="34">
   <img src="images\navigation_2-11.gif" width="17" height="34" alt="" /></td>
</tr>
</table>
td>
</tr>
<tr>
<td width="410" height="352">
   <img id="index003" src="images/index-03.gif" width="410" height="352" alt="" /></td>
<td width="382" height="352">
   <img id="index004" src="images/index-04.gif" width="382" height="352" alt="" /></td>
</tr>
<tr>
<td width="792" height="29" colspan="2">
   <img id="index005" src="images/index-05.gif" width="792" height="29" alt="" /></td>
</tr>
</table>
</body>
</html>
I can't publish the page and images until later tonight.
Thanks, as always.

Swap Image Looks fine in Firefox, not Safari? Can Javascript be an issue in Safari?

Hi, Im new to web design as you may guess.
I'm trying to put together a website navigation page with several swap image div tags. When I view the page in Firefox it looks fine, after the behavior is applied the page doesn't view at all in safari?
Can anyone please help with this?
I have used a lot of different images and styles (some of which are no longer relevant). Please see below for code -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</script>
</head>
<body bgcolor="#FFFFFF" onload="MM_preloadImages('images/CorpLitRollO.png','images/DisplayGraphRollO.png','images /BrandRollOai.png','images/AdvertProRollO.png','images/PackRollO.png','images/ConPhotoRoll O.png')">
<div id="Container">
<div id="IntroText">All Introductory text here<br />
and here<br />
and here.</div>
<div id="FeatherFan">
    <div class="DGOver" id="Display Graphics"> </div>
<img src="images/FeatherFan.png" alt="Feathers Green" name="Feathers" width="800" height="405" hspace="0" vspace="0" id="Feathers" /><img src="images/ConPhotoType.png" alt="Concept Photography" width="164" height="134" class="ConPhoto" id="Image6" onmouseover="MM_swapImage('Image6','','images/ConPhotoRollO.png',1)" onmouseout="MM_swapImgRestore()" /><img src="images/AdvertProType.png" alt="Advertising and Promotions" width="134" height="158" class="AdPromo" id="Image4" onmouseover="MM_swapImage('Image4','','images/AdvertProRollO.png',1)" onmouseout="MM_swapImgRestore()" /></div>
<div class="CorpType" id="CorpLitType" onmouseover="MM_swapImage('Image1','','images/CorpLitRollO.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/CorpLitType.png" alt="Corporate Literature" width="162" height="133" id="Image1" onmouseover="MM_swapImage('Image1','','images/CorpLitRollO.png',1)" onmouseout="MM_swapImgRestore()" /></div>
<div id="CorpRollO"><img src="images/CorpLitRollO.png" alt="corporate literature image" width="162" height="133" /></div>
<div class="DGOver" id="Display Graphics Image"><img src="images/DisplayGraphType.png" alt="Display Graphics" width="154" height="150" id="Image2" onmouseover="MM_swapImage('Image2','','images/DisplayGraphRollO.png',1)" onmouseout="MM_swapImgRestore()" /></div>
<div class="BOver" id="Branding"><img src="images/BrandType.png" alt="Branding" width="137" height="163" id="Image3" onmouseover="MM_swapImage('Image3','','images/BrandRollOai.png',1)" onmouseout="MM_swapImgRestore()" /></div>
<div class="Packaging" id="Packaging"></div>
</div>
<span class="Packaging"><img src="images/PackType.png" alt="Packaging" width="150" height="147" id="Image5" onmouseover="MM_swapImage('Image5','','images/PackRollO.png',1)" onmouseout="MM_swapImgRestore()" /></span>
</body>

becky ss wrote:
Hi, Im new to web design as you may guess.
Welcome to the forum. Please take a few moments to read How to get help quickly. As the advice on that page tells you, please upload your problem page to a website and provide the URL.
Since you're new to to forum, also take a moment to check out the Dreamweaver FAQ and bookmark it so you can find answers to common questions quickly.

Swap Image Thumbnail Borders In IE

I'm creating a web site and am using swap image on a Photo Gallery page. In Internet Explorer the thumbnails in the swap image function show blue borders. In Mozilla Firefox the borders display as light green and changing to rust when I hover over the thumbnail which is what I want.
Is there a work around to solve this problem in IE?
The web site being created is http://www.aspenmountaincabin.com/photos.html
Thank you.

Add the below css styles to your css stylesheet:
#mainContent a img {
border: 2px solid #cccc99;
#mainContent a:hover img {
border: 2px solid #996633;

Swap Image not working Except in IE

I am working on a class project, and we've just learned how
to do "swap image" on rollover. It's working beautifully when in
IE, but in Firefox it's not working at all and in Opera it's
working strangely (only when on the "edges" of the flash text not
when rolling over the flash text) Any ideas as to the problem? The
flash text rollover works (changes colors), but the "bubbles" are
supposed to swap images. BTW, I thought it might be a setting in my
browser disabling something, but the swap image on classmates'
sites show up fine.
http://198.86.244.3/drsimpson/WEB140/drsimpsongallery/
Thanks

I can't see what is the problem. :-(
Try replacing your flash buttons with plain gif images, it
works the same way and you will have much less code on your page. I
don't think the problem is there but you can always try.

How can I find out what is wrong with swap image in a library

I had a DW8 site that used a library item on many pages with the calls to the macromedia swap image function. Everything was fine.
I've now converted to CS5.5 and I find that:
a) When the library item is changed, the updated pages don't have proper local relative paths. Instead they have the exact path in the library item itself.
b) I can't detatch the library item from a page, I get:
An error occured while loading behavior "Swap Image" Please check this file and associated JavaScript files for errors.
When OK'd this is followed by
Dreamweaver encountered an improper argument.
I went back to DW8, forced a library update and everything was fine. I've checked and so far as I can see, the swap image funtion is identical in the DW8 and CS5.5 versions.
I don't know if a and b are related,

An example page with the associated files that might be involved in this
problem are copied into dummy files on the customer's site:
http://valeriewilding.co.uk/queens2.htm
http://valeriewilding.co.uk/vwqueens.js
http://valeriewilding.co.uk/topNavQueens.lbi
The equivalent working files (from DW8) on the site are
http://valeriewilding.co.uk/queens.htm
http://valeriewilding.co.uk/vw.js
The library file is not normally on the site and, if it was, it would be in
the library directory which could not normally be reached from the htdocs
folder. Going back to DW8 as a workaround has solved problem (a) - the path
error - but downloading these files into a CS5.5 environment should still
show problem (b), being unable to remove the attachment.
There is a second library item on the page, the bottom navigation, and this
can be detached without problem.
The folder structure on my PC is:
htdocs
--- queens2.htm
--- vwqueens.js
Library
--- TopNavQueens.lbi

Swapping images - need to change size

I am trying to create a disjointed rollover so that when I
click on a picture thumbnail in one frame, the full-size image
changes on another frame (it is for a photo website - there are
about 20 thunbnails on a page and a space for only one full-size
image).
It works perfectly fine with "Swap Images" behavior as long
as all full-size images are of the same size - you just set one of
the full-size images as an original as then swap images as you
click on different thumbnails. The problem I am struggling with is
that my full-size images are of different size - "Swap Images"
functions distorts them since it resizes all full-time images to
the same size. What is a solution?

You can do this many ways ways -
1. Don't use swap image - use Show/Hide layer instead. Have
the alternate
image in a hidden layer that is shown when the trigger is
'tickled'. Using
this method you can have images that are any dimension.
2. Use swap image, but remove the dimensions from the
original image's tag,
i.e., change this -
<img name="original" width="150" height="220" ...
to this -
<img name="original" ...
Now when you swap in your offsize image, there is no
predefined size to
change it to. Be aware that this method may well result in an
unpleasant
and undesirable 'rearrangement' of your page layout as it
adjusts to your
new image's dimensions.
3. Pad the smaller image with canvas background color on all
sides so that
all the images *are the same size*.
4. Use a SetTextofLayer (SetText of Element in CS3) behavior
to change the
image reference in a layer (or non-positioned container)
placed so that it
will show the desired larger image in the proper place.
5. Use the PVII ShowPic extension -
http://www.projectseven.com/
Take your pick....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ADoubov" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to create a disjointed rollover so that when
I click on a
>picture
> thumbnail in one frame, the full-size image changes on
another frame (it
> is for
> a photo website - there are about 20 thunbnails on a
page and a space for
> only
> one full-size image).
>
> It works perfectly fine with "Swap Images" behavior as
long as all
> full-size
> images are of the same size - you just set one of the
full-size images as
> an
> original as then swap images as you click on different
thumbnails. The
> problem
> I am struggling with is that my full-size images are of
different size -
> "Swap
> Images" functions distorts them since it resizes all
full-time images to
> the
> same size. What is a solution?
>

Swapping images/text question?

Hi, I am moving this question to this forum from general as I got a response suggesting that dynamic html could be the solution to my problem. Any guidance on how to set up the behaviour would be much appreciated.
The problem I have is that I have created a navigation menu using plain text that changes colour on hover and two images in different divs swap images. It all works fine using a standard behaviour but now the client has asked if I can also make the opposite work ie. when the user rolls over the image, then the text changes colour. Is this possible without creating the text elements as images and swapping them using a standard behaviour?
I am not very familiar with the capabilities of javascript so some guidance would be great.
The present draft site is here, so you can see the problem.
Many thanks
Richard

Hi Richard,
I suggest you to use javascript. I will try to give you a basic examle for this problem with a short explanation. Let's say you have the following html code
Here comes the default text of the elementThe image has the id of firstimage and the div#first will be the object where the text will swapped at onmouseover event.
The code above will catch the rollower event of the #firstimaged object and will make the ChangeTextofDivIdfirst javascript function run. With the used innerHTML property you may specify any html code instead of the 'the swapping text' .
Regards
Zoli

Having problems with swap image (roll over effect)

I am trying to do a roll over state (swap image) for a linked item on my mock up. I've done this for other pages in the same file, but for some reason on another page, when I build the second state, insert the slice, and create the swap image on the first state, it previews in the browser with just a white screen and the section that I sliced. How come it is showing a white page in lieu of my entire mock up with the roll over effect?

I am trying to do a roll over state (swap image) for a linked item on my mock up. I've done this for other pages in the same file, but for some reason on another page, when I build the second state, insert the slice, and create the swap image on the first state, it previews in the browser with just a white screen and the section that I sliced. How come it is showing a white page in lieu of my entire mock up with the roll over effect?

Transparent Image and swap image

When I Fix the Trasparent png issue that i have been having
my swap image doesnt work in IE with the png could someone please
help?

link to your page?
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: DMX 2004: The Complete Reference, DMX 2004:
A Beginner''s
Guide, Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"Monarky2000" <[email protected]> wrote in
message
news:ep8631$has$[email protected]..
> When I Fix the Trasparent png issue that i have been
having my swap image
> doesnt work in IE with the png could someone please
help?

Pic Ratio and Swap Image Behaviour

Alrite guys, iv been picking up my web design skills by
developing my own site, and as part of that iv design a gallery
with thumbnails circling a central picture. now iv used the swap
image behaviour to change the thumnail to the central large pic,
unfortunatly the pictures are stretching to the limit of the slice,
is their anyway to fix the ratio of all the pics am using so they
come up in their original size rather than being stretched beyond
the original?
Cheers
Dark

You can do this many ways ways -
1. Don't use swap image - use Show/Hide layer instead. Have
the alternate
image in a hidden layer that is shown when the trigger is
'tickled'. Using
this method you can have images that are any dimension.
2. Use swap image, but remove the dimensions from the
original image's tag,
i.e., change this -
<img name="original" width="150" height="220" ...
to this -
<img name="original" ...
Now when you swap in your offsize image, there is no
predefined size to
change it to. Be aware that this method may well result in an
unpleasant
and undesirable 'rearrangement' of your page layout as it
adjusts to your
new image's dimensions.
3. Pad the smaller image with canvas background color on all
sides so that
all the images *are the same size*.
4. Use a SetTextofLayer behavior to change the image
reference in a layer
positioned so that it will show the desired larger image in
the proper
place.
5. Use the PVII ShowPic extension -
http://www.projectseven.com/
Take your pick....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Dark7722" <[email protected]> wrote in
message
news:fusck6$of2$[email protected]..
> the issue iv got is not the large images being reduced
(am quite happy to
> crop
> them to fit) but the much smaller images being stretched
from a horizontal
> rectangle to a much large vertical rectangle, their a
different shape from
> the
> central image to begin with
>

Swap image

Similar Messages

Maybe you are looking for