TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Piste:
wiki:ressources:narration-interactive

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
Dernière révision Les deux révisions suivantes
wiki:ressources:narration-interactive [2020/11/20 17:32]
damien.muti 		wiki:ressources:narration-interactive [2020/11/20 19:21]
damien.muti [Programmation HTML/CSS : Étude d'un exemple]
Ligne 74: Ligne 74:
 {{ :wiki:ressources:treat.gif?100 |}} {{ :wiki:ressources:treat.gif?100 |}}
 ---- ----
 +
 +les fichiers HTML/CSS de la page sont disponibles sur le lien suivant : {{ :wiki:ressources:thunderpaw.zip |}}
  
 == Code source HTML == == Code source HTML ==
 +Le code source de la page est relativement simple:
  
-Le code source de la page est très simple:  
 <code> <code>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ligne 84: Ligne 86:
  <title>THUNDERPAW: IN THE ASHES OF FIRE MOUNTAIN</title>  <title>THUNDERPAW: IN THE ASHES OF FIRE MOUNTAIN</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
- <script type="text/javascript"> +  
- <!--//--><![CDATA[//><!-- + <script type="text/javascript" src ="../JS/JS.js"></script> 
- startList = function() { +  
- + <link rel="stylesheet" type="text/css" href="CSS/style.css">
- if (document.getElementById) { +
- navRoot = document.getElementById("nav"); +
- for (i=0; i<navRoot.childNodes.length; i++) { +
- node = navRoot.childNodes[i]; +
- if (node.nodeName=="LI") { +
- node.onclick=function() { +
-  +
- this.className = (this.className == "on") ? "off" : "on"; +
- +
- } +
-     } +
-   } +
- } +
- } +
- window.onload=startList; +
- //--><!]]> +
- +
- </script> +
- <style type="text/css"> +
- +
- /*general stuff*/ +
- body { +
- background: #333 url(redbg.gif) fixed repeat-x bottom; +
- margin-bottom: 0%; +
- margin-left: 0%; +
- margin-top: 0%; +
- margin-right: 0%; +
- font-family: "Courier New", Courier, monospace; +
- font-size: 12px;  +
- } +
- a:link { +
- color: #ffffcc; +
- text-decoration: none; +
- } +
- a:visited { +
- text-decoration: none; +
- color: #ffffcc; +
-  +
- } +
- a:hover { +
- text-decoration: none; +
- color: #f60; +
- text-indent:6px; +
- } +
- a:active { +
- text-decoration: none; +
- color: #f60; +
- } +
- h1 { +
- position: absolute; +
- bottom: 0%; +
- left: 3%; +
- font-size: 12px; +
- color: #f60;  +
- } +
- +
- h2 { +
- position: absolute; +
- bottom:7%; +
- left:3%; +
- font-size: 12px; +
- color: #f60;  +
-  +
- } +
- +
- #logo { +
- width: 503px; +
- height: 165px; +
- margin: auto; +
- background: url(thunderpawtitle.png) no-repeat center scroll; +
- } +
- +
- img { +
- border: none; +
- } +
- </style> +
- <link rel="stylesheet" type="text/css" href="THUNDERPAW%20IN%20THE%20ASHES%20OF%20FIRE%20MOUNTAIN_fichiers/index.css">+
  </head>  </head>
  <body>  <body>
  <div id="logo"></div>  <div id="logo"></div>
- <div style=" height:100%; width:100%;"> + <div id="divMainImage" > 
- <img src="THUNDERPAW%20IN%20THE%20ASHES%20OF%20FIRE%20MOUNTAIN_fichiers/mainimg.gif"  + <img id="mainImage" src="images/mainimg.gif" >
- style="position:absolute; +
- float:right; +
- right:0px; +
- bottom:0px;">+
  </div>   </div> 
  
Ligne 190: Ligne 111:
  </ul>  </ul>
  <h1>  <h1>
- <a href="http://twitter.com/repoghost" target="top" border="0"><img src="THUNDERPAW%20IN%20THE%20ASHES%20OF%20FIRE%20MOUNTAIN_fichiers/redtwit.gif"></a>  + <a href="http://twitter.com/repoghost" target="top" border="0"><img src="images/redtwit.gif"></a>  
- <a href="http://feeds.feedburner.com/thunderpaw"><img src="THUNDERPAW%20IN%20THE%20ASHES%20OF%20FIRE%20MOUNTAIN_fichiers/rss.gif"></a>  + <a href="http://feeds.feedburner.com/thunderpaw"><img src="images/rss.gif"></a>  
- <a href="http://www.patreon.com/repoghost"><img src="THUNDERPAW%20IN%20THE%20ASHES%20OF%20FIRE%20MOUNTAIN_fichiers/treat.gif"></a>+ <a href="http://www.patreon.com/repoghost"><img src="images/treat.gif"></a>
  </h1>  </h1>
  <h2> * WARNING *   <h2> * WARNING * 
