DreamWeaver Swap Image question

Hello!
I have created a simple swapImage page which is functioning properly (4 images).
My question is: Is it possible to make each image have it's own link?
Basically I wanted to create 4 images that act as a teaser to 4 indivdual stories and if someone
sees a story that they like they can click on it and it brings them to a page within my site for more info.
THANKS!

It is possible, but not using DW's Swap Image behavior.
To do this you'd have to use either -
Show/hide element
SetText of element
Custom javascript
The second option may be the best one. What is your skill level with HTML?

Similar Messages

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

Dreamweaver Firefox swap image problem

I have a navigation bar that uses swap images and hidden
layers. It worked from spring 2007 until recently. Now in Firefox
nothing happens when the mouse goes over the image. I have been
told the same problem has recently begun with Safari. It still
works fine in Internet Explorer. What has changed and how can I fix
this problem?
My website is: www.fumcpalestine.com
My problem has be resolved. It was caused by z index of
heading overlaying the z index of navigation bar in case others
have the same problem.

There is an error in your doctype declaration that is likely making IE soil itself.
Change...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
to...
<!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>
And see if that helps.

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

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

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

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

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

Transparent Image and swap image

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

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

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

I am trying to swap images in Dreamweaver so when a user goes
to my website, the images swap automatically. I have 4 images that
I want to swap and I want them to change every 7 seconds. I don't
want the user to have to mouseover or click anything, i want the
images to change automatically. I can't get this to work right in
Dreamweaver. It always only swap to 1 image and it never goes back
to the original image.
Also, the images are different sizes and I want them to stay
different sizes. I have 4 images, I want the images to swap every 7
seconds and then restore back to the original image. I want them to
keep swapping every 7 seconds, or I might just want them to swap
through the 4 images once and then restore to the original image
and not swap anymore after that. Can you help me with both of these
scenarios please?

1. Make the images to all be the same size by adding canvas
to the shorter
dimensions in your graphics editor.
2. Once you have done this, use an image rotator script to
make the images
rotate. You can find such things in many places on the web -
from free to
commercial. I have used SlideShowMagic from PVII,
http://www.projectseven.com/,
and the image rotation script from KaosWeaver,
http://www.kaosweaver.com,
before and found them both to be excellent for
this purpose....
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
==================
"originalit" <[email protected]> wrote in
message
news:f859tu$5v9$[email protected]..
>I am trying to swap images in Dreamweaver so when a user
goes to my
>website,
> the images swap automatically. I have 4 images that I
want to swap and I
> want
> them to change every 7 seconds. I don't want the user to
have to mouseover
> or
> click anything, i want the images to change
automatically. I can't get
> this to
> work right in Dreamweaver. It always only swap to 1
image and it never
> goes
> back to the original image.
>
> Also, the images are different sizes and I want them to
stay different
> sizes.
> I have 4 images, I want the images to swap every 7
seconds and then
> restore
> back to the original image. I want them to keep swapping
every 7 seconds,
> or I
> might just want them to swap through the 4 images once
and then restore to
> the
> original image and not swap anymore after that. Can you
help me with both
> of
> these scenarios please?
>

Mouseover /Swap image

Hi,
I have an image with several hotspots, is there an
(automatic) way to shade
the area on the mouse over rather than creating a image and
using the swap
image SB?
Thanks!

1. Make the images to all be the same size by adding canvas
to the shorter
dimensions in your graphics editor.
2. Once you have done this, use an image rotator script to
make the images
rotate. You can find such things in many places on the web -
from free to
commercial. I have used SlideShowMagic from PVII,
http://www.projectseven.com/,
and the image rotation script from KaosWeaver,
http://www.kaosweaver.com,
before and found them both to be excellent for
this purpose....
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
==================
"originalit" <[email protected]> wrote in
message
news:f859tu$5v9$[email protected]..
>I am trying to swap images in Dreamweaver so when a user
goes to my
>website,
> the images swap automatically. I have 4 images that I
want to swap and I
> want
> them to change every 7 seconds. I don't want the user to
have to mouseover
> or
> click anything, i want the images to change
automatically. I can't get
> this to
> work right in Dreamweaver. It always only swap to 1
image and it never
> goes
> back to the original image.
>
> Also, the images are different sizes and I want them to
stay different
> sizes.
> I have 4 images, I want the images to swap every 7
seconds and then
> restore
> back to the original image. I want them to keep swapping
every 7 seconds,
> or I
> might just want them to swap through the 4 images once
and then restore to
> the
> original image and not swap anymore after that. Can you
help me with both
> of
> these scenarios please?
>

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 images that will work like frames

Hello All,
I am hoping that someone might be able to point me in the
right direction here.
I am constructing a site entirely in Fireworks and would like
the buttons that I've created to swap images once they are in down
state instead of swapping by mouse over. I have seen it done on
another page and would love to know how to do it. If anyone knows
please leave me a reply.
Thank You!

You would do this in Dreamweaver not Fireworks.
But I'm not entirely sure what "THIS" is! Can you say more
about what you
want to accomplish?
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
==================
"brettmdesign" <[email protected]> wrote in
message
news:g5nbcf$cuc$[email protected]..
> Hello All,
> I am hoping that someone might be able to point me in
the right direction
> here.
> I am constructing a site entirely in Fireworks and would
like the buttons
> that
> I've created to swap images once they are in down state
instead of
> swapping by
> mouse over. I have seen it done on another page and
would love to know how
> to
> do it. If anyone knows please leave me a reply.
> Thank You!
>

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

DreamWeaver Swap Image question

Similar Messages

Maybe you are looking for