Simple swap image, CS6, HTML 5, unexpected results.

Validated well, and checked paths numerous times. Must be missing something simple. Large image appears instead of nav image, but directory path correct.
Page located at:
http://www.satgraphics.com/_photo_gallery/index.htm#
Thanks in advance.
Joe Satterwhite
SatGraphic.com
ScreamingEagles.com

SatGraphics Art wrote:
Large image appears instead of nav image, but directory path correct.
Hi Joe -
The first content in your header DIV is coded to display the large image without behaviors;
Is that not what you expected?

Similar Messages

Rendered html pages in results file(html) not showing the images of origina

hi,
rendered html pages in results file(html) not showing the images of original page
when i click on rendered html pages of different html section of a results file.
both master and tested as well.
thx
pasumarthi

By design, the report will not show the images, will not apply imported css or javascript files and will not show framesets. Also, in the case that an image is shown there is no guarantee that that was the image that was seen when recording/playback the script.
The rendered html pages that are shown in the report only contains the structure of the html page. If an image is shown the image will be a reference to the location of the image and not a saved copy of the image as part of the report. If the website has a simple structure this can give an idea of what was different. If the website relies extensively on images, stylesheets or javascript to present the information then this report feature becomes less useful.
Few weeks ago I requested a feature request in order to be able to see in the report the page exactly as it was when recording the script and exactly as it was when the script was played back. In the way that the feature request was written it specifies the use of screen captures or saving the page as a pdf file.
Regards,
Zuriel

Create a transparent swap image slice over an html slice

I have a 990px x 400px page divided into two halves horizontally.
The left slice is a html slice that consists of an unordered list with hrefs to various pages.
The right slice is an image that I want to put some polygon hotspots with each having a swap image behavior to swap an image over the html slice and I am unsure how to put a transparent image slice over a html slice.
Sure could use some help.
Terry

You can't overlap slices in Fireworks, as Fireworks needs to have a clearly defined, single image to export. Overlapping slices or hotspots makes that impossible. This means that, for one thing, you can't put polygon hotspots over your left slice.

HTML swap image command from Flash Actionscript

Is there a way within Flash, with actionscript, to make an
image swap on an html page? Help!

yes it is posible.
set img id for the image in your html, e.g: Image1
<img id="Image1" src="pic01.jpg" width="100" height="100"
alt="" />
lets say you have a button, when click on it, it swap Image1
to pic02.jpg
on(press){
getURL("javascript:MM_swapImage('Image1','','pic02.jpg',1)")
and another button, when click on it, restore original image,
on(press){
getURL("javascript:MM_swapImgRestore()")
and the most important thing, add script below in your html
head tag

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

Simple disjointed image gallery

I originally created this simple one page gallery in GoLive. What's the best way to duplicate it in Dreamweaver (CS5)? Issues: on clicking thumbs, images with different dimensions load to placeholder without distorting, thumbs become gray when "visited".
http://www.sonsmi.com/paintings3.html

Success! Up and running and easy to maintain. Easier than I imagined -- no javascript coding necessary with the Behaviors panel.
http://www.sonsmi.com/paintings5.html
Here's the process I used for those who might be interested:
Preparation: button state images. I used Photoshop to create each button image -- for example, "button01.jpg" and "button01_click.jpg".
Make a placeholder image: "placeholder.jpg".
Prep all gallery images to be the right size. (in this case I made max width/height no greater than 500px).
Now to Dreamweaver: use Insert Placeholder to place image. By default, Swap Image uses the placeholder dimensions and distorts swapped images to fit if they don't match. As Murray suggested, I went to code view and deleted the placeholder width and height values so I could use images of various sizes.
Insert button image into page (e.g., drag from library).
Making sure button image is selected on the page. In the Properties panel, give each button an ID.
Select a button on the page. In the "Behaviors" panel, select Swap Image.
In the Swap Image panel, with the button ID selected, browse to select the image to show when the button is "visited" (for ex., "button01_click.jpg").
While still in the Swap Image panel, select "placeholder" and browse for the image to swap when the button is selected.
Uncheck "Restore images onMouseOut". Otherwise, the image will disappear when the mouse moves away from the button.
In Behaviors, where it shows "onMouseOver", change it to "onMouseDown" from pulldown (click the little menu arrow next to it).
For text captions, I created a new div tag for the caption area and added another behavior for each button: "Set Text of Container". (I also added a new css rule in my style sheet called "#caption").
Thanks again, Murray. You really helped me.

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

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

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?

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

In Mail 3.6 remote images in HTML messages display as blue squares with ? even though checked in viewing references.

In Mail 3.6 remote images in HTML messages display as blue squares with ? even though checked in viewing references.

Nurit,
The point is that that button should not be there, if the preference setting is as you say. This indicates the preference setting is stuck, and that is what I was trying to help you resolve.
The full purge is done as follows:
Quit Mail, and in the Finder open Home/Library and locate the Mail folder. Control-click over the Mail folder, and choose Duplicate -- then drag the resulting copy to the Desktop for temporary backup. Next, open Home/Library/Preferences and find the com.apple.mail.plist file and drag it to the desktop.
Relaunch Mail, which will open as though new, and when prompted to import anything DECLINE. Instead, re-enter your account info, and Mail will re-discover the account folders for your accounts, and all should be well, after setting preferences as you desire.
Ask any needed questions, and keep us posted.
Ernie

Display image in html mail

I was recently sent an email that used an HTML stationery wih several photos embedded in it. The email opens normally, but all of the images are icons, displaying file name and size. If I click the icon, the image opens correcly in a separate window.
I am running OS X 10.7.3 and Mail 5.2 (1257) and have checked "display remote images in html email" in preferences. A friend with identical software versions receives the same email and the photos are visible in the original email. Suggestions?

No-one replied, but I found a solution on another board. Run Terminal (do a Spotlight search if you don't know where to find this), and type: (or copy and past the next line)
defaults write com.apple.mail DisableInlineAttachmentViewing -bool false
This will force Mail not to disable inline attachment viewing. Obviously, to reverse this, simple replace 'false' at the end with 'true'.
Thanks to Louise101 from July 2011 for posting this.

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

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.

Simple swap image, CS6, HTML 5, unexpected results.

Similar Messages

Maybe you are looking for