|
| |
|
|
LawrenceH
Posts: 105
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
 |
Images within images - 4/14/2008 15:58:08
Hi
I am trying to display a small image with specific co-ordinates in front of a large image. A circle on a map, but the exact position of the circle can be defined.
<img src="large.jpg" name="I1" width="495" height="503">
<img src="small.jpg" name="I1" width="10" height="10">
I have tried the HTML <AREA> coords, shape and <MAP> tags, but I can’t this to work.
Can anyone offer any help?
Regards
Lawrence
|
|
|
|
jurgen
Posts: 385
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: Images within images - 4/14/2008 19:31:03
You a do that with the "z-index property".
CSS z-index Property
You have any link to your page?
_____________________________
Wedding Dresses Colorado
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Images within images - 4/15/2008 2:32:50
As Jurgen says - use absolute positioning to move the smaller image on top of the larger one.
So it'd be something like:
<div id="map">
<img src="map.gif" alt="Map" />
<img src="small.gif" alt="You are here" id="circle" />
</div>
#map {position:relative;}
#map #circle {position:absolute; top:50px; left:50px;}
Here's a TEST PAGE
It's important to have position relative on the containing div otherwise the positioned element takes it's co-ordinates from the viewport.
You could also have the map as a background image for the div and still place the circle wherever on top of it.
I suppose you could also just have different images!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
LawrenceH
Posts: 105
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
|
RE: Images within images - 4/17/2008 17:04:38
Hi
I know realise that I also want to move the small image around the big image. At first, I didn't realise that the STYLE code must go within the HEAD tags. This makes it almost impossible to modify the TOP and LEFT parameters from for example, a javascript function.
Any other ideas please?
Lawrence
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Images within images - 4/18/2008 2:24:53
No the style can be generated from javascript just as easily - doesn't have to go in the document head.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Images within images - 4/18/2008 15:20:55
Weird - I was responding to a message on this thread with a load of code but it's all disappeared!!
Oh well.
Basically - you need to use inline styles within tags within the body of the page - you can't use the whole <style ="text/css"> thing in the body.
So you just add the styles to the tags themselves - <div id="map" style="position:relative; width:100px; height:100px"> for example.
Also - you need a div with an id of map around the larger map and the smaller circle image for the code I've posted to work.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
LawrenceH
Posts: 105
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
|
RE: Images within images - 4/18/2008 15:26:45
Hi
I have created a test page and it is possible to create a style from within a Javascript function.
I am using a server to send the co-ordinates in an AJAX routine. This means the Javascript funtion with the co-ordinates and style are polled every second.
It seems that this is why the page does not load properly.
Is this possible?
Many thanks.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
