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.

Similar Messages

Having problems with swap image (roll over effect)

I am trying to do a roll over state (swap image) for a linked item on my mock up. I've done this for other pages in the same file, but for some reason on another page, when I build the second state, insert the slice, and create the swap image on the first state, it previews in the browser with just a white screen and the section that I sliced. How come it is showing a white page in lieu of my entire mock up with the roll over effect?

I am trying to do a roll over state (swap image) for a linked item on my mock up. I've done this for other pages in the same file, but for some reason on another page, when I build the second state, insert the slice, and create the swap image on the first state, it previews in the browser with just a white screen and the section that I sliced. How come it is showing a white page in lieu of my entire mock up with the roll over effect?

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

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?

Creating null links for image swap

I have this problem with Internet Explorer 6 for PC which
moves the webpage to the top of the browser whenever the swap image
ref is clicked. It will do this if the link is set to #, if it is
set to javascript:; then IE wont display the image which I think
has something to do with preloading. SO, does anyone know another
null link style I could use. I'm working in Dreamweaver CS3 for
Mac.

Show us your code, and I'll show you how to fix it.
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
==================
"danfb08" <[email protected]> wrote in
message
news:g95qcq$abv$[email protected]..
>I have this problem with Internet Explorer 6 for PC which
moves the webpage
>to
> the top of the browser whenever the swap image ref is
clicked. It will do
> this
> if the link is set to #, if it is set to javascript:;
then IE wont display
> the
> image which I think has something to do with preloading.
SO, does anyone
> know
> another null link style I could use. I'm working in
Dreamweaver CS3 for
> Mac.
>

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 + Multiple Frames

New to FW ... figured out how to take a PS document and slice
it up and create simple rollovers (sliced image > created a
second frame for the rollover items/layers) ... now I need to
create a basic image swap (roll over thumbnail and larger pic
appears in center). I put each large picture / image in a new frame
- everything works fine - BUT - when I export, I'm getting slices
for every frame. Can I easily remove the web layer from the large
pic frames? I tried turning off the visibility but that didn't seem
to do the trick. Please advise! Would love a simple solution so I
don't have to take the time to delete all of the duplicate slices
in DW after the fact. THANKS.

Something like this?
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Cheers
Nick
"Fun Leprechaun" <[email protected]> wrote
in message
news:fru4dm$mc3$[email protected]..
> Hey there,
>
> How can I use the Swap Image Behavior for multiple
images on Load - I
want the
> images to loop WITHOUT the user having to have their
mouse over the image
to
> enable it to change. I've also seen the images come in
from the left and
then
> the right etc. (hopefully you get what I mean!)
>
> Any suggestions?
>
> Thanks a mill folks!
>

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
>
> <img src="images/215-suite-2.jpg" alt="Main
Photo" name="mainImage"
> width="300" height="225" id="mainImage" />
> 
> 
> <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)"
> />
>

Create a single tall image from a multi-page pdf file

I would like to take a multi-pake pdf file, and have all of the pages "appended" from top to bottom edge to create a single tall image. I am a teacher, and I currently do this by hand, I am then able to annotate the entire page and croll down an entire document inside of Photoshop.
Here is an example: I have a pdf with 4 pages. Currently I open the pdf in PS, I end up with 4 images; I adjust the vertical canvas size of one of the images to be 4 times it's original size, then one-by-one I copy the contents of each image to that new tall image and move that layer vertically below the previous one. So the result is say a 1024x6400 pixel image.
I would like to be able to just open the pdf with a script and get this all done in one step.
Any help is appreciated.

