How to? Overlapping slice image swaps.

I've done research into overlapping slices but not finding any specific help to what I'm trying to do, so I thought I would post my question here, along with a very basic visual example of the intended functionality.
http://img219.imageshack.us/img219/2412/tablereq.png
Hopefully the image explains it all. I'm just trying to create a table where when I mouse over an image there is an image swap, but within this image are other overlapping slices (and images) that I'd like to swap as well. So far, no matter how I set things up, the main background layer always overpowers the overlapping slices.
How should I go about setting this up? I'm really not a web design person. I know a little, and this is really more for a personal project. Thank you in advance for any assistance.

Hi mvoordin,
Here is what you must do:
Create your document. Add 2 more states. Now you have 3 states. Put your original image in state 1, insert a rectangular slice over it and add a simple rollover behavior to the slice. Move in state 2 and put your second image on the canvas. Put a rectangular hotspot on a grey square and add a swap image behavior to it. When the swap image window opens, select the slice and choose state 3 to show the swapped image from. Copy paste your hotspot over every square. Finally, place your third image on state 3.

Similar Messages

How-To: Overlapping 2 images?

Hey! I'm editing a music video and I want to use this trick, but don't know how to do it in Final Cut. It's your basic overlapping of two images. Here's an example of what I'm trying to do.
http://www.youtube.com/watch?v=cs_I7935rS0&
Any help you guys can give would be much appreciated! Thanks!

Locked off camera and a keyframed crop from right to left.
Put the the first clip on V1 the next on V2, offset V2 by sliding it later in time, add the transition, copy the track on V2 to V3 offset V3 by sliding it later in time............

How to overlap an image using css in my .cfm

Hi, I know this is a little off-topic, but in my gallery.cfm,
I have a couple of rows that have an image in it, I was wondering
how I can use css to put some text over the image? Like for
example, how can I put some red text "Sold out" over toy1.jpg? I
have tried using z-index but that requires some positioning but in
this case there is no positions ? Can someone please help me on
this?
Sample code:
<table align="center">
<tr>
<td>
<img src="images/toy1.jpg" width="128" height="180"
border="0">
</td>
</tr>
<tr>
<td>
<img src="images/toy1.jpg" width="128" height="180"
border="0">
</td>
Thank you,
C

Hope this helps.
<style type="text/css">
.cell {position:relative;}
.productImage {top:0px; left:0px; width:128px; height:180px;}
.soldText {position:absolute; top:30px; left:0px;
font-size:2.0em; color:red; width:100%;
text-align:center;
font-family:impact,lucida console,verdana;
opacity:.8}
</style>
<table align="center" border="2">
<tr>
<td>
<div class="cell">
<div class="productImage"><img src="images/toy1.jpg"
width="128" height="180" border="0"></div>
<div class="soldText">Sold!</div>
</div>
</td>
</tr>
<tr>
<td><div class="cell">
<div class="productImage"><img src="images/toy1.jpg"
width="128" height="180" border="0"></div>
<div class="soldText">Sold!</div>
</div>
</td>
</tr>
</table>

Complicated Rollover with Overlapping Slices

I am new to Fireworks and website design but I am trying to create my first website for my graphic design business. It's going great with the exception of this one element ... I have an illustration of a tree with several branches (see pdf attachment). I'd like each branch to have a separate rollover effect so that the individual branch will glow and some text will appear. Once clicked, it will navigate to another page. I set the file up with a polygon slice over each branch and placed the glowing branches and text on State 2. Even though I used a polygon slice the program still sees it as a rectangle, placing a rectangle box around each polygon slice which makes the slices overlap, causing some obvious problems. I'm wondering if I should place each branch in a separate state or use hotspots. Can someone tell me how to make this effect work without overlapping slices?

