HTML help

I'm trying to create a web page with a picture and multiple overlays. The overlays would likely be multiple GIF's with transparent backgrounds. I can manage to do this with one GIF overlayed on a base picture but cannot find information on how to do it with more than one overlay.

Any web page graphics gurus out there?

hirsutus

 

if i'm understanding your question correctly; there are 2 ways to go about it. (is your goal to create a multi layered image?)

1) via photoshop or illustrator create multiple layers (one for each one of your gifs) and export as a single gif

2) if you want do combine multiple images without re-rendering them you can use CSS to place the images on top of each other passing in the xy offset. should look something like this (syntax is not exact, i could be way off on the syntax)

<div xpos="300" ypos="400"><img src="dog1.gif"/></div>
<div xpos="300" ypos="400"><img src="cat1.gif"/></div>

thus the 2 images will overlap each other. as long as the image background are transparent you should be good to go.

hope this helps

 

Since I'm trying to do it on the web page, dynamically, I'll experiment with option two.

thanks,

hirsutus

 

Since I wanted to display GIFs with tranparent backgrounds against a base layer, I needed a way to swap in and out the new/alternate GIF's. (I've cut pieces of my code and abbreviated them a little - syntax may not be perfect.)

In the STYLE properties:

#ourHouse { BORDER-RIGHT: 3px inset; BORDER-TOP: 3px inset;
LEFT: 5px; BORDER-LEFT: 3px inset; WIDTH: 520px; COLOR: #f2fc36; BORDER-BOTTOM: 3px inset;
POSITION: absolute; TOP: 0px }

#swapLayer { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px;
LEFT: 8px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 520px;
POSITION: absolute; TOP: 3px; BORDER-RIGHT-WIDTH: 0px }

In the BODY:

<DIV><IMG id=ourHouse alt="" src="House.jpg"/></DIV>
<DIV><IMG id=swapLayer alt="" src="Blank.gif"/ name=Show1></DIV>

<A onmouseover="document.images.Show1.src='Cat.gif'; return true"
onmouseout="document.images.Show1.src='Blank.gif'; return true">CAT</A>
<BR>

<A onmouseover="document.images.Show1.src='Dog.gif'; return true"
onmouseout="document.images.Show1.src='Blank.gif'; return true">DOG</A>
<BR>

Thanks for the pointers, now, on to the next challenge!

hirsutus