--- a/Pdf/BaladeNature/Js/balade_nature.js	dim. mars 17 12:44:36 2013 +0100
+++ b/Pdf/BaladeNature/Js/balade_nature.js	dim. mars 17 15:46:00 2013 +0100
@@ -8,58 +8,34 @@
 
 
 window.addEvent('domready', function(){
-    // Tooltips
+    // Hotspots
     (function initialize() {
-        $$(".pdocImagePulse").each(function(pulse) {
-            var mainImg  = pulse.getParent().getElement("img");
-            var pulseImg = pulse.getElement("img");
-            var tooltip  = $(pulse.get('id')+"t");
-            mainImg.setStyle("max-width", "none");
-            var pulseWidth  = 100 * pulseImg.getSize().x / mainImg.getSize().x;
-            var pulseHeight = 100 * pulseImg.getSize().y / mainImg.getSize().y;
-            var mainImgRealWidth = mainImg.getSize().x;
+        var scenario;
+        var content;
+        $$(".pdocHotspot").each(function(hotspot) {
+            scenario = hotspot.getElement("span");
+            content = $(hotspot.get('id').replace("x", "z"))
+            if (scenario && content) {
+                
+                hotspot.addEvent("click", function() {
+                    var content = $(this.get('id').replace("x", "z"));
+                    content.setStyles({"opacity": 0, "display": "block"});
+                    this.setStyle("display", "none");
+                    content.tween("opacity", 1);
+                    (function() {
+                        content.setStyle("display", "none");
+                        hotspot.setStyle("display", "block");
+                    }).delay(12000);
+                });
 
-            pulse.setStyles({
-                "width": pulseWidth + "%", "height": pulseHeight + "%",
-                "left": (pulse.getStyle("left").toFloat() - pulseWidth/2) + "%",
-                "top":  (pulse.getStyle("top").toFloat() - pulseHeight/2) + "%"
-            });
-            pulseImg.setStyle("width", "100%");
-            mainImg.setStyle("max-width", "100%");
-            mainImg.getParent().setStyle("max-width", "100%");
-
-            var fontSize = tooltip.getStyle("font-size").toFloat();
-            tooltip.setStyles({
-                "opacity": 0, "display": "block",
-                "font-size": (fontSize * mainImg.getSize().x / mainImgRealWidth)
-                    + tooltip.getStyle("font-size").replace(fontSize, "")
-            });
-            
-            var tooltipImg = tooltip.getElement("img");
-            if (tooltipImg) {
-                tooltip.setStyle(
-                    "width", (100 * tooltipImg.getSize().x / mainImgRealWidth) + "%");
-                tooltipImg.setStyle("width", "100%");
+                content.addEvent("click", function() {
+                    this.setStyle("display", "none");
+                    $(this.get('id').replace("z", "x"))
+                        .setStyle("display", "block");
+                });
             }
         });
-
-        $$(".pdocImagePulse").addEvent("click", function() {
-            var pulse   = this;
-            var tooltip = $(this.get('id')+"t");
-            pulse.setStyle("display", "none");
-            tooltip.tween("opacity", 1);
-            (function() {
-                tooltip.tween("opacity", 0);
-                pulse.setStyle("display", "block");
-            }).delay(12000);
-        });
-        
-        $$(".pdocImageTooltip").addEvent("click", function() {
-            this.tween("opacity", 0);
-            $(this.get('id').substr(0, this.get('id').length-1))
-                .setStyle("display", "block");
-        });
-    }).delay(50);
+    }).delay(100);
      
     // Effect: glow
     var effectGlow = $("effectGlow");