Google Map Like Pins On Image Please helpe me regarding this.

[Zeeshan Hashmi 0]

Hi

 

I have a situation. I have to create a random image (world map) through PHP. I did this. but I have to Add small PINS (like in Google Map) and that Pins will be Click able???

 

To know what i m in need please go to https://www.google.com/maps/preview?source=newuser-ws and type UK, u will see some RED PINS (having A, B, C , D etc) on its face. That pin is clickable. These sort of PIN i want on an image and that should me clickable also.

 

Please help

 

Thanks

[minnieadkins 0]

To make an image clickable do this

<img src="someImage.gif" style="cursor: pointer;" alt="this is an image" onclick="javascript_function();" />

As far as posititioning an image on top of another image, that would be tricky. I dont' work with this type of stuff so =/ the only thing I could say is use absolute positioning. I would think that would be the way to go about it. I hope someone has some insight on how to approach this.

[Zeeshan Hashmi 0]

yes, but thanks for yoru reply. the code u provided will make an image ClickAble. Thats good. Now only one thing is required that is to put this image on top on some image. Let see who can help me with this. Maybe some DIV issue. let see !

[KDEWolf 0]

You can simply use floating layers to do this via CSS. Check these links out:
http://www.hypergurl.com/csstutorial10.html
http://www.yourhtmlsource.com/stylesheets/csslayout.html
http://www.w3.org/TR/CSS21/visuren.html (section 9.5)

Any of them will work. Do you plan using transparent images for pins, like on Google Maps? If you are, remember that you'll need a hack to make PNG images to work on Internet Explorer versions prior to 7.
Or you can use the somewhat ugly GIF transparency.

Good luck.

[Zeeshan Hashmi 0]

Oh yes, i will use Transparent PNG. So i want the Hack also. Moreover, I want the PIN (Top image to ne placed on the base image) to relate to the Base Image, means there sould not be anyimpact of Screen Resolution / and Resize, it should remain active at the location where it should be. LIke if i want a pin on GOlden gate, then after resize / resolution change it should remain at the same location. Thanks