Question

I am coding some javascript with jQuery to fire when an img is clicked in my asp.net page.

The img is declared as follows:

<img id="zoomIn" alt="Zoom In" src="/Images/Plus.png" onclick="zoomIn();" />

And the .js file function is:

function zoomIn() {
    zoomLevel += 1;
    showMapImage();
}

function showMapImage() {
    //show the location map
    var img_url = "http://maps.google.com/maps/api/staticmap?center=" + $asp("lblCoordinates").html() + "&size=200x150&sensor=false&zoom=" + zoomLevel + "&markers=color:green%7C" + $asp("lblCoordinates").html();
    $("#imgMap").attr('src', img_url);
}

function $asp(serverID) {
    return $("[id$='" + serverID + "']");
}

This works fine in IE but not in Chrome or Firefox which makes me think there is something simple wrong somewhere that I can’t spot

Answer 1

You page contain two elements with same name\id: IMG HTML element with ID attribute "zoomIn" and javascript function with name zoomIn.

Try to rename function zoomIn or IMG#zoomIn.