Nov 8, 2009

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

free web hosting
Open Discussion & Free Web Hosting > Computers & Tech > Programming > Scripting > JavaScript

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

Zeeshan Hashmi
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 http://maps.google.com/ 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

Comment/Reply (w/o sign-up)

minnieadkins
To make an image clickable do this
CODE
<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.

Comment/Reply (w/o sign-up)

Zeeshan Hashmi
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 !

Comment/Reply (w/o sign-up)

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

Comment/Reply (w/o sign-up)

Zeeshan Hashmi
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

Comment/Reply (w/o sign-up)


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : google, map, pins, image, helpe

  1. 12 Javascript Image Galleries
    (0)
  2. Enlarge Image Script
    (22)
    Hi, this simple one line script changes the image size and source on your thumbnail picture without
    reloading the page or using popups, just paste this code into the BODY section of your HTML
    document: CODE Best regards, edit: adding the missing ' of the src on the ondblclick
    event.....
  3. Unobtrusive Javascript Image Rollovers
    really cool & useful.. (0)
    i find this really cool..gr8 piece of code. image rollovers Create image rollovers for your
    navigation without hardcoding any JavaScript into the HTML code on your Web pages. Easy to
    implement, even for beginners, and works across all browsers. Degrades nicely for visitors with
    JavaScript turned off. CODE img {border: none;} ul {list-style-type:none;} ul li
    {display:inline;} function isDefined(property) {   return (typeof property !=
    'undefined'); } var rolloverInitialized = false; function rolloverInit() {   if
    (!rolloverInitialized && isDe....
  4. Dynamically Change The Background Image On Mouse Effects!
    easy code to dynamically change the background image (4)
    stun ur visitor with a new bg image on every mouse click of his! easy code to dynamically change
    the background image. Copied from http://www.scriptworm.com/scriptengine/visit.php?id=30296
    QUOTE control the background image using the links on your site. control the color using
    onMouseOver, onMouseOut, onClick, and a combination of all of them. place the code below between
    the and tags within the HTML page where you want the link to appear. edit the link text provided to
    point at the page you would like to open. Option 1: use this to change the background ....

    1. Looking for google, map, pins, image, helpe

See Also,

*SIMILAR VIDEOS*
Searching Video's for google, map, pins, image, helpe
advertisement



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

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com