Solved

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

Posted on 2004-09-08
18
327 Views
Last Modified: 2010-04-09
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
Comment
Question by:3Mann
  • 8
  • 6
  • 2
  • +2
18 Comments
 
LVL 8

Expert Comment

by:RozanaZ
ID: 12004259
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
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 100 total points
ID: 12004948
You can't... IE renders the dynsrc video as the topmost object.
0
 
LVL 9

Assisted Solution

by:cwolves
cwolves earned 50 total points
ID: 12006793
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
Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

 
LVL 31

Expert Comment

by:seanpowell
ID: 12007202
As noted - I don't believe there is anything that will render on top of the dynsrc object.
Nice try though :-)
0
 
LVL 9

Expert Comment

by:cwolves
ID: 12007211
the select element will, it's just that when I put something on top of -that-, they both end up behind the dynsrc
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12007347
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
 
LVL 9

Expert Comment

by:cwolves
ID: 12007717
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12007843
>>you can control them with the z-index.

No - you can't...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12007927
At least not on my IE - the behaviour is erratic:
http://www.pdgmedia.com/ee/dynsrc.html
0
 
LVL 9

Expert Comment

by:cwolves
ID: 12007972
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12008235
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
 
LVL 9

Expert Comment

by:cwolves
ID: 12008255
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 150 total points
ID: 12008850
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12008880
It would - but I'm still curious why it needs to be covered at all...
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12009683
Yeah, me too.  The whole point of dynsrc is to provide real time updates, so covering it seems rather counter-intuitive.

Cd&
0
 
LVL 9

Expert Comment

by:cwolves
ID: 12009697
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
 
LVL 1

Author Comment

by:3Mann
ID: 12013830
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12016162
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

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question