do something when user hovers over point on map.

vurbanism/static/js/vurbanism.js

@@ -58,20 +58,23 @@ $(function() {
   map.addLayers(layers);
   map.setCenter(center, 12);
 
-  mapControl = new OpenLayers.Control.SelectFeature(layers[1], {hover: false});
+  mapControl = new OpenLayers.Control.SelectFeature(layers[1], {hover: true});
   zoomControl = new OpenLayers.Control.ZoomToMaxExtent();
   map.addControl(mapControl);
 //  map.addControl(zoomControl);
   mapControl.activate();
 //  zoomControl.activate();
   layers[1].events.on({
-    'featureselected': onFeatureSelect
+    'featureselected': onFeatureSelect,
+    'featureunselected': onFeatureUnselect
   });  
 });
 
 
 function onFeatureSelect(f) {
-  $.noop();
+  var id = f.feature.attributes.id;
+//  $('img').removeClass('mapSelect');
+  $('[data-id=' + id + ']').find('img').addClass("mapSelect");
 /*
   var id = f.feature.attributes.id;
   $.getJSON("flyover", {'id': id}, function(json) {
@@ -84,6 +87,10 @@ function onFeatureSelect(f) {
 */
 }
 
+function onFeatureUnselect(f) {
+  var id = f.feature.attributes.id;
+  $('[data-id=' + id + ']').find('img').removeClass("mapSelect");
+}
 
 //will highlight the feature id's passed in arr
 function highlightFeatures(arr) {

vurbanism/templates/flyovers.html

@@ -58,12 +58,14 @@ a img {
 
 .imageWrapper {
   float: left;
-  width: 140px;
+  width: 100px;
+  height: 100px;
   text-align: center;
 }
 
 .imagesWrapper {
   overflow: auto;
+  margin-top: 10px;
 }
 
 .videoCategory {
@@ -102,6 +104,11 @@ a img {
   -webkit-box-shadow: 0px 0px 1.5em;
   box-shadow: 0px 0px 1.5em;
   }
+
+.mapSelect {
+  width: 100px;
+  height: 100px;
+}
   </style>
   <title>Vertical Urbanism: Flyovers in Mumbai</title>
   <link rel="stylesheet" type="text/css" href="/static/css/colorbox.css" />