Sat, 2003-06-07 00:51
Hi,
I want to display several images side by side, with some transparent crosses on top of some.
For example let's say we have an alphabet with the pictures a, b, c etc. and that the cross is the picture X, I want the following layout :
|-----|
|abX |
|dXfg|
|-----|
(under the X pictures you would see the c and e images, and the images' position depends on the size of the wrapping box, poorly represented here with | and - signs)
The only dirty way that I have found to do this is by using the following code :
<div>
<!-- first letter with a cross -->
<span style='position: relative; top: 0px; left: 0px; width=60px; height:60px;>
<img src=a.gif width=60 height=60>
<span style='position:absolute; left:0px; top:0 px; width:60px; height:60px;'>
<img src=X.png width=60 height=60>
</span>
</span>
<!-- second letter, without a cross -->
<img src=b.gif width=60 height=60>
etc.
</div>
Can anybody help me, or is there a better way ?
Thx in advance
Sat, 2003-06-07 21:59
#1
I'd like to do inline superimposed transparent pictures
Hi Alexouin,
Have you tried using letters underneath as background images.
<div style="background-image:url(c.jpg);"> <img src="x.gif"> </div>
Sun, 2003-06-08 07:05
#2
I'd like to do inline superimposed transparent pictures
That's a clever approach, Tony. I was going to suggest the use of filters, though that would of course be IE-only, which isn't much good outside an intranet application. Using background and foreground images is a much neater solution.
Sun, 2003-06-08 19:23
#3
I'd like to do inline superimposed transparent pictures
Yes it's a good idea thank you !! 
Sun, 2003-06-08 19:23
#4
I'd like to do inline superimposed transparent pictures
It was from me (I forgot the username). Cheers.