4 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 18 hours 2 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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> 

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 6 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

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.

Anonymous
Anonymous's picture
Guru

I'd like to do inline superimposed transparent pictures

Yes it's a good idea thank you !! Smile

Anonymous
Anonymous's picture
Guru

I'd like to do inline superimposed transparent pictures

It was from me (I forgot the username). Cheers.