ThinkGeo.com    |     Documentation    |     Premium Support

Change Marker on Hover

#1

Is there a simple way to change the Marker image of a marker when hovering over the marker image?  I am also using a popup, which shows up when I hover over the marker, so there must be an event to listen into?


Thanks!



#2

Hi, Jeremy, 
  
 That’s right. You should register ‘mouseover’ event on the marker, and you could Change URL of the Icon Image in the event handler. The code is as following; one thing I want to point out is this method is used for SimpleMarkerOverlay only: 
  
    marker.events.register(‘mouseover’, marker, function(evt) { 
         marker.setUrl(’…/…/theme/images/sample.png); 
     }); 
  
 Any more questions please let me know.  
  
 Thanks, 
 Howard

#3

Thanks for the reply.  Unfortunately I am using the InMemoryMarkerOverlay.  We are currently exploring a way to do this with jQuery, for lack of better options at this point.  If there is any better way you can think of, please let me know.


Thanks!



#4

Jeremy,



Okay; for InMemoryMarkerOverlay, we can override the initialize method of client Marker to change the Marker image on the fly, the code is as following, please copy it at the beginning of the body tag.



        Class.Extent(Marker.prototype, {
            initialize: function(json, imgRootPath) {
                var popupJson = json.popup;
                var lonlat = ConvertJsonToLonLat(json.lonlat);
                var icon = ConvertJsonToIcon(json.img, imgRootPath);
                this.element = new OpenLayers.Marker.GeoMarker(json.id, lonlat, icon);
                if (json.opacity && json.opacity != 'undefined') {
                    this.element.setOpacity(json.opacity);
                }
                OnMarkerInitialized(this.element);
            }
        });

        function OnMarkerInitialized(marker) {
            marker.events.register('mouseover', marker, function(evt) {
                marker.setUrl('../../theme/images/sample.png');
            });
        }


Any more questions please let me know. 



Thanks,

Howard