PDA

View Full Version : how to overlay an image over another


rph105
11-20-2007, 01:03 PM
how can i overlay a GIF or PNG over another image

d a v e
11-20-2007, 03:50 PM
in your graphics editor. what have you got?

rph105
11-20-2007, 10:03 PM
in your graphics editor. what have you got?

ive got dreamweaver cs3 and dreamweaver 8, how can i do it?

lux
11-20-2007, 10:44 PM
do you mean create a rollover effect

e.g. image 1 is displayed when the web page is requested, then when a user hovers over image 1 it changes to image 2

or do you want to take one image and place another image over the top to create a new image consisting of two images?

rph105
11-20-2007, 11:11 PM
do you mean create a rollover effect

e.g. image 1 is displayed when the web page is requested, then when a user hovers over image 1 it changes to image 2

or do you want to take one image and place another image over the top to create a new image consisting of two images?

yh i want to place another image over another image, creating a new image consisting of 2 images

d a v e
11-21-2007, 05:54 AM
what graphics editor have you got like photoshop or psp or fireworks or... ?

dreamweaver is for editing html not grahpics.

rph105
11-21-2007, 10:24 AM
ive got photoshop and fireworks

d a v e
11-21-2007, 10:56 AM
then open one in fireworks and then import the other one on top of it (ctrl + R to import)

if you're still stuck then post a link to both images and say exactly what you want to do with them

rph105
11-21-2007, 11:02 AM
then open one in fireworks and then import the other one on top of it (ctrl + R to import)

if you're still stuck then post a link to both images and say exactly what you want to do with them

nah see, sorry if im bad at explaining, i wanted to overlay an image over another in dreamweaver, is that possible

d a v e
11-21-2007, 01:06 PM
why do you want to do it in Dreamweaver? just do it fireworks... ;)
have you got an example of what you want or can you show us in a picture?

tux
11-21-2007, 01:10 PM
Its hard to get exactly what you are trying to acheive.

You could use a table cell using one image set as the background, then insert the other in the cell. This wont give you much flexibility tho'.

Or you could use two layers placing one image in each. You could then place them on the page to position them more acurately.

Or use Photoshop or Fireworks as Dave suggests and use your two images to make a composite image and then place that onto your page.

Maybe post a link to something similar to what you are trying to acheive.

Regards, Paul

domedia
11-21-2007, 01:18 PM
No extra tags needed.
Give each image an ID, then use CSS to absolutely position each of these images wherever you want. In CSS you can use z-index to decide which image is on top of the other.

d a v e
11-21-2007, 06:08 PM
i don't see any advantage to absolutely positioning one image over another when it's easier and more robust to do it in fireworks.

Cary
11-21-2007, 10:44 PM
Or insert the gif using the img tag and then place other image beneath it by using background styling on the gif's img tag. This would limit the area of the background image to the size of the gif unless you also add padding to the img styling.

dakkumar
07-22-2009, 04:40 AM
There is an advantage to being able to overlay images, or other objects, in Dreamweaver. See http://www.digimigi.net/trees/pages/treesPortalFS.htm for an example.

I made the page in this url using an older version of DW that had explicit support for "layers". I would like to know how to layer using DW CS4. I don't see any explicit support for overlays in the DW CS4.

d a v e
07-22-2009, 11:30 AM
There is an advantage to being able to overlay images, or other objects, in Dreamweaver. See http://www.digimigi.net/trees/pages/treesPortalFS.htm for an example.

I made the page in this url using an older version of DW that had explicit support for "layers". I would like to know how to layer using DW CS4. I don't see any explicit support for overlays in the DW CS4.

and what *is* the advantage then?

dakkumar
07-22-2009, 06:25 PM
Dave,

In the url I sent in a table is overlaid on top of an image. I can change the table at will without having to mess with the image.

If I were to fuse the table and the image in Photoshop, say, I would have surrendered my ability to edit the table as I please.

Arun

DWcourse
07-22-2009, 07:13 PM
Layers are simply absolutely positioned divs. In CS4, once you make an AP, you can access it through the AP Elements window or by clicking on it.