Thanks again c.pfaffenbichler. I had most of it worked out in my own way before you got back to me, but I wasn't able to get the final naming part down.
Like I said, I am a math teacher, and I use photoshop as my whiteboard, and draw with a graphics tablet. So I can print to pdf from any program, now I can import any document into photoshop basically to write on it. So this is wonderful. I have never seen another teacher use PS as a whiteboard in class in this way, so I am most likely the only person in my county or state that would need such a script.
After I got everything worked out, I added some things to the script. Some of my colleagues will use my files as a whiteboard if I send it to them as a tall single page pdf that they can scroll down and write over; so they don't need photoshop. So I have scripted in the saving of that pdf as well. Here are my changes; most of what I changed is in the section commented MY WORK.
// opens all pages of pdfs cropped to trimbox with set settings and arranges them;
// 2011, use it at your own risk;
#target photoshop
// dialog for pdf-selection;
var theFiles = app.openDialog();
if (theFiles) {
 for (var m = 0; m < theFiles.length; m++) {
 var theFile = theFiles[m];
 if (theFile.name.slice(-4) == ".pdf") {
 var thePdf = openMultipagePDF(theFile);
 else {alert (theFile.name + " is not a pdf-file")}
////// function to open all pages of a pdf //////
////// influenced by PlaceMultipagePDF.jsx //////
function openMultipagePDF(myPDFFile) {
// pdf open options;
 var pdfOpenOpts = new PDFOpenOptions;
 pdfOpenOpts.antiAlias = true;
 pdfOpenOpts.bitsPerChannel = BitsPerChannelType.EIGHT;
 pdfOpenOpts.cropPage = CropToType.MEDIABOX;
 pdfOpenOpts.mode = OpenDocumentMode.RGB;
 pdfOpenOpts.resolution = 247.8;
 pdfOpenOpts.suppressWarnings = true;
 pdfOpenOpts.usePageNumber = true;
// change pref;
 var originalRulerUnits = app.preferences.rulerUnits;
 app.preferences.rulerUnits = Units.PIXELS;
// suppress dialogs;
 var theDialogSettings = app.displayDialogs;
 app.displayDialogs = DialogModes.NO;
// iterate through pages until fail;
 var myCounter = 1;
 var myBreak = false;
 var theWidth = 0;
 var theHeight = 0;
 while(myBreak == false){
 pdfOpenOpts.page = myCounter;
 try {
 var thePdf = app.open(myPDFFile, pdfOpenOpts);
 if (thePdf.width > theWidth) {theWidth = thePdf.width};
 var offset = thePdf.height;
 thePdf.layers[0].name = myPDFFile.name+"_"+myCounter;
 if (myCounter == 1) {
 var theFile = thePdf
 else {
 thePdf.layers[0].duplicate(theFile, ElementPlacement.PLACEATBEGINNING);
 thePdf.close(SaveOptions.DONOTSAVECHANGES)
 myCounter = myCounter + 1;
 var theLayer = app.activeDocument.activeLayer;
 theLayer.translate(0, theHeight);
 theHeight = theHeight + offset;
 catch (e) {myBreak = true};
// reset dialogmodes;
app.displayDialogs = DialogModes.ERROR;
app.preferences.rulerUnits = originalRulerUnits;
// resize canvas;
 theFile.resizeCanvas(theWidth, theHeight, AnchorPosition.TOPLEFT);
//MY WORK
// merge visible layers (even if there is only one layer)
 try {
 theFile.mergeVisibleLayers();
 }catch(e) {}
// create layer, rename, movetobottom, fill white
 theFile.artLayers.add();
 theFile.layers[0].name = "Background";
 theFile.layers[0].move(theFile.layers[1], ElementPlacement.PLACEAFTER);
 var white = new SolidColor();
 white.rgb["hexValue"] = "ffffff";
 theFile.selection.selectAll();
 theFile.selection.fill(white);
//rename contents layer, add "work" layer for teacher to write on
 theFile.layers[0].name = "Problems";
 theFile.artLayers.add();
 theFile.layers[0].name = "Work";
//force 2107 width
// if(theFile.width != 2107) theFile.resizeImage(UnitValue(2107, "px"), undefined, undefined, ResampleMethod.BICUBIC);
// force 2048 width
 if(theFile.width != 2048) theFile.resizeImage(UnitValue(2048, "px"), undefined, undefined, ResampleMethod.BICUBIC);
// save psd;
 psdOpts = new PhotoshopSaveOptions();
 psdOpts.embedColorProfile = true;
 psdOpts.alphaChannels = false;
 psdOpts.layers = true;
 psdOpts.maximizeCompatibility = true;
 var filePathPsd = myPDFFile.path+"/"+myPDFFile.name.slice(0, -4)+".psd";
 if (filePathPsd.exists) filePathPsd.remove();
 theFile.saveAs(File(filePathPsd), psdOpts, false)
// save pdf whiteboard
 var pdfOpts = new PDFSaveOptions;
 pdfOpts.downSample = PDFResample.NONE;
 pdfOpts.optimizeForWeb = true;
 pdfOpts.PDFCompatibility = PDFCompatibility.PDF15;
 pdfOpts.preserveEditing = false;
 pdfOpts.encoding = PDFEncoding.PDFZIP;
 var filePathPdf = myPDFFile.path+"/"+myPDFFile.name.slice(0, -4)+" Whiteboard.pdf";
 if (filePathPdf.exists) filePathPdf.remove();
 theFile.saveAs(File(filePathPdf), pdfOpts, false)
 theFile.close(SaveOptions.DONOTSAVECHANGES)
//MY WORK
 return theFile

Swap Image Thumbnail Borders In IE

I'm creating a web site and am using swap image on a Photo Gallery page. In Internet Explorer the thumbnails in the swap image function show blue borders. In Mozilla Firefox the borders display as light green and changing to rust when I hover over the thumbnail which is what I want.
Is there a work around to solve this problem in IE?
The web site being created is http://www.aspenmountaincabin.com/photos.html
Thank you.

Add the below css styles to your css stylesheet:
#mainContent a img {
border: 2px solid #cccc99;
#mainContent a:hover img {
border: 2px solid #996633;

Swapping images/text question?

Hi, I am moving this question to this forum from general as I got a response suggesting that dynamic html could be the solution to my problem. Any guidance on how to set up the behaviour would be much appreciated.
The problem I have is that I have created a navigation menu using plain text that changes colour on hover and two images in different divs swap images. It all works fine using a standard behaviour but now the client has asked if I can also make the opposite work ie. when the user rolls over the image, then the text changes colour. Is this possible without creating the text elements as images and swapping them using a standard behaviour?
I am not very familiar with the capabilities of javascript so some guidance would be great.
The present draft site is here, so you can see the problem.
Many thanks
Richard

Hi Richard,
I suggest you to use javascript. I will try to give you a basic examle for this problem with a short explanation. Let's say you have the following html code
Here comes the default text of the elementThe image has the id of firstimage and the div#first will be the object where the text will swapped at onmouseover event.
The code above will catch the rollower event of the #firstimaged object and will make the ChangeTextofDivIdfirst javascript function run. With the used innerHTML property you may specify any html code instead of the 'the swapping text' .
Regards
Zoli

Swap Image behaviour mis-behaving

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

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

Help wih swap image. I think?

I'm trying to get images to appear in a part of the page
when I roll over the thumbnail of the image.
Here's the page:
http://www.jonathanjamesphoto.com/wedds2.htm
I did a swap image behavior. It worked!
It shows the swapped image from an image file in a slice I
made.
BUT, when I upload the site I can't get the images to swap.
Is it something to do with where the image file is stored?
Can someone help?
Thanks,
Jonathan
[email protected]

jjamespix wrote:
> I'm trying to get images to appear in a part of the page
> when I roll over the thumbnail of the image.
>
> Here's the page:
> <a target=_blank class=ftalternatingbarlinklarge
> href="
http://www.jonathanjamesphoto.com/wedds2.htm
>
> I">
http://www.jonathanjamesphoto.com/wedds2.htm
>
> I</a> did a swap image behavior. It worked!
There's no swap image behavior on that page. Rather, it's an
image map.
It appears to be changing the image on click, but it is
actually opening
a new HTML page.
Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
Design Aid Kits:
http://www.webdevbiz.com/pwf/index.cfm

Swap image actionscript

Hi there.
I'm a beginner in flash actionscript. I want to basically swap images using actionscript. So if you click on a thumbnail, the main big image will change corresponding to the thumbnail being clicked. I don't want to use a simple on click go to and play actionscript...
I'll try to paint a picture of what I'm trying to achieve.
There is a background image, middle ground and foreground image... people will have a selection of thumbnails to chose from to change these images (so they are creating their own big picture)
Once the user clicks on a thumbnail for the background, the main image will change corresponding to the thumbnail.. and the same for middleground image and foreground image.
I can acheive this in director using lingo but I am required to use flash and actionscript. Hope you can help!
Thanks in advance!

Hi, I have tried messing around with this inorder to make it work. I have implemented the code you kindly suggested however it still isn't working. Sorry to be a pain and thank you for your patience. I think I am on the right track as when I hover over the thumbnails the cursor changes to a hand, however the main image is not changing. I can not figure out what I am missing or doing incorrectly..
Have you any idea?
Thanks again!

How to creat a transparent psf in photoshop cs4

Creating a file which Background contents is transparent in Photoshop CS4,and save as this file in PDF or print this file in PDF,but i found the pdf file is un-transparent when opened in Acrobat, why ?
and how to create a transparent pdf file in Photoshop CS4?
and a transparent pdf file can be created easily in an early version Photoshop

The transparent pdf file created by Photoshop CS4 will be use to print over an underlying background image,nor for a web site,and can not be placed into a Indesign file
if Show transparency grid (Acrobat>preferences>page display>show transparency grid)is checked,the transparent background will be show

Create a transparent swap image slice over an html slice

Similar Messages

Maybe you are looking for