Can you change Pin icon dynamically

nickstreet

Hi,

I am writing an application to display images on a map using Virtual Earth, and would like to change the colour of an associated pin when the user rolls the mouse over an image on a web page. The VEPushPin class doesn't have an icon property, only allowing you to set the icon in the constructor. As far as I can tell there are two options:

1. Add a new pin with a different icon in the same spot, and delete the old pin.

2. Inspect the HTML using javascript to obtain a reference to the img object used in the pin, and change the icon using the .src property.

Neither strike me as being particularly nice or robust. Does anyone have a more elegant solution

Thanks your help!

Derek Chan

You can try to override the CSS class when attaching to the OnMouseOver event. Look at the page using Firebug or IEToolbar to determine what element its in and then use DOM to modify the style. It would be something like:

Document.getElementByID("pin").innerHTML.Style = "black"

nickstreet

Thanks for your suggestion Derek. I needed to change the icon itself, so changing the style didn't quite fit. In the end I used a similar approach, getting a document node for the pin, finding the first child img tag and updating this object's src property. The code to this turned out to be relatively straight forward, although care would obviously have to be taken that the first img tag was always the item showing the pin's icon.

function UpdatePinIcon(pinId, icon)
{
var pinNode = document.getElementById(pinId);
if (pinNode)
{
pinNode.getElementsByTagName("img")[0].src = icon;
}
}

maulikk

Hi nickstreet,

Can you please upload the whole source code or how do you call UpdatePinIcon method and what do you pass as an argument

Regards,

Maulikk

Can you change Pin icon dynamically

Re: Can you change Pin icon dynamically

Re: Can you change Pin icon dynamically

Re: Can you change Pin icon dynamically