Images within images (Full Version)

All Forums >> [Web Development] >> General Web Development



Message

LawrenceH -> 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 -> 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?



Tailslide -> 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!



LawrenceH -> 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 -> 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.



Tailslide -> 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.



LawrenceH -> 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.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875