• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 336
  • Last Modified:

How can I control an IMG to be on top of another IMG?

Hi,

I have 2 IMGs: one with dynsrc tag and another with src tag.  
How do i write the HTML code so that the <IMG src> will be on top of <IMG dynsrc>?
I've used z-index of style tag but the <MG dynsrc always stay on top.
0
3Mann
Asked:
3Mann
  • 8
  • 6
  • 2
  • +2
3 Solutions
 
RozanaZCommented:
Hi,
I think you need to set position, top and left parameters, as in exmaple:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<img src="http://www.experts-exchange.com/images/certification.gif">
<img border="1" style="z-index: 3; position: relative; top: -5px; left: -8px;" dynsrc="http://www.experts-exchange.com/images/vipAccess.gif">
</BODY>
</HTML>
0
 
seanpowellCommented:
You can't... IE renders the dynsrc video as the topmost object.
0
 
cwolvesCommented:
well I had an idea that didn't work, but it might be something to look at if this is really important...

<select> tags position themselves on top of <img dynsrc> elements, so I put a select box on top of a dynsrc element.
<iframe>s position themselves on top of <select> elements, so I put an iframe on top of that...unfortunately the iframe and the select are now behind the <img dynsrc>...dunno why.

The idea was that you can position anything on top of an iframe, so in terms of layer structure you'd have <img dynsrc>, <select>, <iframe>, <img src>

unfortunately, as I said it didn't work, but you might be able to find something else that can go on top of a <img dynsrc> tag and then place your image on top of that.  Some type of object maybe...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
seanpowellCommented:
As noted - I don't believe there is anything that will render on top of the dynsrc object.
Nice try though :-)
0
 
cwolvesCommented:
the select element will, it's just that when I put something on top of -that-, they both end up behind the dynsrc
0
 
seanpowellCommented:
Only because the browser is confused.
They are both windowed objects, so refreshing or scrolling a page with both will likely randomly mix their behaviours.

I do have to ask though, what's the point in having the video if it's being covered up?
0
 
cwolvesCommented:
no, you can control them with the z-index.  if the z-index of the select is higher than the dynsrc, it'll be on top.

so the select is now the top element, I -should- be able to put an iframe on top of that, but it falls apart.  I was trying the same "hack" that's commonly used to put menus on top of select elements.

it's probably only partially covered as part of a layout.
0
 
seanpowellCommented:
>>you can control them with the z-index.

No - you can't...
0
 
seanpowellCommented:
At least not on my IE - the behaviour is erratic:
http://www.pdgmedia.com/ee/dynsrc.html
0
 
cwolvesCommented:
yeah, mine is too...you can control it to a point...when the page loads it's usually in the right z-index, at least for me.  Usually.  other times the select dynsrc takes precidence, and other times it shows through on the borders of the select...

it's really odd...the z-index -is- being used, but I think it's only at the instant the page loads...it's ignored after that.  After a few moments the dynsrc pops up to the front...

I dunno what the hell is going on  :-)  Just that it's probably not possible.
0
 
seanpowellCommented:
Yeah - I thought you'd stumbled on something, but every test I do is the same.
Since both are windowed objects there doesn't seem to be any way to force the rendering :-(
0
 
cwolvesCommented:
yeah, I did too...I think it was just chance that the layering happened to be coinciding with what I set the z-indexes to since I only ran 2 or 3 tests the first time.
0
 
COBOLdinosaurCommented:
dynsrc is designed not to have anything on top of it because it is intended for inline-video with continuous update.  Such IE propietary properties normally will not follow the normal CSS rules and I doubt you will get another image on top of it, unless it is also specified with dynsrc.  However even then, I thing the built in Microslop behaviour will be to bring it to the top when it gets refreshed.

Cd&
0
 
seanpowellCommented:
It would - but I'm still curious why it needs to be covered at all...
0
 
COBOLdinosaurCommented:
Yeah, me too.  The whole point of dynsrc is to provide real time updates, so covering it seems rather counter-intuitive.

Cd&
0
 
cwolvesCommented:
if you -really- want real-time updates in an image, use an animated gif and leave the connection open.  Whenever you need to update the image, draw a new frame and send it to the client.
0
 
3MannAuthor Commented:
hi guys, thanks for the replies.
i also tried using a panel to cover the dynsrc but also failed.
same as select, when z-index is manipulated, it's just around the border that becomes on top.

as answer to sean's question, why iwant to cover the dynsrc: well, i posted another question here.  its about changing the mouse pointer if mouseover the dynsrc.  this is not possible so i just thought that covering the dynsrc with <img src="transparent.gif"> will solve my prob.  i  found out now that i have stumbled into another prob. :)

any more updates?
if there are none, im planning to to split the points.
i like COBOL's explanation(Date: 09/08/2004 12:27PM EST) so im planning to give him more points.
0
 
seanpowellCommented:
I'm sorry 3Mann - you've hit a roadblock here.
I'd call Mr. Gates for you and complain, but we're no longer on speaking terms.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 8
  • 6
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now