Solved

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

Posted on 2004-09-08
18
328 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Sticky Menu 24 36
Create an automated page index 9 47
Make Session back to empty 9 30
Responsive Font Size 6 26
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 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