"swap image" behaviour

Hi,
Could anyone help me with the following code:
When the mouse rolls over my thumnail images the picture in
the centre changes.
All of them work apart from a picture that is bigger that and
has a scroll bar. This picture will not appear.
Is it because behaviour "swap image" doesn't work on images
that require a scroll bar?
I'd appreciate anyones help.
Rich
<div id="thumb_04"> is the problem one. The code is
below:
<div id="thumbnails">
<div id="thumb_01"><img
src="../skateboard/00_thumbs/th_skateboard_01.jpg" alt="pic_01"
name="pic_01" width="113" height="80" id="pic_01"
onmouseover="MM_swapImage('main_pic_01','','../skateboard/01_large/lg_skateboard_01.jpg', 1)"
/></div>
<div id="thumb_02"><img
src="../skateboard/00_thumbs/th_skateboard_02.jpg" alt="pic_02"
name="pic_02" width="113" height="80" id="pic_02"
onmouseover="MM_swapImage('main_pic_01','','../skateboard/01_large/lg_skateboard_02.jpg', 1)"
/></div>
<div id="thumb_03"><img
src="../skateboard/00_thumbs/th_skateboard_03.jpg" alt="pic_03"
name="pic_03" width="113" height="80" id="pic_03"
onmouseover="MM_swapImage('main_pic_01','','../skateboard/01_large/lg_skateboard_03.jpg', 1)"
/></div>
<div id="thumb_04"><img
src="../skateboard/00_thumbs/th_skateboard_04.jpg" alt="pic_04"
name="pic_04" width="113" height="80" id="pic_04"
onmouseover="MM_swapImage('main_pic_scroll','','../skateboard/01_large/lg_skateboard_04.j pg',1)"
/></div>
<div id="thumb_05"><img
src="../skateboard/00_thumbs/th_skateboard_05.jpg" alt="pic_05"
name="pic_05" width="113" height="80" id="pic_05"
onmouseover="MM_swapImage('main_pic_01','','../skateboard/01_large/lg_skateboard_05.jpg', 1)"
/></div>
<div id="thumb_06"><img
src="../skateboard/00_thumbs/th_skateboard_06.jpg" alt="pic_06"
name="pic_06" width="113" height="80" id="pic_06"
onmouseover="MM_swapImage('main_pic_01','','../skateboard/01_large/lg_skateboard_06.jpg', 1)"
/></div>
</div>

> Is it because behaviour "swap image" doesn't work on
images that require a
> scroll bar?
An image is an image. So, no.
Can you post a link to the page, please?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"snowboardingrich" <[email protected]> wrote
in message
news:f573k5$jsc$[email protected]..
> Hi,
> Could anyone help me with the following code:
> When the mouse rolls over my thumnail images the picture
in the centre
> changes.
> All of them work apart from a picture that is bigger
that and has a scroll
> bar. This picture will not appear.
> Is it because behaviour "swap image" doesn't work on
images that require a
> scroll bar?
>
> I'd appreciate anyones help.
> Rich
>

Similar Messages

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 behaviour mis-behaving

Hi All
Not sure whats happening here, returned to FW CS5 after a few months of doing other things and I cant seem to get the swap image behaviour to function...
Well thats not quite right, it does but the wrong way round...
If I have state one green square and state two red square and I place a slice over green square on state one and add the swap image behaviour and select the corresponding slice area in state two, when I press F12 you'd expect to see the green square which would turn rd on mouse over - wrong, I get the red square and if I mouse over if flickers green.
FW is showing me whats on state two...
CS5 Win764
Tony

Genius - never thought to check animated gif export bit and never realised you could have all the swap images on one state!
I guess because there are less states the page will load quicker?
Many thanks for your time and patience
Tony

Javascript swap images help

hi
i used the swap images behaviour for a gallery i am making
and the result is that he smallimages have blue borders around them
how can i get rid of this without losing functionality
cheers Link

If you don't want any of your linked images to have a border,
put this into
your CSS
a img { border: 0; }
Jo
"talknaija" <[email protected]> wrote in
message
news:gcl5qr$mkr$[email protected]..
> hi
> i used the swap images behaviour for a gallery i am
making and the result
> is
> that he smallimages have blue borders around them how
can i get rid of
> this
> without losing functionality
>
> cheers Link
>

How to apply Swap Image Restore for only one behaviour?

Hi, I have two behaviors for one hotspot..
the first, swaps another image on mouse over..
the second, swaps another image on click..
So, i want the "swap image restore" behaviour to apply only for the first, Is there a way to do that? cuz when i try it applies to both.

@ NancyO
I am trying to do the same thing as Magdi_alafifi - I have two swapImages on click that I want to stay and then another swapImage on mouseover with a "swap image restore" on mouse out.
Here is my code:
<img src="360.png" width="26" height="26" id="Image5" onclick="MM_swapImage('InnerSS','','innersolarsystemON.png',1);
MM_swapImage('outerSS','','outersolarsystemON.png',1)" onmouseover="MM_swapImage('Image5','','360ON.png',1)" onmouseout="MM_swapImgRestore('Image5','','360.png',1)" />
The first swapImage on click works fine, but the second one swaps on click, and resores on mouseout. The swapImage and swapImgRestore on mouseover and mouseout works fine.
I hope this makes sence.

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

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.

"swap image" behaviour

Similar Messages

Maybe you are looking for