Code for overlapping images [Archive]

View Full Version : Code for overlapping images

fungusmonkey

07-26-2006, 08:11 PM

Hey there everyone. I have a problem with some images I'm working with and the code looks like this:

<table>
<TD width=100% height=202><center>
<IMG height=202 src="UTS-IMG/holder_main.gif" width=655 border=0>
<DIV style="POSITION: relative">
<DIV style="LEFT: -201px; POSITION: absolute; TOP: -244px">
<IMG src="UTS-IMG/UTS_logo_main.gif">
</DIV></DIV>
</center>
</TD>
</table>

What it does is move the UTS_logo_main.gif over the holder_main.gif image, so that they overlap. My problem is that while this looks fine in IE, when I load it in Firefox, it doesn't work. Am I missing something? Is it even possible to accomplish this in FF, or should I start trying to figure out another way to overlap these images? You can check out what I mean at:

http://uts.kenroberts.com/test/test.html

Try opening it in IE first, and then Firefox and you'll see how the positioning is off. Anyone know why that is?

jscheuer1

07-27-2006, 07:24 AM

Jacobian

09-05-2007, 01:43 AM

is there any way of putting a jpg image on top of a .swf flash object in either html/css or php i made a flash banner but lost original and cannot edit it anymore:mad:
all i want is the right hand side of it though and if it is possible to overlap the LHS with an image that would fix the problem :)

Thanks,
Jacobian

jscheuer1

09-05-2007, 04:35 AM

It would likely take a bit of trial and error to position the image as desired, but it could be done just as I mentioned above. With one important distinction. The Flash tag(s) (their are usually two per Flash item) must have their wmode set to transparent. Here is a little more on that aspect of it:

Follow the detailed information at:

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14201

Or, if this short version (good in most cases) fixes it, so much the better! Add in this language to your object/embed tag:

Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

Add the following attribute to the EMBED tag:

wmode="transparent"

Or, if you are using two object tags, as can and is sometimes done, add the param tag to both of them.

If you are using script to generate the tags (as is frequently done to avoid the 'click to activate' feature in some browsers), the wmode transparent must be passed to the script. This is easily accomplished but, varies depending upon the sort of script one uses. Some scripts do it automatically.

eleven82

09-05-2007, 02:57 PM

I've done this but I used a transparent gif, but the outcome will be the same.

CSS CODE :

#flash {
width:780px;
height:318px;
z-index:-1;
}

img.key {
position:absolute;
left:0px;
top:315px;
z-index:1;
}

Edit the flash div to your size and edit the img.key positioning to where you want it. You can also name .key what ever you want (img.whatever), But you cannot have a space between the two.

HTML CODE :

<div id="flash">

<img class="key" src="image.jpg" />

ADD FLASH FILE

</div>

That should do it for you.

jscheuer1

09-05-2007, 03:15 PM

I've done this but I used a transparent gif, but the outcome will be the same.

CSS CODE :

#flash {
width:780px;
height:318px;
z-index:-1;
}

img.key {
position:absolute;
left:0px;
top:315px;
z-index:1;
}

. . .

I'm a little surprised that this works, and perhaps it will not in some browsers. A z-index of less than 0 often makes things completely invisible.

eleven82

09-05-2007, 07:40 PM

It works fine for me in IE6/7 and FF. I don't know about Safari, but if someone has it try it out and let me know if it works. I've never seen negative numbers invisible, not saying it won't, just never saw that.