Image Swap or Rolloover Image?

I am working in CS3 DreamWeaver and trying to make a gallery
of smaller images that show a larger version of the image when the
mouse rolls over it. What is the best way to accomplish this? The
smaller buttons are in a row and the larger image shows at right in
a different box.
thanks

The best way (in my opinion) is shown here (using the SetText
behavior in
DW) -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
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
==================
"shasta540" <[email protected]> wrote in
message
news:go9c79$9nq$[email protected]..
>I am working in CS3 DreamWeaver and trying to make a
gallery of smaller
>images
> that show a larger version of the image when the mouse
rolls over it. What
> is
> the best way to accomplish this? The smaller buttons are
in a row and the
> larger image shows at right in a different box.
>
> thanks
>

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>
>

Image swap not working in IE

I have set up an image gallery using image swap in the behaviours window. It only shows a thin line where the large picture should be in IE. It does work in all the other browsers.
Please help.

Welcome to the Forum.
We can't help much without seeing your problem page.
Please post a link to your online page.

Image swap glitch

Okay, I've got a glitch with an image swap. There are sopmething like a half a dozen pages in the site rebuild that have image swaps and none of the other have any problems. But this one has managed to find a glitch and likes it so much it won't let go.
I've got the usual table arangement (as in the Classroom in a Book chapter 10 lesson) with the base image in one cel and the links in the others. There are three images that swap out with the main one. I'm using the behavior of clicking on the link to swap the image, not a MouseOver. People are supposed to look at the images, and then if they feel like it they can put the base image back by clicking on that link.
No problem with the first image. No problem with the 2nd. No problem with restoring the original image.
But. No matter how many times I've relinked the 3rd image, clicking on it in a browser gives me a blnk browser page with a message claiming that the image does not exist. When I hit the back button to get back to the page, there is the image right where it is supposed to be. So clearly the code is finding it, but it's sending out a false alert first.
I am assuming that the glitch is in the code, but I don't know enough about code to know what I am supposed to be looking for to find it.
Any pointers?
J. Odell

I went back and hunted through it again and found the problem. Somehow the code was putting a '3' where there ought to have been a hashtag. No idea why it was doing that, but once I replaced it with a hashtag the problem went away.
I'd relinked it a half a dozen times, so it evidently really liked that glitch.
BTW, can you give me any pointers on how you adjust the spacing between paragraphs? two full lines is more than really needed to make the distinction between paragraphs. The version of CSS that GoLive 8 used recognized a setting for adding something like one and a half lines between them. But if that's still in there I don't know what they call it these days. I would assume that it would be in the Block settings along with the justification, but nothing in there looks right.

How do I swap an image in one cell by clicking a link in another?

In a website I'm designing I have typed a "+" in one table cell. Next to that cell is another cell containing a jpg. I want the viewer to be able to click on the "+" and have the image in the other cell change to another image. I have several stacked, side-by-side cells I'd like to apply this technique to. For some paired cells I may only want to swap out 1 other image, but other paired cells might have 3 or 4 images I'd like the viewer to view by additional clicks on the +.

Check this thread -
http://forums.adobe.com/message/2998440#2998440

Swapping multiple images with 1 rollover

Hi everybody!
I am just wondering if the Dreamweaver swapImage() function can be used for swapping several id's images when one does a single rollover/click/mouseOver/mouseOut/whatEver.......?
In general how would one do something like that?
For example , if I have have several items on a page and you want to have a dedicated button for swapping them all, how would you do that?
I am forever greatful for general feedback :-)

