PDA

View Full Version : Stacking Images

Jeff321
9-6-03, 01:33 AM
Ok, I think this is the first time I am asking a question in the HTML forum, but I have tried many different things for this and nothing has worked. Hopefully somebody here will have an answer.

So, how can I position two images (of the same size) directly on top of each other within the same cell of a table?

I don't want to use absolute positioning for the whole page, because then for most people with different resolutions/browsers the images will be in the wrong spot on the page. They have to be exactly in the same spot in this specific cell, no matter exactly where that cell might located (in terms of pixels) on the page.

Thank you! :)

BTW: I tried this (http://forum.powweb.com/showthread.php?s=&threadid=25040) and it didn't help. It still just puts the two images next to eachother in the same cell, not on top of eachother.
Trip59
9-6-03, 02:26 AM
see the example here - http://www.tarnishedchrome.com/secondary_pages/CW5.htm look at the numbers floating over the input boxes in the puzzle.

Although, I did it slightly different, I used <div class="tdbox"> instead of the ID tags. and to go along with that make sure you have your classes as .tdbox { instead of the #tdbox.

I have had this hiccup on me about 5 times while working on the design, doing exactly what you described. in each instance it turned out to be a typo.
Jeff321
9-6-03, 02:40 AM
All I did was make those changes and it worked, thanks a lot Trip! :D
muijefr
9-6-03, 11:13 AM
The following will replace the FirstImage with the SecondImage onMouseOver and replace SecondImage with FinalImage onMouseOut and link onClick. For those not so good at crosswords.

<td>
<img border=0 src=FirstImage.sufix name=td_01 >
</td>

Somewhere else on page: the href URL could be href=javascript:void(0) if you don't want to go anywhere (javascript is one word) The above name=td_01 is the Target of each event.

<td>
<a href=URL
onMouseOver=document['td_01'].src='SecondImage.sufix'
onMouseOut=document['td_01'].src='FinalImage.sufix'>
Event Trigger</a>
</td>

the FirstImage, SecondImage, FinalImage need not be the same size but should be. Define a new <td>< img name= > for each target or use the first/only name= as the target of many images. The FirstImage and FinalImage might be the same which would make the whole thing a simple MouseOvere and where do we ever use those. The Event Trigger might be the FirstImage or AnotheImage or Text.



:D
Trip59
9-6-03, 12:19 PM
and thanks again Rainborne for the original bit
muijefr
9-7-03, 11:57 AM
RE: Jeff321

how can I position two images (of the same size) directly on top of each other within the same cell of a table... no matter exactly where that cell might located (in terms of pixels) on the page

Would you be so kind to post a one cell example of your solution. Thanks.

My above example will change one cell from another location. A fixation I got from the crossword example. The following example uses the same components as my previous example but will change the same cell as you specified.

<td>
<a href=javascript:void(0)
onMouseOver=document['td_01'].src='SecondImage.sufix'
onMouseOut=document['td_01'].src=' FinalImage.sufix'>
<img border=0 src= FirstImage.sufix name=td_01 ></a>
</td>

The FirstImage will be replaced by the FinalImage in the same cell. You might change the onMouseOut to onMouseOver (remove the SecondImage event).
:p
Jeff321
9-7-03, 05:10 PM
Sure... I didn't need to do anything fancy with JavaScript, just position two images on top of eachother in the cell. This is the code that worked for me:


<html>
<head>
<style type='text/css'>
.tdBox { position:relative; width:100%; height:100%; }
.topImage { position:absolute; top:0px; left:0px; z-index:3; }
.bottomImage { position:absolute; top:0px; left:0px; z-index:2; }
</style>
</head>
<body>
<table border=0 cellpadding=0 cellspacing=0>
<tr><td><div class='tdBox'>
<div class='bottomImage'><img src='bottom.png' width=48 height=48 border=0></div>
<div class='topImage'><img src='top.gif' width=48 height=48 border=0></div>
</div></td></tr>
</table>
</body>
</html>


The top image is a gif which is mostly transparent, so the bottom image shows through. I hope I didn't mess anything up in that example, the code I'm using it in has a lot of PHP mixed in.
muijefr
9-8-03, 12:46 AM
RE:

The top image is a gif which is mostly transparent, so the bottom image shows through. I hope I didn't mess anything up in that example, the code I'm using it in has a lot of PHP mixed in.

Interesting, works as advertised. I'm just lmao! I somewhat overworked the exercise. Thanks for taking the time.



:eek:
Jeff321
9-8-03, 04:50 PM
No problem :)
Jeff321
9-26-03, 05:05 PM
There is a compatibility problem with the above code I posted in Mozilla/Netscape browsers. Setting the bottom image to "position: relative" seems to work better.
Rick_E
9-26-03, 05:20 PM
Try making the bottom image the background image for the cell.
Jeff321
9-26-03, 05:39 PM
Wow... how could I miss that... that makes it so much easier! :)

Thanks a lot Rick!