Solved

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

Posted on 2004-09-08
18
321 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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)

708 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now