Swap Images to cover text

Ok...so I'm fairly new to the design world. I'm trying to do
a swap image (which I understand in the basic form). I have a nav
bar at the bottom of my site with photos and when I scroll over
them I want a larger picture to pop up on top of them. But here's
the issue. Above the nav. bar is text in the body of the site so I
want the image to be place on top of that text. So in an odd way, I
don't want to swap anything, I just want to have an image pop up.
Any thoughts? Does my question make sense??

You mean like this?
http://www.fourlevel.com/dreamweaver/extensions/lightbox/index.htm
Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
www.twitter.com/altweb
www.alt-web.blogspot.com/

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

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

InDesign CS3 Scripting XML Import Multiple Images into same Text Frame

I am having trouble importing multiple images into the same Text Frame using XML import. I imported 5 images into the text frame. However, all 5 images are laying on top of one another. Does anyone know if there is a way to have all images laying out like how Microsoft Word handles inline images, i.e., laying out next image to the right of previsous image in the same line and if there is not enough space left in the line, then wrap to next line. Thanks in advance. I understand I could use JavaScript to do post import processing, e.g, calculate the image size and place each images accordingly. But I am trying to see whether there is a way to do this without scripts.

You can apply an object style to all anchored images by script. A text frame containing main flow should be selected.
var doc = app.activeDocument;
var textFrame = app.selection[0];
var rectangles = textFrame.texts[0].rectangles;
if (rectangles.length > 0) {
for (var i=0; i < rectangles.length; i++) {
rectangles[i].appliedObjectStyle = doc.objectStyles.item("Cover");
However, there is a better approach:
Step 1
Create place holders for a single "Book" element and format it as needed -- apply an object style to the cover.
Step 2
Import the xml file -- the placeholders are replaced with data from the 1st xml element
Step 3
Drag & drop the element containing all "Books" elements into the main flow -- all elements are placed and formatted the same way as in step 1.
Finally, add a new page, click the overset text icon and autoflow text to add pages so that to fit all the text.
Hope this helps.
Kasyan

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

Expand the Background Image to Cover the Entire Region Title

I have a region title that contains an image and it has a height of 2 rows but the background image (blue image) is not expanding in the area (the css contains repeat for the background). The application uses theme 2. Can someone help?
CSS:
.rc-title {
    background: url("../images/bg-region-blue-l.gif") repeat scroll 0 0 transparent;
    float: left;
    width: 100%;
div.rc-blue-top
    background: url("../images/bg-region-blue-l.gif") repeat scroll 0 0 transparent;
    float: left;
    width: 100%;
}I created the application on APEX.ORACLE.COM:
Workspace: RGWORK
User: TESTER
Password: test123
Application : CSRSR (33558)
Select Signage from the menu (only choice).
You will see that one of the tabular forms has Nameplates and an image, another tablular form has an image but no text (Nameplates) even though it is there. I would live the blue to cover both the image and the text.
Please help
DB: 10g
APEX 4.1
APEX 4.2 (APEX.ORACLE.COM) works the same way.
Robert
http://apexjscss.blogspot.com

sect55 wrote:
fac586 ,
I would like to try the second option:
>
Another option would be to eliminate the problem by moving the nameplate images out of the region titles. There's horizontal space within the regions that will allow these images to be positioned to the left of the tabular forms, which would look OK.
But how do I reference the horizontal space within the regions? I looked at the template for the region:
<div class="rounded-corner-region float-left-100pct" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="rc-blue-top"><div class="rc-blue-top-r">
<div class="rc-title">#TITLE#</div>
<div class="rc-buttons">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
</div></div>
<div class="rc-body"><div class="rc-body-r"><div class="rc-content-main">#BODY#<br />
</div></div></div>
<div class="rc-bottom"><div class="rc-bottom-r"></div></div>
</div>and couldn't find out to put the image in the horizontal space.
Can you please help me by providing the details? There are two options, depending on the role you see the nameplate images playing on the page. I've used the two regions to provide one example of each.
*1. Nameplate as eye-candy:* If there's sufficient information in the region title, region content and item labels to make the nameplate images superfluous in providing information to the user, and you're just using them to improve the appearance of the page, then they can be applied purely using CSS.
/* Nameplate image as CSS eye-candy */
#nameplates-ndc div[id$="catch"] {
min-height: 36px;
padding-left: 113px;
background: transparent url(#WORKSPACE_IMAGES#nameplate_ndc.gif) top left no-repeat;
background-size: 103px;
}Note the use of the CSS3 <tt>background-size</tt> property to resize the image. If the app has to run in browsers that don't support this then you'll have to drop it and create an image of the exact size required for use in the <tt>background</tt> rule.
*2. Nameplate as content:* If the nameplate images are necessary to provide information to the user, then they have to be included in the region (and they must have an <tt>alt</tt> attribute providing an alternative representation of the information contained in the image).
Put the image in the region Header:
<img src="#APP_IMAGES#nameplate_n.gif" width="103" alt="Nameplate (name only)" />and float it so it sits alongside the form:
/* Nameplate image as page content */
#nameplates-name .rc-content-main img {
float: left;
margin-right: 10px;
}

Rollover, hotspot, swap image????

One of my links in my employoee website has a number of
pictures. They are each on their own layer but they overlap
eachother so only one image should show at a time. I have a
selection to the left of the image where the person can click on a
department and a different picture will show up for that
department. I first have to create that in Fireworks and I'm not
sure how. I have each department selection (text) on it's own layer
in photoshop and each picture on it's on layer. Can you explain to
me what I need to do for this? Is it called "swap image" or
rollover or hotspot?
Then after I do that, I want people to be able to drag their
mouse curser over people's faces and that person's info. will
appear at the bottom. I also created every person's info. as a
layer in photoshop. Can someone explain how to do this?

> Are you
> saying just do my slices in Fireworks and then use
Dreamweaver to finish?
That's what I'm saying, yes.
> could you please explain to me how to do the hotspots
over the people's
> faces so that when the mouse is over a title bar appears
at the bottom of
> the
> screen that has their name and title and then when the
mouse is out it
> disappears?
This will be advanced for you. It's simple enough to add a
hotspot to an
image in DW -
select the image, click on the Polygonal hotspot tool on the
Property
inspector, and draw your hotspot.
What will be trickier for you is the part about the popup.
One simple thing
to try would be to assign a title attribute to the hotspot,
e.g.,
<area title="my name, my title"....
Having done this, as you mouseover that particular hotspot,
you will get a
'tooltip' display of the contents of the title attribute.
There are three
downsides to this method -
1. The tooltip only displays for a short time
2. The tooltip only displays a certain number of characters
(I think 100)
in some browsers (FF)
3. You have no flexibility in styling the tooltip or its
contents
Notwithstanding these, it's simple enough to do, although you
will either
have to add the necessary code (the title attribute and its
value) manually
to the <area> tag, or you will need to use DW's Tag
Inspector to get at the
title attribute.
> I set up the file in Photoshop to have everything on
it's own file
> so I already have the 50 layers of people's names and
titles to appear
> under
> the photos and 13 different photos.
The way you set it up in Photoshop would have no bearing on
how you would do
this on an HTML page.
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
==================
"lpaquinhand" <[email protected]> wrote in
message
news:[email protected]...
> OK. Sorry If I seemed to disagree with you. I have
redone this website
> over 4
> times because I am told something different every single
time. First
> Dreamweaver was the best place to do this, then it was
Photoshop and then
> it
> was Fireworks and now it is back to Dreamweaver. I know
everyone has
> their
> favorite way of doing things but I am so confused at
this point. I have a
> deadline of 2 weeks for this website and I am currently
in Fireworks. Are
> you
> saying just do my slices in Fireworks and then use
Dreamweaver to finish?
> IF
> so, could you please explain to me how to do the
hotspots over the
> people's
> faces so that when the mouse is over a title bar appears
at the bottom of
> the
> screen that has their name and title and then when the
mouse is out it
> disappears? I set up the file in Photoshop to have
everything on it's own
> file
> so I already have the 50 layers of people's names and
titles to appear
> under
> the photos and 13 different photos. Is there any way for
you to walk me
> through this at this point in Dreamweaver? I would
really appreciate it.
> Thanks.
>

Swap Image Restore Confusion

In a nutshell, I have three buttons - each button has a
rollover effect AND should also trigger a swap image. When you move
off the button the rollover returns, but the picture stays the
same. What am I doing wrong?
On this one the button rolls over correctly and the image
changes, but does not return to the text image on t mouse out.
http://www.fischerexcavating.com/index_new.htm
This one the button does NOT roll over but the image swaps
out correctly.
http://www.fischerexcavating.com/index_new2.htm
I can not for the life of me get these to work TOGETHER!
<td width="214"><a href="/Excavating/about.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Excavate','','/images/Home_Excavate_Over.gif',1)">
<img src="/images/Home_Excavate_On.gif" alt="Excavate"
name="Excavate" width="214"
height="60" border="0"
onMouseOver="MM_swapImage('PicHome','','/images/Home_Pic_Excavate.gif',1)"
onMouseOut="MM_swapImgRestore()"></a></td>
<td width="392" rowspan="3"><img
src="/images/Home_Text.gif"
name="PicHome" width="388" height="215"
id="PicHome"></td>
<td width="214"><a href="/Excavating/about.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Excavate','','/images/Home_Excavate_Over.gif',1);
MM_swapImage('PicHome','','/images/Home_Pic_Excavate.gif',1)">
<img src="/images/Home_Excavate_On.gif" alt="Excavate"
name="Excavate" width="214"
height="60" border="0"></a></td>
<td width="392" rowspan="3"><img
src="/images/Home_Text.gif"
name="PicHome" width="388" height="215"
id="PicHome"></td>
Thank you in advance!

Remove everything you have.
Select the button and apply an image swap. In the list of
images, select
the first one you want to swap out, and browse to and select
the one to roll
in. Then in that same list of images, select the next one you
want to swap
out, and repeat. Do this as long as you still have images you
want to swap.
Only then would you click OK and close the behavior dialog
panel. This will
give you -
<td width="214"><a href="/Excavating/about.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Excavate','','/images/Home_Excavate_Over.gif','','PicHome','', '/images/Home_Pic_Excavate.gif',1)">
<img src="/images/Home_Excavate_On.gif" alt="Excavate"
name="Excavate"width="214" height="60"
border="0"></a></td> <td
width="392" rowspan="3"><img
src="/images/Home_Text.gif" name="PicHome"
width="388" height="215" id="PicHome"></td>
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
==================
"KimBellee" <[email protected]> wrote in
message
news:[email protected]...
> In a nutshell, I have three buttons - each button has a
rollover effect
> AND
> should also trigger a swap image. When you move off the
button the
> rollover
> returns, but the picture stays the same. What am I doing
wrong?
>
> On this one the button rolls over correctly and the
image changes, but
> does
> not return to the text image on t mouse out.
>
>
http://www.fischerexcavating.com/index_new.htm
>
> This one the button does NOT roll over but the image
swaps out correctly.
>
>
http://www.fischerexcavating.com/index_new2.htm
>
> I can not for the life of me get these to work TOGETHER!
>
> <td width="214"><a href="/Excavating/about.htm"
> onMouseOut="MM_swapImgRestore()"
>
onMouseOver="MM_swapImage('Excavate','','/images/Home_Excavate_Over.gif',1)">
>
> <img src="/images/Home_Excavate_On.gif"
alt="Excavate" name="Excavate"
> width="214"
> height="60" border="0"
>
onMouseOver="MM_swapImage('PicHome','','/images/Home_Pic_Excavate.gif',1)"
>
onMouseOut="MM_swapImgRestore()"></a></td>
>
> <td width="392" rowspan="3"><img
src="/images/Home_Text.gif"
> name="PicHome" width="388" height="215"
id="PicHome"></td>
>
>
>
> <td width="214"><a href="/Excavating/about.htm"
> onMouseOut="MM_swapImgRestore()"
>
onMouseOver="MM_swapImage('Excavate','','/images/Home_Excavate_Over.gif',1);
>
MM_swapImage('PicHome','','/images/Home_Pic_Excavate.gif',1)">
>
> <img src="/images/Home_Excavate_On.gif"
alt="Excavate" name="Excavate"
> width="214"
> height="60" border="0"></a></td>
>
>
> <td width="392" rowspan="3"><img
src="/images/Home_Text.gif"
> name="PicHome" width="388" height="215"
id="PicHome"></td>
>
> Thank you in advance!
>
>
>

Help using swap images to swap 2 separate images

I am trying to use swap images to swap two separate images on
the same page but I can't get it to work. Here is the code for one
image, rotator. I also have a second image,rotatorB that I want to
swap different images with. I think I need two separate codes but
do not know how to do it.
Thank You

Sorry, I don't know enough about how fireworks functions - but overall, I think it's always best to create the slices in a program like fireworks, (or image ready, etc), and then build the actual page in Dreamweaver (or other web software). It's kind of like how Photoshop used to let you create the slices, then export the entire photoshop file as an html page - it would create a very basic page with multiple nested tables that were nothing but trouble...
For what it's worth - Dreamweaver makes it fairly easy to do - once you're familiar it should only take a few minutes to accomplish (once you have all of the pieces saved to the images folder).
Fireworks isn't a web-creation software - it's function is to optimize images for the web, and slice up graphics (from what I know about it, anyway...)
**Also, on a side note - there are many disadvantages to creating buttons with graphics - number one reason is down the road when a client wants to add or modify the buttons, they will need the original photoshop file - and the fonts loaded in order to accomplish... then need to save out both the on and off state for each. I've been there, and they find it very annoying (known to lose customers because of it). Secondly, search engines and Handicap accessible software can't read graphics - even if you apply "alt tags", it's not as good as having a text link. If possible, it's best to use text for the links (and creating the rollover effects with stylesheets - there are tons of examples: http://search.live.com/results.aspx?q=css+rollover&form=MS8TDF&pc=MS8TDF&src=IE-SearchBox
Hope that helps
Jesse

Swap Image Setup?

I have always done my swap image setup in tables. I have recently upgraded to Dreamweaver CS4 and would like to know if there is a more efficient way to do this using CSS? (Layout sketch attached)

I have the three column layout figured out, but now how do I create five
equal sections on the right column and five equal sections on the left
column.
You don't. The left and right section would be width constrained. Just placing 5 thumbnail images into each will cause them to align vertically down the column, e.g.,
<div id="leftside"><img><img><img><img><img></div>
(pseudo-code at best - each image would need to be wrapped in an anchor tag, and the behavior would be applied to that anchor.)
And within the middle section how do I add a left section,
right section and bottom section?
Left/right? I don't see those on your diagram. But again, you don't really need to -
<div id="middleSection">
<div id="enlargedImage"><img></div>
<p id="imageCaption">blah blah</p>
</div>
The SetText behavior would be used to specify the HTML for the image tag in the 'enlargedImage" div, and the text content in the "imageCaption" paragraph. OR, you could scrap those inner elements and just have the middleSection container, with the behavior specifying the HTML for both inner containers, which would be styled by virtue of the ID values and the existing CSS.

Swap Images and URLs at the Same Time

I would like to not only to swap images when one rolls over a thum image, but at the same time I would like to have a link swapped in the new image. I am using behaviors to swap multiple images on a page. So to be clear I have several thums that one can roll over. When a thum is rolled over with the mouse a large image is swaped in a different location on the page. I would like to be able to attach a unique link to a URL to each of these new large images when they are swapped.

The link below will take you to a life page. In this example, the changing
text below the large changing image is in fact an image that is swaped out
as one moves the mouse over a thum on the right side of this page. This
changing text image will have an "Add to Cart" button. The button could be
part of the text or perhaps yet another image that changes as one moves
over the thums on the right. Here is where I need the help. As one clicks
on this text image that is changing (or changing button) I would like to
have a link associated with this image that will add the customors choice
of pillows to their cart. Need help with how to associate a unique link to
unique URLs with this changing text image.
Life page: http://katetroyer.com/Pillows.html

How can I Change Asset names for swapped images in duplicated symbols?

I have what seems to be a bug in edge animate cc2014 in following circumstances:
1. Duplicate a symbol
2. Drag duplicate symbol onto stage.4
3. Rename symbol
4. Click to edit symbol
5. Select an image inside the symbol
6. In properties panel change path to swap the image to be used in this instance of the duplicated symbol ( I need to reuse this symbol many times and not being able to change asset names is a real problem!).
7. The names for the asset in both the timeline and the elements were auto generated at the time of duplication when try to change the names they revert back to the auto generated names.
How can I overcome this problem which is clearly a bug or a poorly thought through bit of programming by an otherwise highly competent adobe edge animate tesm
Thank in advance
David.

Again, incorrect. It's not about how I can address a specific symbol with code - no problems there - it's what the composition loads into the symbol. Try it with some complex component or sub- symbols.
Work-Around for using Duplicated and Revised symbols (symbol variants) in the SAME document. Solution.
Tedious, but easy. Low risk. Edge Animate 2014.1.1
When you duplicate a symbol comprised of symbols itself ("sub-symbols"), only the outermost symbol gets a unique name, not it's component inner symbols. Upon import of additional variants, a unique name is created in the Library/Symbols panel for the inner symbols, yet the references in the outer symbol can't update to use those unique inner-symbol names. Therefore, the composition loads the symbol with the matching name. This will be the first variant to be imported.
Make the Duplicate
Duplicate the symbol in the Library/Symbol Panel. Rename. Export.
Prepping the Symbol
Open a new document, import and place the new symbol.
Select the asset to be switched/replaced. Make the switch in the property panel. Properties/Images/Swap button. (I revised my base or source symbol to have different colored background images. This is how I created 4 color variants.)
Save the new document, of course. "Example1.an"
Export the revised symbol from the Library/Symbol Panel for safe keeping.
Return to Example1.an
Elements Panel: Work through the nested symbols, adding a preceding identifier to all symbols in the heirarchy.
*KEEP IT SIMPLE so you can easily and quickly move through the .js files in the following steps.*
Save Example1.an.
Library/Symbols Panel: Go down the list, renaming all the symbols with the same preceding identifier as was used in the Elements Panel. *I advise to stay parallel with the Elements panel. Change as little as possible.*
Disregard any odd appearance you may see on the stage for now.
Save Example1.an
Revising the Code
In Edge Code, also part of the Creative Cloud suite, or any code editor, open the two .js files for "Example1.an." found in the same folder...Edge.js and ...EdgeActions.js
...Edge.js
find "symbolName" - prepend with the identifier whatever is not already prepended.
at the same time, look for "id" nearby - prepend with the identifier whatever is not already prepended.
Save
...EdgeActions.js
First read the grey comments about not degrading the //Edge Comments.
Search the document for "//Edge symbol" - prepend whatever is not already prepended.
Carefully check all the orange text, prepending the symbol names you find. This same code can be seen in your Code Panel with the "Full Code" button.
Save
Return to Edge Animate
When prompted to Reload, say yes.
Save Example1.an
EXPORT your new top level symbol - now a fully separated asset.Now you have created a fully unique symbol, which can be used in conjunction with other variants in the same document.
Import your new, unique symbol variant it into your real document.
This is the solution if your Symptoms are:
I duplicated symbols to make different variations, but now I can't use the duplicated symbol variants together.
When I try to swap images in a duplicated symbol, it succeeds when used alone, but reverts when used with the original symbol.
My duplicated symbol works properly alone, but not when it is used with the original symbol.
My symbol seems to revert to the original source symbol.

Swap Images to cover text

Similar Messages

Maybe you are looking for