The polygon tool is for hotspots for an image map. In an image map, areas of a single image are defined as active. Generally, the image used for an image map is not swapped out. You could swap out the whole thing, but if the image is large, then download time may cause performance issues.
When you want to do rollovers, then you need to make images that can be swapped out. The images must be rectangular and they must fit together like a puzzle. The boundaries in your attachment won't do that. Puzzle pieces must share boundaries, they cannot overlap. In addition, the design you have would make a very complex puzzle!
The way you need to slice your design (make your puzzle) is more like this:
You'll note that it won't work out - simply - as you have it designed. Some things you can do are
Tweak the design of your tree
Put the glow along only parts of the branches, not the whole branch
Make some of your rollovers also have a disjoint rollover, where two (or three) images change when you roll over one.
Use Flash
Do some complicated stuff with CSS (but as you're new to Web design I don't think you want to start there)
Good luck!

How to get sliced image into my table ?

hi all :)
i have created a sliced image of my country and added
rollover with disjointed fx.
i have also exported the code which works fine by it self.
however when i try to get the code into a table cell on my
website it breaks the table.
so please can you tell me what i have to do inorder to make
it fit in please.
the site is www.365cityads
dot com.
here you can see a placeholder map of sweden thats were
i want the sliced map to be
you can view the working map here on
www.365cityads
dot com/xmap/swemap.html
here you can see that everything is working but breaks when
i try to get it to the index.php page.
please can anyone help me with this multiple nested table
situation
thanks
K

krughan wrote:
> Hi pixlor :)
> pixlor maybe im missing the bigger picture and there is
something i can learn
> or maybe its due to my understanding of english.
>
> after slicing up up sweden into 21 counties then
exporting it to html
> it worked fine no problems at all. (are you saying i
need not slicing ?)
>
> my problems became about when i tried to fit the map
into a table cell on my
> site (365cityadds.com where you can see the map working
now) that was the
> problem before as it was breaking up
> on every attempt.
>
> so i looked back on the orginal could working map code
and notice
> there were 3 parts to it 1st to go in the header 2nd to
go in the desired cell
> destination then the 3rd part was attached below
> (is it here that im doing worng ?)
>
> as i said the map is in the right place on the site and
seems to be doing what
> i wanted. however what i cant get over is the amount of
code generated by
> firefox which makes the map slow to load on initial
entry to the site (im
> using preload images too)
> (maybe im doing something wrong here. am i ?)
>
> pixlor, by no way am i being confrontational with you in
any sort
> of way. i assumed that you thought i was slicing the map
sections into 21
> matching table cells, how ever my assumption may and can
be totaly wrong.
>
> if you have time to look at the front page of the site
and see the
> usage of the map and its code via right click . just to
see if i used
> the software as intended. :) thanks.
>
> i have use FW a few time (im not an expert) to do
smaller stuff and
> i really thought that i was using it correctly but if
there are other
> way that can make the map speed, cut code and/or an
effecient
> way of doing the same thenig then i ask you please let
me know
> or provide me with a link to reference(s)
>
> thank you again for responding. your input means alot to
me
>
> Thanks
> k
>
>
>
>
This kind of complexity would be much better handled via
Flash, but that
may be outside your experience at this point.
The code you saw was NOT generated by Firefox; it was the
code generated
by Fireworks to pull off the effect you wanted. The lag you
experienced
was Firefox having to download the code to the user's browser
and then
Firefox having to parse and display all the elements
Generally, overlapping slices is not a good idea for many
reasons -
bloated code being one of them. Other issues that can occur
are
unreliable image display, multiple - unnecessary - sliced
images and
migraines from having to edit the code at the source level
<grin>.
Jim Babbage - .:Community MX:. & .:Adobe Community
Expert:.
http://www.communityMX.com/
CommunityMX - Free Resources:
http://www.communitymx.com/free.cfm
.:Adobe Community Expert for Fireworks:.
Adobe Community Expert
http://tinyurl.com/2a7dyp
See my work on Flickr
http://www.flickr.com/photos/jim_babbage/

Image Swap and Image Map

Hello,
I am going through some very rudimentary steps of setting up
site.
I have an index page with four simple areas I wish to turn
into hotspots- I created them as slices in Fireworks then as Image
Swap rollovers in DW. Now, when I try to apply a hotspot/image map
to the rollover area, I can get it to link to the appropriate page,
but it seems to have disabled the rollover/image swap attribute.
How do I keep both properties enabled? Any suggestions are
appreciated.