Ligne 200: Ligne 121:
  </body>  </body>
 </html> </html>
 +</code>
  
 +== Code CSS ==
 +<code>
 +/*general stuff*/
 +body {
 +  background: #333 url(../images/redbg.gif) fixed repeat-x bottom;
 + margin-bottom: 0%;
 + margin-left: 0%;
 + margin-top: 0%;
 + margin-right: 0%;
 + font-family: "Courier New", Courier, monospace;
 + font-size: 12px;
 +}
 +
 +a:link {
 + color: #ffffcc;
 + text-decoration: none;
 +}
 +a:visited {
 + text-decoration: none;
 + color: #ffffcc;
 +}
 +
 +a:hover {
 + text-decoration: none;
 + color: #f60;
 + text-indent:6px;
 +}
 +
 +a:active {
 + text-decoration: none;
 + color: #f60;
 +}
 +
 +h1 {
 + position: absolute;
 + bottom: 0%;
 + left: 3%;
 + font-size: 12px;
 + color: #f60;
 +}
 +
 +h2 {
 + position: absolute;
 + bottom:7%;
 + left:3%;
 + font-size: 12px;
 + color: #f60;
 +}
 +
 +#logo {
 + width: 503px;
 + height: 165px;
 + margin: auto;
 + background: url(../images/thunderpawtitle.png) no-repeat center scroll;
 +}
 +
 +img {
 + border: none;
 +}
 +/***********************************************/
 +@charset "utf-8";
 +/* CSS Document */
 +
 +
 +ul {
 + margin:0;
 + padding:0;
 + list-style: none;
 + width:200px;
 +}
 +
 +ul li { /*MAIN MENU*/
 + position: relative;
 + width:200px; 
 +}
 +/* keep folowing styles together..........................*/
 +* html ul ul {
 + margin-left:-16px;/* ie5 fix */
 + voice-family: "\"}\""; 
 + voice-family: inherit;
 +}
 +* html ul li {float:left;/* hide float from ie5*/}
 +* html ul ul {
 + width:relative;
 + w\idth:200px;
 + voice-family: "\"}\""; 
 + voice-family: inherit;
 +}
 +* html ul ul {margin-left:0;/* hide margin from ie5*/}
 +
 +/* keep above styles together .............*/
 +
 +li ul { /* sublink container ...*/
 + margin-left: 10%;
 + padding: 10px;
 + position: relative;
 + display:none;
 +
 +
 +}
 +li ul li { /* sublinks ....*/
 +    width:150px;
 + height:17px;
 + border-left:1px solid white;
 + border-bottom:1px solid white;
 + text-align: right;
 +}
 +
 +/* Styles for Menu Items */
 +ul li a {
 + display: block;
 + text-decoration: none;
 + line-height: none;
 + height: 20px;
 + padding: 2px;
 +}
 +li li a {background:none}
 +
 +/* set dropdown to default */
 +li:hover li a, li.over li a {
 +   background-color: none;
 +   font-weight:normal;
 +   text-decoration:none;
 +}
 +
 +/* this sets all hovered lists to red */
 +li a:hover,
 +li:hover a, li.over a,
 +li:hover li a:hover, li.over li a:hover {
 + text-decoration: inherit;
 + text-indent: 6px;
 + background-color: none;
 + font-weight: bold;
 +}
 +
 +li ul li  {  } /* Sub Menu Styles */
 + li.on ul { display: block } /* The magic */
 +li.off ul{display:none}
 +
 + 
 +#nav {
 + 
 +  position:fixed;
 +  bottom: 15%;
 +  left: 3%;
 +} 
 +#divMainImage {
 + height:100%; 
 + width:100%;
 +}
 +#mainImage{
 + position:absolute;
 + float:right;
 + right:0px;
 + bottom:0px;
 +}
 </code> </code>
 +
 +== Code Javascript ==
 +<code>
 +startList = function() {
 +
 +if (document.getElementById) {
 + navRoot = document.getElementById("nav");
 + for (i=0; i<navRoot.childNodes.length; i++) {
 + node = navRoot.childNodes[i];
 + if (node.nodeName=="LI") {
 + node.onclick=function() {
 + this.className = (this.className == "on") ? "off" : "on";
 + }
 +    }
 +  }
 + }
 +}
 +window.onload=startList;
 +</code>
 +
 +Ce code en Javascript lance la fonction //startlist// dès le chargement de la page.
 +L'algorithme est le suivant :
 +
 +<code>
 +if (document.getElementById)
 +</code>
 +Si la fonction //getElementById// appliqué au document renvoie //true//, alors on effectue le bloc d'instruction qui suit :
 +
 +<code>
 +navRoot = document.getElementById("nav");
 +</code>
 +Récupérer tous les éléments de la bare de navigation identifiée par //ID="nav"//
 +
 +<code>
 +for (i=0; i<navRoot.childNodes.length; i++)
 +</code>
 +Pour l'ensemble des éléments de la barre de navigation (on fait varier un indice //i//) effectuer le bloc d'instruction suivant :
 +<code>
 +node = navRoot.childNodes[i];
 +</code>
 +Récupérer le nœud d'indice //i// et la placer dans la variable //node//
 +
 +<code>
 +if (node.nodeName=="LI")
 +</code>
 +Tester si le nœud précédent vaut //"LI"//
 +
 +<code>
 +if (node.nodeName=="LI")
 +</code>
 +Tester si le nœud précédent vaut //"LI"//. Si le test est vrai (//true//), on lance l'instruction suivante:
 +
 +<code>
 +node.onclick=function() {
 +  this.className = (this.className == "on") ? "off" : "on";
 +}
 +</code>
 +Lorsqu'on clique sur le nœud //node// en question, on lance la fonction //function()// qui réalise le test conditionnel suivant :
 +<code>
 +this.className = (this.className == "on") ? "off" : "on";
 +</code>
 +**Si** le nom de la classe (//className//) à laquelle appartient le nœud //node// (repéré ici par le pointeur //this//) vaut //"on"//, **alors** on change sa valeur en //"on"// (//this.className = "off"//), **sinon** (si //this.className == "off"//), **alors** on change sa valeur en //"on"// (//this.className = "on"//).
 +
 +
 +=== La page d'introduction ===
 +Lorsqu'on clique sur //>>begin<<//, on arrive sur la page d'introduction de la narration :
 +{{ :wiki:ressources:page_intro.png?400 |}}
 +
 +Cette page contient un seul bouton //"NEXT"// qui renvoie vers la page qui suit.
 +
 +== Code HTML ==
 +Le code HTML est le suivant :
 +<code>
 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +<html xmlns="http://www.w3.org/1999/xhtml">
 +<head>
 +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +<title>THUNDERPAW_ INTRO</title>
 +<style type="text/css">
 +#text {
 +vertical-align: top;
 +border: 0px;
 +width:616px;
 +margin-left: auto;
 +margin-right: auto;
 +margin-bottom: 0%;
 +} 
 +body {
 +    background: url(0bg.gif) fixed repeat-x bottom;
 + margin-bottom: 0%;
 + margin-left: 0%;
 + margin-top: 0%;
 + margin-right: 0%;
 +
 +}
 +</style>
 +<link rel="stylesheet" type="text/css" href="Vcomic.css" />
 +
 +</head>
 +
 +<body>
 +
 +<h1>>THUNDERPAW_INTRO</h1>
 +<h2><a href="http://thunderpaw.co/chselect.html">[CHAPTER SELECT]</a> <a href="http://thunderpaw.co">[MAIN MENU]</a></h2>
 +
 +<center>
 +<div id="text">
 +  <img src="0.gif">
 + <a href="2.html"><img src="next.gif"></a>
 +</div>
 +
 +</body>
 +</html>
 +
 +</code>
 +
 +
 +On remarque que le bouton "NEXT" est repéré par le lien :
 +<code>
 +<a href="2.html"><img src="next.gif"></a>
 +</code>
 +
 +Ce lien renvoie vers la page "2.html"
 +
 ===== Ressources et exemples ===== ===== Ressources et exemples =====
 ---- ----
wiki/ressources/narration-interactive.txt · Dernière modification: 2020/11/21 12:57 de tomaok02

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Noncommercial 4.0 International
CC Attribution-Noncommercial 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki