Create a single HTML object, and modify its style attributes to move it whenever generate is called -- this will hopefully allow us to add events to it. Note that the event registration in this code currently fails: wehn triggerEvent is called, this.listeners['click'] is called, which is something I have not yet been able to fully understand.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@133 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Marker.js

@@ -18,6 +18,9 @@ OpenLayers.Marker.prototype = {
     /** @type OpenLayers.Map */
     map: null,
     
+    object: null,
+    
+    events:null,
     
     /** 
     * @param {OpenLayers.Icon} icon
@@ -26,6 +29,12 @@ OpenLayers.Marker.prototype = {
     initialize: function(icon, lonlat) {
         this.icon = icon;
         this.lonlat = lonlat;
+        this.object = OpenLayers.Util.createImage(
+            this.icon.url,
+            this.icon.size
+        );
+        this.events = new OpenLayers.Events(this, this.object, null);
+        this.events.register("click", this, this.onclick );
     },
     
     /** 
@@ -38,13 +47,14 @@ OpenLayers.Marker.prototype = {
     generateMarker: function(pixel) {
         // Create a div here, and set the location to the pixel above modified
         // by the icon size.
-        var iconPosition = pixel.add(this.icon.offset.x, this.icon.offset.y);
+        this.object.style.top = (pixel.y+this.icon.offset.y) + "px"
-        var markerObject = OpenLayers.Util.createImage(this.icon.url,
+        this.object.style.left = (pixel.x+this.icon.offset.x) + "px"; 
-                                                       this.icon.size,
+        this.object.onclick = this.onclick;
-                                                       iconPosition);
+        return this.object;
-        return markerObject;
     }, 
-    
+    onclick: function(evt) {
+        alert('onclick');
+    }
     /** @final @type String */
     CLASS_NAME: "OpenLayers.Marker"
 }