Can you post a link to the page, please?
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
==================
"Jay S B" <[email protected]> wrote in
message
news:eme8i7$6mf$[email protected]..
> Hello,
>
> I am going through some very rudimentary steps of
setting up site.
>
> I have an index page with four simple areas I wish to
turn into hotspots-
> I
> created them as slices in Fireworks then as Image Swap
rollovers in DW.
> Now,
> when I try to apply a hotspot/image map to the rollover
area, I can get it
> to
> link to the appropriate page, but it seems to have
disabled the
> rollover/image
> swap attribute.
>
> How do I keep both properties enabled? Any suggestions
are appreciated.
>

Image swap glitch

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

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

Save for web and devices: overlaping slices

I use Illustrator to design UI for web and applications. In many cases, there are overlapping slices for example the icons on the toolbar: the icons are separate slices with transparent background while the toolbar is a big slice under all of them. Everytime I need to export the slices, I have to hide the background, export the icons, and then hide the icons and export the background. It may not look like a tedious task but when you have to do this cycle 50 times a day together with your product manager and marketing team to fine tune the graphic design, it's such a painful task. Unfortunately it's not always about hiding and showing only 2 layers, it can be quite complicated depending on how many elements there are on the screen.
The problem only comes down to one question: how to export overlapping slices from different layers easier?

Window >> Layer comps
Set this up, and with one click you will be able to toggel whci layers are on or off.
Out of curiosity, are you programming pages with CSS, dynamic layers or other? You cannot layer slices with transparency on top of each other in standard html. I find it so time consuming and impossible to get things registering correctly for all browsers, so try to minimize any layering technologies.

How to remove cached images in html whe going from one page to another page

can anybody help how to remove cached images in html pages.i tried with response.setHeader("no-cache") but it is not working

thanks,
can u tell me how to make the browser not to cache images.since iam moving from one page which has images, into another page which having few more images both gets overlaped so how to remove images of previous page.
thanks in advance

Help building image swap in flash cs4?

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

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

Image swaps with fade out and in

I am new to Dreamweaver, in fact only got into it to do my
own website. I want to create image swaps with a fade out and then
fade in with the new image. Nowhere can I find out how to do this
so far. Can anybody point me in the right direction. Many thanks
for your help now and in the past.
Perspectivist

This is a multi-part message in MIME format.
--------------000605070301090808040601
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit
i see! well, that's good to know. i didn't realize you could
do
transitions on image swaps (of course, i've rarely used them
so far).
and i just assumed the OP was actually trying to do a
slideshow, which
could still be the case i guess. i suppose he's covered
either way!
Nancy O wrote:
> There are several image transition scripts on this page:
>
http://www.brothercake.com/site/resources/scripts/transitions/
>
>
>
> --Nancy O.
> Alt-Web Design & Publishing
> www.alt-web.com
>
>
>
> "Perspectivist" <[email protected]>
wrote in message
> news:[email protected]...
>
>> I am new to Dreamweaver, in fact only got into it to
do my own website. I
>>
> want
>
>> to create image swaps with a fade out and then fade
in with the new image.
>> Nowhere can I find out how to do this so far. Can
anybody point me in the
>> right direction. Many thanks for your help now and
in the past.
>>
>> Perspectivist
>>
>>
>
>
>
--------------000605070301090808040601
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
i see! well, that's good to know. i didn't realize you could
do
transitions on image swaps (of course, i've rarely used them
so far).
and i just assumed the OP was actually trying to do a
slideshow, which
could still be the case i guess. i suppose he's covered
either way!<br>
<br>
Nancy O wrote:
<blockquote cite="mid:[email protected]"
type="cite">
<pre wrap="">There are several image transition
scripts on this page:
<a class="moz-txt-link-freetext" href="
http://www.brothercake.com/site/resources/scripts/transitions/">http://www.brothercake.com /site/resources/scripts/transitions/</a>
--Nancy O.
Alt-Web Design & Publishing
<a class="moz-txt-link-abbreviated" href="
http://www.alt-web.com">www.alt-web.com</a>
"Perspectivist" <a class="moz-txt-link-rfc2396E"
href="mailto:[email protected]"><[email protected]></a>
wrote in message
<a class="moz-txt-link-freetext"
href="news:[email protected]">news:[email protected]</a >...
</pre>
<blockquote type="cite">
<pre wrap="">I am new to Dreamweaver, in fact only got
into it to do my own website. I
</pre>
</blockquote>
<pre wrap="">want
</pre>
<blockquote type="cite">
<pre wrap="">to create image swaps with a fade out and
then fade in with the new image.
Nowhere can I find out how to do this so far. Can anybody
point me in the
right direction. Many thanks for your help now and in the
past.
Perspectivist
</pre>
</blockquote>
<pre wrap="">
</pre>
</blockquote>
</body>
</html>
--------------000605070301090808040601--

