# HG changeset patch
# User Patrick PIERRE
# Date 1363531560 -3600
# Node ID 58e48a5c5ca216ac7b2ccb032be08c7528304155
# Parent  8d893b96a36b99a615fe0373ca3ab2c37c011381
Nouvelle balise hotspot

diff -r 8d893b96a36b -r 58e48a5c5ca2 Pdf/BaladeNature/Css/balade_nature.css
--- a/Pdf/BaladeNature/Css/balade_nature.css	dim. mars 17 12:44:36 2013 +0100
+++ b/Pdf/BaladeNature/Css/balade_nature.css	dim. mars 17 15:46:00 2013 +0100
@@ -41,36 +41,20 @@
   max-height: 100%;
 }
 
-.pdocImage.tooltip, .pdocImage.hotspot {
+.pdocImageHotspot {
   float: left;
   position: relative;
 }
 
-.pdocImageHotspot {
+/* ~~~~~~ pdocHotspot ~~~~~~~ */
+
+.pdocHotspot, .pdocHotspotContent {
   position: absolute;
-}
-
-.pdocImageHotspot a {
-  display: block;
-  text-decoration: none;
-  border: 1px dotted gray;
-}
-
-.pdocImagePulse {
-  position: absolute;
-  cursor: pointer;
+  font-size: 140%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.pdocImageTooltip {
-  position: absolute;
-  display: none;
-  color: white;
-  font-size: 140%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  text-shadow: 1px 1px 1px #bbbbbb;
-}
-.pdocImageTooltip .pdocP {
+.pdocHotspotContent .pdocP {
   color: white;
 }
 
@@ -82,7 +66,7 @@
   color: #603a19;
 }
 
-/* ~~~~~ media-overlay ~~~ */
+/* ~~~~~ media-overlay ~~~~~~ */
 
 .-epub-media-overlay-active {
   background-color: yellow;
diff -r 8d893b96a36b -r 58e48a5c5ca2 Pdf/BaladeNature/Js/balade_nature.js
--- 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");
diff -r 8d893b96a36b -r 58e48a5c5ca2 Pdf/BaladeNature/balade_nature.xml
--- a/Pdf/BaladeNature/balade_nature.xml	dim. mars 17 12:44:36 2013 +0100
+++ b/Pdf/BaladeNature/balade_nature.xml	dim. mars 17 15:46:00 2013 +0100
@@ -45,13 +45,13 @@
       </cover>
     </head>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc001">
       <section>
         <p> </p>
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc002">
       <section>
         <media>
           <image id="balade_nature_002"/>
@@ -59,7 +59,7 @@
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc003">
       <section>
         <media>
           <image id="balade_nature_003"/>
@@ -67,7 +67,7 @@
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc004">
       <section>
         <media>
           <image id="balade_nature_004"/>
@@ -75,7 +75,7 @@
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc005">
       <section>
         <media>
           <image id="balade_nature_005"/>
@@ -83,7 +83,7 @@
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc006">
       <section>
         <media>
           <image id="balade_nature_006"/>
diff -r 8d893b96a36b -r 58e48a5c5ca2 Pdf/BaladeNature/balade_nature_demo.xml
--- a/Pdf/BaladeNature/balade_nature_demo.xml	dim. mars 17 12:44:36 2013 +0100
+++ b/Pdf/BaladeNature/balade_nature_demo.xml	dim. mars 17 15:46:00 2013 +0100
@@ -45,13 +45,13 @@
       </cover>
     </head>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc001">
       <section>
         <p> </p>
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc002">
       <section>
         <media>
           <image id="balade_nature_002"/>
@@ -59,7 +59,7 @@
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc003">
       <section>
         <media>
           <image id="balade_nature_003_rich"/>
@@ -80,7 +80,7 @@
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc004">
       <section>
         <media>
           <image id="balade_nature_004_rich"/>
@@ -99,7 +99,7 @@
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc005">
       <section>
         <media>
           <image id="balade_nature_005"/>
@@ -107,7 +107,7 @@
       </section>
      </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc006">
       <section>
         <media>
           <image id="balade_nature_006"/>
diff -r 8d893b96a36b -r 58e48a5c5ca2 Pdf/BaladeNature/balade_nature_rich.xml
--- a/Pdf/BaladeNature/balade_nature_rich.xml	dim. mars 17 12:44:36 2013 +0100
+++ b/Pdf/BaladeNature/balade_nature_rich.xml	dim. mars 17 15:46:00 2013 +0100
@@ -45,13 +45,13 @@
       </cover>
     </head>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc001">
       <section>
         <p> </p>
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc002">
       <section>
         <media>
           <image id="balade_nature_002"/>
@@ -59,7 +59,7 @@
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc003">
       <section>
         <head>
           <audio id="balade_nature_003_music" type="background"/>
@@ -67,8 +67,14 @@
         </head>
         <media>
           <image id="balade_nature_003_rich">
-            <hotspot x="52.8%" y="35.1%" dx="-10" dy="-10"><p>Le lynx</p></hotspot>
-            <hotspot x="19.8%" y="72.9%" dy="-10"><p>L'écureuil</p></hotspot>
+            <hotspot x="45%" y="28%" w="16%" h="14%" type="pulse" dx="-3" dy="-4" dw="0">
+              <p>Le lynx</p>
+              <scenario><init action="hide"/><onclick action="show"/></scenario>
+            </hotspot>
+            <hotspot x="13%" y="65%" w="16%" h="14%" type="pulse" dx="2" dy="-1" dw="0">
+              <p>L'écureuil</p>
+              <scenario><init action="hide"/><onclick action="show"/></scenario>
+            </hotspot>
           </image>
           <caption y="87%">
             <p>
@@ -99,17 +105,29 @@
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc004">
       <section>
         <head>
           <audio id="balade_nature_004_voice" type="smil"/>
         </head>
         <media>
           <image id="balade_nature_004_rich">
-            <hotspot x="16.8%" y="12.1%" dx="-3"  dy="-8"><p>L'épervier</p></hotspot>
-            <hotspot x="18.8%" y="35%"   dx="-5"  dy="-10"><p>Les moutons</p></hotspot>
-            <hotspot x="49.8%" y="59.1%" dx="-12" dy="-11"><p>Le chamois</p></hotspot>
-            <hotspot x="14.8%" y="78.1%" dx="-7"  dy="-8"><p>Le castor</p></hotspot>
+            <hotspot x="11%" y="5%" w="16%" h="14%" type="pulse" dy="12" dw="0">
+              <p>L'épervier</p>
+              <scenario><init action="hide"/><onclick action="show"/></scenario>
+            </hotspot>
+            <hotspot x="13%" y="28%" w="16%" h="14%" type="pulse" dy="5" dw="0">
+              <p>Les moutons</p>
+              <scenario><init action="hide"/><onclick action="show"/></scenario>
+            </hotspot>
+            <hotspot x="43%" y="52%" w="16%" h="14%" type="pulse" dx="-4" dy="-3" dw="0">
+              <p>Le chamois</p>
+              <scenario><init action="hide"/><onclick action="show"/></scenario>
+            </hotspot>
+            <hotspot x="7%" y="71%" w="16%" h="14%" type="pulse" dy="-2" dw="0">
+              <p>Le castor</p>
+              <scenario><init action="hide"/><onclick action="show"/></scenario>
+            </hotspot>
           </image>
           <caption y="87%">
             <p>
@@ -137,21 +155,27 @@
       </section>
     </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc005">
       <section>
         <head>
           <audio id="balade_nature_005_music" type="background"/>
         </head>
         <media>
           <image id="balade_nature_005">
-            <hotspot x="74.3%" y="26.1%" dx="-17" dy="-16"><image id="zoom_oiseau"/></hotspot>
-            <hotspot x="59%"   y="74.1%" dx="-14" dy="-12"><image id="zoom_herisson"/></hotspot>
+            <hotspot x="67%" y="19%" w="16%" h="14%" type="pulse" dx="-6" dy="-8" dw="18">
+              <image id="zoom_oiseau"/>
+              <scenario><init action="hide"/><onclick action="show"/></scenario>
+            </hotspot>
+            <hotspot x="51%" y="67%" w="16%" h="14%" type="pulse" dx="-4" dy="-6" dw="10">
+              <image id="zoom_herisson"/>
+              <scenario><init action="hide"/><onclick action="show"/></scenario>
+            </hotspot>
           </image>
         </media>
       </section>
      </topic>
     <!--====================================================================-->
-    <topic>
+    <topic xml:id="tpc006">
       <?effect-glow GLOW?>
       <section>
         <media>