d a v e
07-22-2009, 07:39 PM
Dave,

In the url I sent in a table is overlaid on top of an image. I can change the table at will without having to mess with the image.

If I were to fuse the table and the image in Photoshop, say, I would have surrendered my ability to edit the table as I please.

Arun

but that's irrelevant because the original poster wants to overlay one IMAGE over another IMAGE so there is very little to edit - and everything could be done again easily in photoshop.

dakkumar
07-22-2009, 07:52 PM
Dave,

What if someone needs to switch out one image for another but leave the other as it is? Yes it could be done in Photoshop, but would it not be so much easier in DW.

I will try out DWCourse's prescription.

Arun

d a v e
07-22-2009, 08:51 PM
depends on how you're positioning them: absolute positioning can be tricky to keep from falling apart at different resolutions, and using a table for layout as you did in the url is not considered good practice anymore (for quite a few years now).
it's really not much more difficult in ps - couple of minutes more maybe than in DW which isn't significant unless you're constantly swapping out one of the images.

a combined image also means you may save a reasonable amount in file size as one image made from 2 would only be x kb whereas overlaying a second image in DW would be y kb + z kb (a composite image versus 2 separate images with their own file weight.

again without a concrete problem of a url with the actual images to look at it's difficult to be more definitive about which method would be best in this situation but i think that the composite image route is cleaner and more robust ;)

jeremyncole
01-01-2010, 09:14 PM
hi there, I'm a motion designer and am used to using photoshop and after effects. I've began designing my first web sight in photoshop and have followed intsructions to get my files into dreamweaver correctly.

a vital part of my website is that my 3 png's overlap. One as a background that is always there, another in the foreground that is always there, and another in between that changes with a click.

i've managed to set one as the background and then insert the foreground png ontop, but now i can't get anything in between.

is there a way i can just overlay my edited png's on top of each other in dreamweaver or should i start again in flash??

thanks for any advice you can offer, i can offer any video editing advice in return!!

jeremyncole
01-01-2010, 09:21 PM
no worries, i've just created what i needed using 'Insert' - 'Layout Objects' - Ap Div' and then laid them over one another. I know this may sound like an obvious solution but it'd been driving me crazy. however, Please let me know if this is not a good idea!

DWcourse
01-01-2010, 09:23 PM
One as a background that is always there, another in the foreground that is always there, and another in between that changes with a click.

It's kind of hard to picture what you're after. Anyway you could post an image of it (and maybe post what you have so far and at url for us to look at it)?

jeremyncole
01-01-2010, 10:14 PM
Thanks for the reply. sorry, i can't post an image via url yet.

but in a nutshell my completed idea will appear as a tv screen that shows my portfolio/showreel of videos and stills that can be navigated by the viewer. a similar idea is here, http://www.gorgeous.co.uk/ , only they've used a painting's frame rather than a tv screen.

so i assumed the best way to design the tv would be to design the tv as a background, then overlay the video's and images over the tv's screen (one per page, and a menu to navigate between pages). then, i've created the frame of a tv screen as a transparent png that frames the video's so it all appears that my portfolio/showreel is playing on the tv's screen.

sounds complicated, but the final look is designed and will be very easy to navigate once completed. as i've said, i've just managed to create my desired effect using AP Div's. But as far as i can tell these are only possible to place as fixed objects, where i'd like mine to remain central no matter the size of the browser. for example the work on http://www.gorgeous.co.uk/ always remains central, even if the browser's resized. :x

DWcourse
01-02-2010, 12:27 AM
If I understand you, the "frame" image could be used as the background for a div and the other image could be placed as an img within the div (you could use padding or margin around the img to position it correctly over the frame.

Search the forum for info on centering a layout but basically it's done by setting the left and right margin of a div containing the whole layout to auto (and giving the container div a width).

BTW, AP items position relative to the browser window UNLESS they are within a div with the position property set to absolute or relative: http://www.w3schools.com/Css/pr_class_position.asp

jeremyncole
01-02-2010, 06:28 AM
thanks, very helpful and much appreciated