Help with Editable Regions and Image Swap

I need some assistance for a project I am working on, and I don't know a short way to describe. Hang with me, here it goes....
I am working with the sites 'Navigation' links. I want to use a MouseOver behavior so that the image swaps when moused over. I want the MousedOver image to remain when you are on that page. I can manually make this happen, but I am running into difficulty because I want the Navigation to be located in an un-editable region so when I add new pages, the entire site will update as I make changes to the template.
I don't know how to create this effect without manually swapping all the images via behaviors on each and every page, and when I need to do these edits, the region needs to be in an UnEditable region so that the template will update all the pages.
I guess the question is, how can I customize images from page to page in an Un-Editable region in a Template driven page?
Thanks.

Image swaps are clumsy for navigation because you have to re-craft your menus every time you edit your site. This gets very old in a hurry.
CSS styled menus are not only easier to maintain in DW they are web friendly for all devices -- especially Smartphones who may have images disabled to save on bandwidth charges.
DW comes with Spry Menus which you can customize with CSS
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
Additionally, there are some excellent DW extensions you can use to build professional looking CSS menus in seconds.
http://www.projectseven.com/products/menusystems/pmm2/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

HELP! Multiple Image swap restore problem

Hey, Im interested in learning how to perform a multiple image swap restore.
I've made a central image swap, and I want to make a few others happen on the same 'mouseover'. All done, simple. However, only the last image swap will 'restore' to the original image, and all the rest stay the same. I've ticked 'restore on mouseover' on all of the behaviours, but its so frustrating - please help me.

This is actually really easy. Setup one swap image, then double click swap image in behaviours. The asterix indicates what image is being swapped but you can add more then one. So simply select the second image you want to change at this point and another asterix will appear. Muiltiple swap actions can be applied using one swap image command.

Overlap 2 Images and Make Their Positions Relative?

I need to essentially make a hotspot on an image that is another image.
I know how to make hotspots. I know how to overlap images. But I need the overlapping image's position to be relative to the image beneath it.
How can I do this?
I have tried searching for Overlapping Images (answer: CSS)
I have also tried searching for Mapping Images to Images (no luck, just brings up info on mapping images, period)
I'm not sure what to search for to get this answer. That is why I am posting.
I am using Dreamweaver CS3. I am a total n00b but if you point me in the right direction I can figure out the rest with research.
Thank you in advance for your time.
PS- Please don't say, "Why not just merge the 2 images with an Imaging Program?" I need to do this with hundreds of images, AND I need the images available separately on my site. This would create hundreds of additional images that I need to upload.

Ignore this. I lost over half my post somehow. I'll try again. -.-
<!Session data><input id="jsProxy" type="hidden"/></p><div id="refHTML"> </div><p></p><p><input id="gwProxy" type="hidden"/>

Is it possible to overlap a image on top of flash?

Is it possible to overlap a image on top of flash?
I am thinking to use index-x for a image to overlap a flash
in html.
Since I am here, I fail this approach but I just wanna know
is it possible to do so.
How could this to be done?
thanks,

mimihuhu,
> Is it possible to overlap a image on top of flash?
It is. Not only images, but text and anything else,
including other
Flash content. The solution is to use something called WMODE,
which is
known (and has been known) to be problematic. So consider
yourself warned.
:) Here are a few notes that will probably help get you
started.
http://www.quip.net/blog/2006/flash/how-to-position-flash-beneath-other-content
David Stiller
Co-author, Foundation Flash CS3 for Designers
http://tinyurl.com/2k29mj
"Luck is the residue of good design."

How to? Overlapping slice image swaps.

Similar Messages

Maybe you are looking for