Hey, and thank you for you for fast reply :-)
Here is the code for the homepage:
<!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>Generative Design Tooling</title>
<link href="oneColLiqCtr.css" rel="stylesheet" type="text/css" />
<Script type="text/javascript" src="Javascript Cookie Script.js"></Script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
function MM_setTextOfLayer(objId,x,newText) { //v9.0
with (document) if (getElementById && ((obj=getElementById(objId))!=null))
    with (obj) innerHTML = unescape(newText);
</script>
<style type="text/css">
a:link {
    text-decoration: none;
a:visited {
    text-decoration: none;
a:hover {
    text-decoration: none;
a:active {
    text-decoration: none;
</style>
</head>
<body onload="MM_preloadImages('images/HomeButton_03.png','images/HomeMainBlank2_03.png','images/LitteratureBlank2_75.png','images/FlashMenuButton_21.png','images/BlogBlankM_07.png','images/HomeButton_03.png','images/bloggingButtonN_07_07.png','images/homeFill_06.png','images/homeFill_06.png','images/toolingFill_08.png','images/homeFilled_06.png','images/toolingFilled_08.png','images/flashFilled_12.png','images/blogFilled_10.png','images/introFilled_20.png','images/vectorsFilled_21.png','images/lsystemsFilled_23.png','images/recursivityFilled_28.png','images/animgrowthFilled_30.png','images/linksFilled_51.png','images/algFilled_41.png','images/artificialFilled_43.png','images/mayaFilled_48.png','images/fractalsFilled_46.png','images/turtleFilled_53.png','images/alifeFilled_55.png','images/pluginsFilled_81.png','images/extraFilled_81.png','images/designpFilled_71.png','images/disclaimerFilled_73.png','images/projectsFilled_83.png','images/litteratureFilled_85.png','images/emergentFilled_64.png','images/footerFilled_87.png','images/headerFilled_06.png','images/vectorFilled2_21.png','images/genr8Filled_32.png','images/ToolingButtonBlank2_08.png','images/ToolingButtonMainN_05.png','images/DisclaimerBlank2_60.png','images/ProjectsBlank2_73.png','images/bloggingButtonN_07_07.png','images/flashBack.png','images/LitteratureN_99.png','images/PluginsBlank2_71.png','images/PluginsN_95.png','images/aboutSmallBlack_87.png','images/aboutSmall_87.png','images/ProjectsN_97.png','images/IntroMainN_15.png','images/IntroMainBlank2_12.png','images/LinksBlank2_42.png','images/Links_61.png','images/DesignPBlank2_58.png','images/DesignPN_85.png','images/RecursivityBlank2_23.png','images/RecursivityN_30.png','images/Genr8Blank2_27.png','images/Genr8N_34.png','images/fractalBlack_20.png','images/fractalMain_20.png','images/LSystemsBlank2_03.png','images/LSystems_03.png','images/GVectorsBlank2_12.png','images/GVectorsN_21.png','images/Disclaimer_46.png','images/SkyscrapersBlank2_50.png','images/Buildings_73.png','images/MayaApiBlank2_39.png','images/MayaApiN_54.png','images/MapGrammarsBlank2_34.png','images/MapGrammarsBlank_21_20.png','images/sharewareBlack_62.png','images/SharewareN_75.png','images/fractalBlack_46.png','images/AnimGrowthN_32.png','images/SiteCreditsBlank2_62.png','images/SiteCredits_48.png','images/googleBlack_43.png','images/googleSearch_43.png','images/ArtificialBlank_46.png','images/Artificial_32.png','images/EmergentBlank2_64.png','images/EmergentN_77.png','images/Generative7_41.png','images/AlgsN_43.png','images/turtleBlack_53.png','images/TurtleGN_63.png','images/RolloutAllBlack_72.png')">
<div id="wrapper">
<div id="homebutton"><a href="index.html" onclick="Set_Cookie('homebutton','TRUE','','','','')" onmouseover="MM_swapImage('homebutton','','images/HomeButton_03.png',1)"><img src="images/HomeMainBlank2_03.png" alt="HomeMain" name="homebutton" width="138" height="55" border="0" id="homebutton2" /></a></div>
<div id="toolingMain"><a href="Tooling.html" onclick="Set_Cookie('tooling','TRUE','','','','')" onmouseover="MM_swapImage('toolingMain','','images/ToolingButtonMainN_05.png',1)"><img src="images/ToolingButtonBlank2_08.png" alt="ToolingButtonMain" name="toolingMain" width="140" height="55" border="0" id="toolingMain2" /></a></div>
<div id="blogMain"><a href="Blogging.html" onclick="Set_Cookie('blog','TRUE','','','','')" onmouseover="MM_swapImage('blogMain','','images/bloggingButtonN_10.png',1)"><img src="images/BlogBlankM_07.png" name="blogMain" width="138" height="55" border="0" id="blogMain2" /></a></div>
<div id="flashButtonTWO"><a href="FillingIn4.html" target="_self" onclick="Set_Cookie('flashButton','TRUE','','','','')" onmouseover="MM_swapImage('flashButtonTWO','','images/AnimasjonFlashBLiten.gif',1)"><img src="images/flashBack.png" name="flashButtonTWO" width="125" height="55" border="0" id="flashButtonTWO2" /></a></div>
<div id="Litterature"><a href="Litterature.html" onclick="Set_Cookie('litter','TRUE','','','','')" onmouseover="MM_swapImage('Litterature','','images/LitteratureN_99.png',1)"><img src="images/LitteratureBlank2_75.png" alt="Litterature" name="Litterature" width="156" height="55" border="0" id="Litterature2" /></a></div>
<div id="Plugins"><a href="Plugins.html" onclick="Set_Cookie('plug','TRUE','','','','')" onmouseover="MM_swapImage('Image41','','images/PluginsN_95.png',1)"><img src="images/PluginsBlank2_71.png" name="Image41" width="113" height="55" border="0" id="Image41" /></a></div>
<div id="About"><a href="About.html" onclick="Set_Cookie('About','TRUE','','','','')" onmouseover="MM_swapImage('About','','images/aboutSmall_87.png',1)"><img src="images/aboutSmallBlack_87.png" alt="AboutInfo" name="About" width="100" height="55" border="0" id="About2" /></a></div>
<div id="Projects"><a href="#" onclick="Set_Cookie('Project','TRUE','','','','')" onmouseover="MM_swapImage('Projects','','images/ProjectsN_97.png',1)"><img src="images/ProjectsBlank2_73.png" alt="Projects" name="Projects" width="124" height="55" border="0" id="Projects2" /></a></div>
<div id="IntroButton"><a href="IntroPage.html" target="_self" onclick="Set_Cookie('intro','TRUE','','','','')" onmouseover="MM_swapImage('IntroButton','','images/IntroMainNGrey_22.png',1)"><img src="images/IntroMainBlank2_12.png" alt="IntroButton" name="IntroButton" width="138" height="55" border="0" id="IntroButton2" /></a></div>
<div id="Links"><a href="Links.html" target="_self" onclick="Set_Cookie('link','TRUE','','','','')" onmouseover="MM_swapImage('Links','','images/LinksGrey_63.png',1)"><img src="images/LinksBlank2_42.png" alt="Links" name="Links" width="119" height="55" border="0" id="Links2"/></a></div>
<div id="DesignP"><a href="DesignParadigm.html" onclick="Set_Cookie('designpa','TRUE','','','','')" onmouseover="MM_swapImage('DesignP','','images/DesignPN_85.png',1)"><img src="images/DesignPBlank2_58.png" alt="DesignParadigm" name="DesignP" width="208" height="55" border="0" id="DesignP2" /></a></div>
<div id="Recursivity"><a href="#" onclick="Set_Cookie('recurse','TRUE','','','','')" onmouseover="MM_swapImage('Recursivity','','images/RecursivityN_36.png',1)"><img src="images/RecursivityBlank2_23.png" alt="Recursivity" name="Recursivity" width="208" height="55" border="0" id="Recursivity2" /></a></div>
<div id="Genr8"><a href="Genr8Page.html" onclick="Set_Cookie('generate','TRUE','','','','')" onmouseover="MM_swapImage('Genr8','','images/Genr8N_40.png',1)"><img src="images/Genr8Blank2_27.png" alt="Genr8" name="Genr8" width="93" height="55" border="0" id="Genr" /></a></div>
<div id="Fractals"><a href="http://classes.yale.edu/fractals/" onclick="Set_Cookie('frac','TRUE','','','','')" onmouseover="MM_swapImage('Fractals','','images/fractalMain_20.png',1)"><img src="images/fractalBlack_20.png" alt="Fractals" name="Fractals" width="138" height="55" border="0" id="Fractals2" /></a></div>
<div id="LSystems"><a href="LSystems.html" onclick="Set_Cookie('lsys','TRUE','','','','')" onmouseover="MM_swapImage('LSystems','','images/LSystems_03.png',1)"><img src="images/LSystemsBlank2_03.png" alt="LindenmayerSystems" name="LSystems" width="158" height="55" border="0" id="LSystems2" /></a></div>
<div id="GVectors"><a href="http://chortle.ccsu.edu/VectorLessons/vectorIndex.html" target="_new" onclick="Set_Cookie('vector','TRUE','','','','')" onmouseover="MM_swapImage('GVectors','','images/GVectorsN_21.png',1)"><img src="images/GVectorsBlank2_12.png" alt="GeometricVectors" name="GVectors" width="241" height="55" border="0" id="GVectors2" /></a></div>
<div id="SiteCred"><a href="siteCredits.html" onclick="Set_Cookie('credits','TRUE','','','','')" onmouseover="MM_swapImage('SiteCred','','images/SiteCreditsGrey_94.png',1)"><img src="images/SiteCreditsBlank2_62.png" alt="SiteCredits" name="SiteCred" width="168" height="55" border="0" id="SiteCred2" /></a></div>
<div id="Skyscrapers"><a href="Buildings.html" onclick="Set_Cookie('sky','TRUE','','','','')" onmouseover="MM_swapImage('Skyscrapers','','images/Buildings_73.png',1)"><img src="images/SkyscrapersBlank2_50.png" alt="Highrises" name="Skyscrapers" width="160" height="55" border="0"id="Skyscrapers2" /></a></div>
<div id="MayaApi"><a href="MAYA C++ API.html" onclick="Set_Cookie('maya','TRUE','','','','')" onmouseover="MM_swapImage('MayaApi','','images/MayaApiN_54.png',1)"><img src="images/MayaApiBlank2_39.png" alt="AutodeskMayaC++Api" name="MayaApi" width="223" height="55" border="0" id="MayaApi2" /></a></div>
<div id="MappingGrammars"><a href="#" onclick="Set_Cookie('map','TRUE','','','','')" onmouseover="MM_swapImage('MappingGrammars','','images/MapGrammars_21_20.png',1)"><img src="images/MapGrammarsBlank2_34.png" alt="MapGrammars" name="MappingGrammars" width="279" height="55" border="0" id="MappingGrammars2" /></a></div>
<div id="ShareWare"><a href="#" onclick="Set_Cookie('openSource','TRUE','','','','')" onmouseover="MM_swapImage('shareWare','','images/SharewareNGrey_63.png',1)"><img src="images/sharewareBlack_62.png" alt="openSource" name="shareWare" width="162" height="55" border="0" id="shareWare2" /></a></div>
<div id="Algorithms"><a href="#" onclick="Set_Cookie('algo','TRUE','','','','')" onmouseover="MM_swapImage('Algorithms','','images/AlgsN_43.png',1)"><img src="images/Generative7_41.png" alt="Algorithms" name="Algorithms" width="181" height="55" border="0" id="Algorithms2" /></a></div>
<div id="artificialFill"><a href="GoogleCustomSearch.html" onclick="Set_Cookie('artiFill','TRUE','','','','')" onmouseover="MM_swapImage('filledArtificial','','images/googleSearch_43.png',1)"><img src="images/googleBlack_43.png" name="filledArtificial" width="287" height="55" border="0" id="filledArtificial" /></a></div>
<div id="Artificial"><a href="#" onclick="Set_Cookie('arti','TRUE','','','','')" onmouseover="MM_swapImage('Artificial','','images/Artificial_32.png',1)"><img src="images/ArtificialBlank_46.png" alt="ArtificialLife" name="Artificial" width="183" height="55" border="0" id="Artificial2" /></a></div>
<div id="EmergentD"><a href="#" onclick="Set_Cookie('EmergentDes','TRUE','','','','')" onmouseover="MM_swapImage('EmergentDes','','images/EmergentN_77.png',1)"><img src="images/EmergentBlank2_64.png" alt="EmergentDesign" name="EmergentDes" width="227" height="55" border="0" id="EmergentD2" /></a></div>
<div id="AnimGrowth"><a href="#" onclick="Set_Cookie('anim','TRUE','','','','')" onmouseover="MM_swapImage('AnimGrowth','','images/AnimGrowthN_32.png',1)"><img src="images/fractalBlack_46.png" alt="AnimatingGrowth" name="AnimGrowth" width="245" height="55" border="0" id="AnimGrowth2" /></a></div>
<div id="TurtleG"><a href="TurtleGraphics.html" onclick="Set_Cookie('turtle','TRUE','','','','')" onmouseover="MM_swapImage('TurtleG','','images/TurtleGN_63.png',1)"><img src="images/turtleBlack_53.png" alt="TurtleGraphics" name="TurtleG" width="240" height="55" border="0" id="TurtleG2" /></a></div>
<div id="Disclaimer"><a href="Disclaimer.html" onclick="Set_Cookie('Disclaimed','TRUE','','','','')" onmouseover="MM_swapImage('Disclaimed','','images/DisclaimerGrey_92.png',1)"><img src="images/DisclaimerBlank2_60.png" alt="Disclaimer" name="Disclaimed" width="154" height="55" border="0" id="Disclaimer2" /></a></div>
<div id="vectorsFill"><a href="#" onclick="Set_Cookie('vectorFill','TRUE','','','','')" onmouseover="MM_swapImage('filledVectors','','images/vectorsFilledParametric_21.png',1)"><img src="images/vectorsFill_21.png" name="filledVectors" width="248" height="55" border="0" id="filledVectors" /></a></div>
<div id="introFill"><a href="#" onclick="Set_Cookie('introFilled','TRUE','','','','')" onmouseover="MM_swapImage('filledIntro','','images/introFilled_20.png',1)"><img src="images/introFill2_20.png" name="filledIntro" width="138" height="55" border="0" id="filledIntro" /></a></div>
<div id="lsystemFill"><a href="#" onclick="Set_Cookie('lsysFill','TRUE','','','','')" onmouseover="MM_swapImage('filledLsystems','','images/lsystemsFilled_23.png',1)"><img src="images/lsystemsFill_23.png" name="filledLsystems" width="160" height="55" border="0" id="filledLsystems" /></a></div>
<div id="emergentFill"><a href="#" onclick="Set_Cookie('emergentFill','TRUE','','','','')" onmouseover="MM_swapImage('filledEmergent','','images/emergentFilled_79.png',1)"><img src="images/emergentFill_64.png" name="filledEmergent" width="227" height="55" border="0" id="filledEmergent" /></a></div>
<div id="blogFill"><a href="#" onclick="Set_Cookie('blogFill','TRUE','','','','')" onmouseover="MM_swapImage('filledBlog','','images/blogFilled_10.png',1)"><img src="images/blogFill_10.png" name="filledBlog" width="138" height="55" border="0" id="filledBlog" /></a></div>
<div id="extraFill"><a href="#" onclick="Set_Cookie('extraFill','TRUE','','','','')" onmouseover="MM_swapImage('filledExtra','','images/extraFilled_81.png',1)"><img src="images/extraFill_81.png" name="filledExtra" width="100" height="55" border="0" id="filledExtra" /></a></div>
<div id="homeF"><a href="#" onclick="Set_Cookie('homeFill','TRUE','','','','')" onmouseover="MM_swapImage('filled','','images/homeFilled_06.png',1)"><img src="images/homeFill_06.png" name="filled" width="138" height="55" border="0" id="filled" /></a></div>
<div id="VectorFillExtra"><a href="#" onclick="Set_Cookie('VectorFillExtra','TRUE','','','','')" onmouseover="MM_swapImage('filledVectorT','','images/vectorFilled2_21.png',1)"><img src="images/vectorFill2_21.png" name="filledVectorT" width="248" height="55" border="0" id="filledVectorT" /></a></div>
<div id="fractalFill"><a href="#" onclick="Set_Cookie('fractalFill','TRUE','','','','')" onmouseover="MM_swapImage('filledFractals','','images/fractalsFilled_46.png',1)"><img src="images/fractalsFill_46.png" name="filledFractals" width="208" height="55" border="0" id="filledFractals" /></a></div>
<div id="headerFill"><a href="#" onclick="Set_Cookie('headerFill','TRUE','','','','')" onmouseover="MM_swapImage('filledHeader','','images/headerFilled_06.png',1)"><img src="images/headerFill_06.png" name="filledHeader" width="138" height="55" border="0" id="filledHeader" /></a></div>
<div id="alifeFill"><a href="#" onclick="Set_Cookie('alifeFill','TRUE','','','','')" onmouseover="MM_swapImage('filledAlife','','images/alifeFilled_55.png',1)"><img src="images/alifeFill_55.png" name="filledAlife" width="185" height="55" border="0" id="filledAlife" /></a></div>
<div id="toolingF"><a href="#" onclick="Set_Cookie('toolingfilled','TRUE','','','','')" onmouseover="MM_swapImage('toolingfill','','images/toolingFilled_08.png',1)"><img src="images/toolingFill_08.png" name="toolingfill" width="126" height="55" border="0" id="toolingfill" /></a></div>
<div id="pluginsFill"><a href="#" onclick="Set_Cookie('pluginsFill','TRUE','','','','')" onmouseover="MM_swapImage('filledPlugins','','images/pluginsFilled_81.png',1)"><img src="images/pluginsFill_81.png" name="filledPlugins" width="121" height="55" border="0" id="filledPlugins" /></a></div>
<div id="recurFill"><a href="#" onclick="Set_Cookie('recurFill','TRUE','','','','')" onmouseover="MM_swapImage('filledRecur','','images/recursivityFilled_28.png',1)"><img src="images/recursivityFill_28.png" name="filledRecur" width="208" height="55" border="0" id="filledRecur" /></a></div>
<div id="animFill"><a href="#" onclick="Set_Cookie('animFill','TRUE','','','','')" onmouseover="MM_swapImage('filledAnim','','images/animgrowthFilled_30.png',1)"><img src="images/animgrowthFill_30.png" name="filledAnim" width="245" height="55" border="0" id="filledAnim" /></a></div>
<div id="algoFill"><a href="#" onclick="Set_Cookie('algoFill','TRUE','','','','')" onmouseover="MM_swapImage('filledAlgo','','images/algFilled_41.png',1)"><img src="images/algFill_41.png" name="filledAlgo" width="183" height="55" border="0" id="filledAlgo" /></a></div>
<div id="flashFill"><a href="#" onclick="Set_Cookie('flashFilled','TRUE','','','','')" onmouseover="MM_swapImage('filledFlash','','images/flashFilled_12.png',1)"><img src="images/flashFill_12.png" name="filledFlash" width="125" height="55" border="0" id="filledFlash" /></a></div>
<div id="linksFill"><a href="#" onclick="Set_Cookie('linksFill','TRUE','','','','')" onmouseover="MM_swapImage('filledLinks','','images/linksFilled_51.png',1)"><img src="images/linksFill_51.png" name="filledLinks" width="119" height="55" border="0" id="filledLinks" /></a></div>
<div id="litteratureFill"><a href="#" onclick="Set_Cookie('litteratureFill','TRUE','','','','')" onmouseover="MM_swapImage('filledLitterature','','images/litteratureFilled_85.png',1)"><img src="images/litteratureFill_85.png" name="filledLitterature" width="156" height="55" border="0" id="filledLitterature" /></a></div>
<div id="projectsFill"><a href="#" onclick="Set_Cookie('projectsFill','TRUE','','','','')" onmouseover="MM_swapImage('filledProjects','','images/projectsFilled_83.png',1)"><img src="images/projectsFill_83.png" name="filledProjects" width="126" height="55" border="0" id="filledProjects" /></a></div>
<div id="turtleFill"><a href="#" onclick="Set_Cookie('turtleFill','TRUE','','','','')" onmouseover="MM_swapImage('filledTurtle','','images/turtleFilled_53.png',1)"><img src="images/turtleFill_53.png" name="filledTurtle" width="238" height="55" border="0" id="filledTurtle" /></a></div>
<div id="mayaFill"><a href="#" onclick="Set_Cookie('mayaFill','TRUE','','','','')" onmouseover="MM_swapImage('filledMaya','','images/Refresh_49.png',1)"><img src="images/mayaFill_48.png" name="filledMaya" width="375" height="55" border="0" id="filledMaya" /></a></div>
<div id="disclaimerFill"><a href="#" onclick="Set_Cookie('disclaimerFill','TRUE','','','','')" onmouseover="MM_swapImage('filledDisclaimer','','images/disclaimerFilled_73.png',1)"><img src="images/disclaimerFill_73.png" name="filledDisclaimer" width="167" height="55" border="0" id="filledDisclaimer" /></a></div>
<div id="footerFill"><a href="#" onclick="Set_Cookie('footerFill','TRUE','','','','')" onmouseover="MM_swapImage('filledFooter','','images/footerFilled_87.png',1)"><img src="images/footerFill_87.png" name="filledFooter" width="127" height="55" border="0" id="filledFooter" /></a></div>
<div id="designpFill"><a href="#" onclick="Set_Cookie('designpFill','TRUE','','','','')" onmouseover="MM_swapImage('filledDesignp','','images/designpFilled_71.png',1)"><img src="images/designpFill_71.png" name="filledDesignp" width="268" height="55" border="0" id="filledDesignp" /></a></div>
</div>
<div id="viewAll"><a href="#" onclick="MM_swapImage('Image54','','images/RolloutAllBlack_72.png',1)"><img src="images/RolloutAll_72.png" name="Image54" width="208" height="55" border="0" id="Image54" /></a></div>
<script type="text/javascript">
if (Get_Cookie('plug')) { document.getElementById('Image41').src="images/PluginsN_95.png" ; }
if (Get_Cookie('homebutton')) { document.getElementById('homebutton2').src="images/HomeButton_03.png" ; }
if (Get_Cookie('search')) { document.getElementById('searchBox2').src="images/searchbox2_18.png" ; }
if (Get_Cookie('tooling')) { document.getElementById('toolingMain2').src="images/ToolingButtonMainN_05.png" ; }
if (Get_Cookie('homeF')) { document.getElementById('homeF2').src="images/homeFilled_06.png" ; }
if (Get_Cookie('flashButton')) { document.getElementById('flashButtonTWO2').src="images/AnimasjonFlashBLiten.gif" ; }
if (Get_Cookie('Disclaimer')) { document.getElementById('Disclaimer2').src="images/Disclaimer_46.png" ; }
if (Get_Cookie('About')) { document.getElementById('About2').src="images/aboutSmall_87.png" ; }
if (Get_Cookie('litter')) { document.getElementById('Litterature2').src="images/LitteratureN_99.png" ; }
if (Get_Cookie('sky')) { document.getElementById('Skyscrapers2').src="images/Buildings_73.png" ; }
if (Get_Cookie('arti')) { document.getElementById('Artificial2').src="images/Artificial_32.png" ; }
if (Get_Cookie('intro')) { document.getElementById('IntroButton2').src="images/IntroMainNGrey_22.png" ; }
if (Get_Cookie('vector')) { document.getElementById('GVectors2').src="images/GVectorsN_21.png" ; }
if (Get_Cookie('lsys')) { document.getElementById('LSystems2').src="images/LSystems_03.png" ; }
if (Get_Cookie('recurse')) { document.getElementById('Recursivity2').src="images/RecursivityN_36.png" ; }
if (Get_Cookie('anim')) { document.getElementById('AnimGrowth2').src="images/AnimGrowthN_32.png" ; }
if (Get_Cookie('generate')) { document.getElementById('Genr').src="images/Genr8N_40.png" ; }
if (Get_Cookie('algo')) { document.getElementById('Algorithms2').src="images/AlgsN_43.png" ; }
if (Get_Cookie('map')) { document.getElementById('MappingGrammars2').src="images/MapGrammars_21_20.png" ; }
if (Get_Cookie('blog')) { document.getElementById('blogMain2').src="images/bloggingButtonN_10.png" ; }
if (Get_Cookie('frac')) { document.getElementById('Fractals2').src="images/fractalMain_20.png" ; }
if (Get_Cookie('maya')) { document.getElementById('MayaApi2').src="images/MayaApiN_54.png" ; }
if (Get_Cookie('link')) { document.getElementById('Links2').src="images/LinksGrey_63.png" ; }
if (Get_Cookie('turtle')) { document.getElementById('TurtleG2').src="images/TurtleGN_63.png" ; }
if (Get_Cookie('EmergentDes')) { document.getElementById('EmergentD2').src="images/EmergentN_77.png" ; }
if (Get_Cookie('openSource')) { document.getElementById('shareWare2').src="images/SharewareNGrey_63.png" ; }
if (Get_Cookie('credits')) { document.getElementById('SiteCred2').src="images/SiteCreditsGrey_94.png" ; }
if (Get_Cookie('Project')) { document.getElementById('Projects2').src="images/ProjectsN_97.png" ; }
if (Get_Cookie('Disclaimed')) { document.getElementById('Disclaimer2').src="images/DisclaimerGrey_92.png" ; }
if (Get_Cookie('designpa')) { document.getElementById('DesignP2').src="images/DesignPN_85.png" ; }
if (Get_Cookie('toolingfilled')) { document.getElementById('toolingfill').src="images/toolingFilled_08.png" ; }
if (Get_Cookie('homeFill')) { document.getElementById('filled').src="images/homeFilled_06.png" ; }
if (Get_Cookie('flashFilled')) { document.getElementById('filledFlash').src="images/flashFilled_12.png" ; }
if (Get_Cookie('blogFill')) { document.getElementById('filledBlog').src="images/blogFilled_10.png" ; }
if (Get_Cookie('introFilled')) { document.getElementById('filledIntro').src="images/introFilled_20.png" ; }
if (Get_Cookie('vectorFill')) { document.getElementById('filledVectors').src="images/vectorsFilledParametric_21.png" ; }
if (Get_Cookie('lsysFill')) { document.getElementById('filledLsystems').src="images/lsystemsFilled_23.png" ; }
if (Get_Cookie('recurFill')) { document.getElementById('filledRecur').src="images/recursivityFilled_28.png" ; }
if (Get_Cookie('animFill')) { document.getElementById('filledAnim').src="images/animgrowthFilled_30.png" ; }
if (Get_Cookie('genr8Fill')) { document.getElementById('filledGenr8').src="images/genr8Filled_32.png" ; }
if (Get_Cookie('linksFill')) { document.getElementById('filledLinks').src="images/linksFilled_51.png" ; }
if (Get_Cookie('algoFill')) { document.getElementById('filledAlgo').src="images/algFilled_41.png" ; }
if (Get_Cookie('artiFill')) { document.getElementById('filledArtificial').src="images/googleSearch_43.png" ; }
if (Get_Cookie('mayaFill')) { document.getElementById('filledMaya').src="images/mayaFilled_48.png" ; }
if (Get_Cookie('fractalFill')) { document.getElementById('filledFractals').src="images/fractalsFilled_46.png" ; }
if (Get_Cookie('turtleFill')) { document.getElementById('filledTurtle').src="images/turtleFilled_53.png" ; }
if (Get_Cookie('alifeFill')) { document.getElementById('filledAlife').src="images/alifeFilled_55.png" ; }
if (Get_Cookie('pluginsFill')) { document.getElementById('filledPlugins').src="images/pluginsFilled_81.png" ; }
if (Get_Cookie('extraFill')) { document.getElementById('filledExtra').src="images/extraFilled_81.png" ; }
if (Get_Cookie('designpFill')) { document.getElementById('filledDesignp').src="images/designpFilled_71.png" ; }
if (Get_Cookie('disclaimerFill')) { document.getElementById('filledDisclaimer').src="images/disclaimerFilled_73.png" ; }
if (Get_Cookie('litteratureFill')) { document.getElementById('filledLitterature').src="images/litteratureFilled_85.png" ; }
if (Get_Cookie('projectsFill')) { document.getElementById('filledProjects').src="images/projectsFilled_83.png" ; }
if (Get_Cookie('emergentFill')) { document.getElementById('filledEmergent').src="images/emergentFilled_64.png" ; }
if (Get_Cookie('emergentFill')) { document.getElementById('filledFooter').src="images/footerFilled_87.png" ; }
if (Get_Cookie('headerFill')) { document.getElementById('filledHeader').src="images/headerFilled_06.png" ; }
if (Get_Cookie('VectorFillExtra')) { document.getElementById('filledVectorT').src="images/vectorsFilled_21.png" ; }
</script>
</body>
</html>
All the id's here have imageSwaps, as you can see, but I also have an id outside the wrapper id that is supposed to be a "view all swapped" - button.
How would I start in terms of this show/hide on mouse -event ?

How to create a trigger 'onclick' on one image to change another image with swap?

I need some help with behavior 'onclick'.
I have a webpage which has a plat of several home lots. Next to the plat is a map of the general location of the town. What I want to do is this...
When the user "clicks" on a particular lot, the map picture will be swapped out for a picture of the view from that lot.
When the user "clicks" again on the view of the lot, the image will swap back to the map of the town location.
I have already done the map imaging for each of the lots. I have tried using the behaviors panel but when I choose "onclick" set my images and then test,
it always defaults to "mouseover". I don't want 'mouseover', I want click.
Here is my code so far.   Oh, I am using Dreamweaver CS6
Thank you so much for any information.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">




<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>toronto_creek_estates</title>

<link href="../../boilerplate.css" rel="stylesheet" type="text/css">
<link href="../../styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
          background-color: #F9F8F6;
background-image: url(file:///C|/Users/Kim/Documents/Kim's_New_PQH_website/Assets/Images/background_texture _blue159.jpg);
</style>
<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
a:hover {
          color: #009900;
</style>
<link href="../../homedetails.css" rel="stylesheet" type="text/css">


<script src="../../respond.min.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>


</head>
    <div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="../Images/newbannernewlogo.jpg" alt="NewbannerNewLogo"></div>
<div id="Navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li>
        <div><a href="#">Home</a> </div>
      </li>
      <li>
        <div><a href="#"> Home Plans</a></div>
      </li>
      <li>
        <div><a href="#">New Homes / Lots</a> </div>
      </li>
      <li>
        <div><a href="#">Gallery</a> </div>
      </li>
      <li>
        <div><a href="#">Financing</a> </div>
      </li>
      <li>
        <div><a href="#">About Us</a> </div>
      </li>
      <li>
        <div><a href="#">Contact Us</a> </div>
      </li>
    </ul>
</div>
<div id="tcepicturebanner"><img src="../Images/toronto_creek/toronto creek thin header2.jpg" alt="tcepicbanner"></div>
<div id="tcebanner">Toronto    Creek Estates</div>
<div id="tce_description">Surrounded by the peaceful majestic mountains of the great southwest resides a community like no other, Toronto Creek Estates.   At an elevation of over 4,500' above sea level   and situated just northwest of downtown Alpine, Texas, the climate, views, peaceful surroundings and lifestyle are like no other in the great state of Texas.<br>
<br>
Toronto Creek Estates was designed and developed with a mission to provide affordable quality homes within a quality community all nestled in a quiet country setting yet close to all the local conveniences. Some of the many great amenities offered include:
</div>
<div id="amenitiescol1">
<p>Spacious Lots</p>
<p>Paved Streets</p>
</div>
<div id="amenitiescol2">
<p>City Water & Sewer</p>
<p>Underground Utilities</p>
</div>
<div id="amenitiescol3">
<p>Beautiful Mountain Views</p>
<p>Covenants To Preserve Consistency</p>
</div>
<div id="tceplat"><img src="../Images/toronto_creek/kim new plat_final.jpg" alt="tceplat" usemap="#TCEplate" border="0">
<map name="TCEplate">
    <area shape="poly" coords="710,143,714,214,620,218,627,186" href="../Images/toronto_creek/Lot13.jpg" alt="lot_13_view">
    <area shape="poly" coords="613,218,612,257,710,259,712,214" href="../Images/toronto_creek/Lot14.jpg" alt="lot_14_view">
    <area shape="poly" coords="611,306" href="#">
    <area shape="poly" coords="713,305,709,347,612,347,613,306" href="../Images/toronto_creek/Lot16.jpg" alt="lot_16_view">
    <area shape="poly" coords="711,349,612,349,611,366,621,373,625,392,710,393" href="../Images/toronto_creek/Lot17.jpg">
    <area shape="poly" coords="625,393,709,394,710,484,617,410,621,404" href="../Images/toronto_creek/Lot18.jpg" alt="lot_18_view">
    <area shape="poly" coords="712,260,712,260,614,261,613,304,661,305,700,305,710,304" href="#" alt="model15map">
    <area shape="poly" coords="292,94,337,94,340,189,290,189" href="#" alt="lot6map">
    <area shape="poly" coords="484,98,532,108,533,189,487,188" href="#" alt="lot10map">
</map>
</div>
<div id="alpineintexasmap"><img src="../Images/toronto_creek/alpinetxmap.jpg" alt="alpinemapsm" name="alpinetxmap" width="327" height="263" id="alpinetxmap"></div>
<div id="LayoutDiv2"><iframe width="290" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&msid=210296110747849097579.0004d85c733f09892697e&ie= UTF8&t=m&ll=30.361026,-103.670425&spn=0.044436,0.051498&z=13&output=embed"></iframe><br />
<small>Click to view <a href="https://maps.google.com/maps/ms?msa=0&msid=210296110747849097579.0004d85c733f09892697e&ie= UTF8&t=m&ll=30.361026,-103.670425&spn=0.044436,0.051498&z=13&source=embed" style="color:#0000FF;text-align:left">Toronto Creek Estates, Alpine, Texas</a> in a larger map with directions.</small></div>
<div id="BottomNav">
    <div>
      <div>Home | Our Homes | Neighborhoods | Gallery | Financing | About Us | Contact Us </div>
    </div>
</div>
<div id="PriceAvail">
    <div>
      <div>Pricing and Availability are subject to change without notice</div>
    </div>
</div>
<div id="Footer">
    <div>
      <div>Copyright © 2013 PreferredQualityHomes.com, pqualityhomes.com, pqhhomes.com, & Preferred Quality Homes, L.L.C. All rights reserved. Last updated 10/31/12</div>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

I am too new I guess, because your link was not helpful at all. Maybe by looking at this you can help. With this code, I have a picture that swaps with pic of lot6 on mouseover and returns to orig. pic on mouseout. I have created a hotspot for each lot using image maps. I would like to have this happen. Mouseover lot6 hotspot to have images swap as they do here with this code.
Thanks for any help you can give.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">




<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>toronto_creek_estates</title>

<link href="../../boilerplate.css" rel="stylesheet" type="text/css">
<link href="../../styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
          background-color: #F9F8F6;
background-image: url(file:///C|/Users/Kim/Documents/Kim's_New_PQH_website/Assets/Images/background_texture _blue159.jpg);
</style>
<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
a:hover {
          color: #009900;
</style>
<link href="../../homedetails.css" rel="stylesheet" type="text/css">


<script src="../../respond.min.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>


<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onLoad="MM_preloadImages('../Images/toronto_creek/Lot6.jpg')"><div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="../Images/newbannernewlogo.jpg" alt="NewbannerNewLogo"></div>
<div id="Navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li>
        <div><a href="#">Home</a> </div>
      </li>
      <li>
        <div><a href="#"> Home Plans</a></div>
      </li>
      <li>
        <div><a href="#">New Homes / Lots</a> </div>
      </li>
      <li>
        <div><a href="#">Gallery</a> </div>
      </li>
      <li>
        <div><a href="#">Financing</a> </div>
      </li>
      <li>
        <div><a href="#">About Us</a> </div>
      </li>
      <li>
        <div><a href="#">Contact Us</a> </div>
      </li>
    </ul>
</div>
<div id="tcepicturebanner"><img src="../Images/toronto_creek/toronto creek thin header2.jpg" alt="tcepicbanner"></div>
<div id="tcebanner">Toronto    Creek Estates</div>
<div id="tce_description">Surrounded by the peaceful majestic mountains of the great southwest resides a community like no other, Toronto Creek Estates.   At an elevation of over 4,500' above sea level   and situated just northwest of downtown Alpine, Texas, the climate, views, peaceful surroundings and lifestyle are like no other in the great state of Texas.<br>
<br>
Toronto Creek Estates was designed and developed with a mission to provide affordable quality homes within a quality community all nestled in a quiet country setting yet close to all the local conveniences. Some of the many great amenities offered include:
</div>
<div id="amenitiescol1">
<p>Spacious Lots</p>
<p>Paved Streets</p>
</div>
<div id="amenitiescol2">
<p>City Water & Sewer</p>
<p>Underground Utilities</p>
</div>
<div id="amenitiescol3">
<p>Beautiful Mountain Views</p>
<p>Covenants To Preserve Consistency</p>
</div>
<div id="tceplat"><img src="../Images/toronto_creek/kim new plat_final.jpg" alt="tceplat" usemap="#TCEplate" border="0">
<map name="TCEplate">
    <area shape="poly" coords="710,143,714,214,620,218,627,186" alt="lot_13_view">
    <area shape="poly" coords="613,218,612,257,710,259,712,214" alt="lot_14_view">
    <area shape="poly" coords="611,306" href="#">
    <area shape="poly" coords="713,305,709,347,612,347,613,306" alt="lot_16_view">
    <area shape="poly" coords="711,349,612,349,611,366,621,373,625,392,710,393">
    <area shape="poly" coords="625,393,709,394,710,484,617,410,621,404" alt="lot_18_view">
    <area shape="poly" coords="712,260,712,260,614,261,613,304,661,305,700,305,710,304" href="keller_homepage.html" alt="model15map">
    <area shape="poly" coords="292,94,337,94,340,189,290,189" alt="lot6map">
    <area shape="poly" coords="484,98,532,108,533,189,487,188" href="#" alt="lot10map">
</map>
</div>
<div id="alpineintexasmap"><img src="../Images/toronto_creek/alpinetxmap.jpg" alt="alpinemapsm" name="alpinetxmap" width="327" height="263" id="alpinetxmap" onMouseOver="MM_swapImage('alpinetxmap','','../Images/toronto_creek/Lot6.jpg',1)" onMouseOut="MM_swapImgRestore()"></div>
<div id="LayoutDiv2"><iframe width="290" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&msid=210296110747849097579.0004d85c733f09892697e&ie= UTF8&t=m&ll=30.361026,-103.670425&spn=0.044436,0.051498&z=13&output=embed"></iframe><br />
<small>Click to view <a href="https://maps.google.com/maps/ms?msa=0&msid=210296110747849097579.0004d85c733f09892697e&ie= UTF8&t=m&ll=30.361026,-103.670425&spn=0.044436,0.051498&z=13&source=embed" style="color:#0000FF;text-align:left">Toronto Creek Estates, Alpine, Texas</a> in a larger map with directions.</small></div>
<div id="BottomNav">
    <div>
      <div>Home | Our Homes | Neighborhoods | Gallery | Financing | About Us | Contact Us </div>
    </div>
</div>
<div id="PriceAvail">
    <div>
      <div>Pricing and Availability are subject to change without notice</div>
    </div>
</div>
<div id="Footer">
    <div>
      <div>Copyright © 2013 PreferredQualityHomes.com, pqualityhomes.com, pqhhomes.com, & Preferred Quality Homes, L.L.C. All rights reserved. Last updated 10/31/12</div>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

"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.

Image swap and IE7 in DW CS4

I have thumbnails 80px square and a div set at 600px square I select and name a loctor image and put in the div.
When I set up image swap all works fine in Safari, IE8 but in IE7 after the image has swapped, if I move the mouse over or near the large image the image disappears and I get a black 600px size square with a red X in it in the top LH corner, this stays untill I click the next thumbnail. Any help would be appriciated.William

Delete line 372 from...wait...move over a little bit so I can see better...uh oh. My crystal ball just went on the fritz again and I can't see your code from here.
Can you provide a link to the problem page?
Mark A. Boyd
Keep-On-Learnin' :-)

Opening new browser window from image swaps

Hi all, does anyone know if it is possible to set a swapped
image to open a new browser window on a click command? Any help
woul dbe much appreciated. thank you in advance. :)

You would have to a) swap the image, and b) expose a
previously hidden layer
that superimposes the image with a transparent GIF on which
the onClick
behavior has been applied.
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
==================
"tldesignstudios" <[email protected]> wrote
in message
news:e7vfhm$1hf$[email protected]..
> Hi all, does anyone know if it is possible to set a
swapped image to open
> a new browser window on a click command? Any help woul
dbe much
> appreciated. thank you in advance. :)

Help building image swap in flash cs4?

Hello all,
I've been trying to research 'flash cs4 image swap' but most everything I find is related to dreamweaver, so I appreciate anyone's help to point me in the right direction.
I have a project in which I have an opening scene of a main image and 8 thumbnail buttons. This opening scene is pretty basic, as the thumbnails would link to a new scene or frame label (however I build it). This 2nd scene or instance in the timeline is where I would display another large image, and 6 new thumnail images that, upon rollover, would swap the large main image with the large version of the active thumbnail.
Basically I have a main 'menu' of category thumbnails that link to an instance in the timeline that displays the initial large image for that category, and allows the user to mouseover the other thumbnails to see the large images, and then click to go to a specific URL for more information.
The trouble I have with my rusty, limited AS knowledge is how to effeciently write the AS so that the image swap works. I quickly ran into a wall trying to acomplish this using a very OLD method that would require a LOT of jumping around the timeline. If there is ANYTHING out there that can help me figure out how to do this efficiently, I would very much appreciate the help.
Thanks in advance

that's really what I'm asking, is if there is any such AS to do this.... I would normally do it just using CSS & HTML, but I have to keep it all contained within one page, I can't click to a new page from the opening scene to show the sub category of graphics. I figured I could set the opening scene up easily with a goto frame label 'category 1'.... then at category one is where I need to figure out what to do to swap the images....
If I keep it very simple with no fade effects or anything, yes I could just jump to a frame and back, and so on.... Instead of animating all the different elements, is there a way to activate an instance of a mc, like a white to transparent fade, and just have that animate in place and out, chaning the images in a layer below it while it's in place? I'm really green to AS so I may be talking outta my ear on this,
your feedback is greatly appreciated.

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

Swap text as well as image with behaviours

Hi a..,
I am trying to create an interactive section of my site where a visitor can click on a small thumbnail and get a larger image to appear in a larger div (I can get this to work fine with the behaviour "swap image" so there are no problems there), but on the same onClick event I want some text to appear in another div relating to the image. I can get this to work once (using the behaviour "set text > set text to contianer" ), but when I clicks on another tumbnail to view the next image/text, the new text is added ontop of the old text and psuhes it down. What I really want is the old text to ve completely removed and the new text appear. I know this will work easily as an onMouseover/onMouseout effect, but I really want it to work as an onClick event.
I am really bad with javascript. I have tried this line of code in the start of the onClick event, it cleared the text fine, but wouln't allow any more text to be put in the div;
document.getElementByID('textcontainer').innerHTML=' ';
As I said, I am really bad with javascript. I pretty much can't write code myself, although to a certain degree, I can change code that is already written to suit my needs.
Can someone offer me any help with being able to make this work?
Thanks heaps,
Peter

Hi,
Here is the link to a version of the page;
http://pyrowebdesign.com.au/html/test-site/image-gallery.html
As I said, I am really queit bad with javascript. I have put in a few examples of what i have tried to get it to work.
The basics of it are;
1. I want the thumbnails on the left to swap the<div class="largethumbnialimage"> section which is working fine.
2. On the same click event, I want text to appear in the <div id="comments"> section on the right, and if therre is already text in there from somone clicking on one of the small thumbnails to see the comments, I want that text to disappear/swap/be replaced by the text of the clicked that thumbnail.
The things I have tried make the text appear for the new thumbnail, but the onld text wont disappear and the text stacks up. I know it would be much easier to use an onMouseover/onMouseout event, but I want to put some links in the text so I need the text to say up and have people free to move th emouse over to it.
Thanks for taking th etime to help.
Peter

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.

Image Swap or Rolloover Image?

Similar Messages

Maybe you are looking for