--- 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;
--- 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");
--- 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"/>
--- 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"/>
--- 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>