Modifications pour le document Code test
sur 2021/10/25 09:05
sur 2021/11/23 20:56
Résumé
Détails
- Propriétés de la Page
-
- Contenu
-
... ... @@ -1,90 +1,187 @@ 1 -{{html clean="false"}} 2 -<div id="box vert" style="border: solid green"> 3 - <div id="html"> 4 - <body> 5 - <div style="display:flex"> 6 - <div id="box bleu" style="border: solid blue"> 7 - <h1>Mon super Test</h1> 8 - <div id="paragraphe" style="display:flex; background-color:purple;color:blue;" > 9 - <p style="border: solid black;">box 1 !</p> 10 - <p style="border: solid black;">Box 2 !</p> 11 - <p style="border: solid black;">Box 3 !</p> 12 - <p style="border: solid black;">Box 4 !</p> 13 - </div> 14 - </div> 15 - </div> 16 - </body> 17 - </div> 18 - 19 - 20 - 21 - 22 - 23 - <div id="carrouselle_photo" style="display:flex"> 24 - <div id="box rouge" style="border:solid red"> 25 - <div style="height:310px; width:300px; padding-left:1em; float:right"> 26 - <div id="slideshow1" class="slide" style=""><div><img src="/xwiki/bin/download/Main/WebHome/pionniers-veillee-2020.jpeg?width=450"></div></div> 27 - <div id="slideshow2" class="slide" style="display: none"><div><img src="/xwiki/bin/download/Main/WebHome/timothee-technique-de-feu-5.jpeg?width=450"></div></div> 28 - <div id="slideshow3" class="slide" style="display: none"><div><img src="/xwiki/bin/download/Main/WebHome/DSCN5058.JPG?width=450"></div></div> 29 - <div id="slideshow4" class="slide" style="display: none"><div><img src="/xwiki/bin/download/Main/WebHome/P1220426.JPG?width=450"></div></div> 30 - <div id="slideshow5" class="slide" style="display: none"><div><img src="/xwiki/bin/download/Rouges/WebHome/Les-pios-preparent.jpg?width=450"></div></div> 31 - <div id="slideshow6" class="slide" style="display:none"> <div><img src="/xwiki/bin/download/Main/WebHome/paul-casserolle-sur-le-feu.JPG?width=450"></div></div> 32 - </div> 33 - </div> 1 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 +<html> 3 +<head> 4 +<title>Menu déroulant en Javascript</title> 5 +<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 6 + 7 +<script type="text/javascript"> 8 +<!-- 9 +window.onload=montre; 10 +function montre(id) 11 + { 12 + var d = document.getElementById(id); 13 + for (var i = 1; i<=10; i++) 14 + { 15 + if (document.getElementById('smenu'+i)) 16 + {document.getElementById('smenu'+i).style.display='none';} 17 + } 18 + if (d) 19 + {d.style.display='block';} 20 + } 21 +//--> 22 +</script> 23 + 24 + 25 +<style type="text/css"> 26 +<!-- 27 +/* CSS issu des tutoriels http://css.alsacreations.com */ 28 +body { 29 +margin: 0; 30 +padding: 0; 31 +background: white; 32 +font: 80% verdana, arial, sans-serif; 33 +} 34 +dl, dt, dd, ul, li { 35 +margin: 0; 36 +padding: 0; 37 +list-style-type: none; 38 +} 39 +#menu { 40 +position: absolute; 41 +top=; 42 +bottom:80%; 43 +left: 0px; 44 +z-index:100px; 45 +width: 100%; 46 +} 47 +#menu dl { 48 +float: left; 49 +width: 12em; 50 +position: relative; 51 +margin: 0 2px; 52 +} 53 +#menu dt { 54 +cursor: pointer; 55 +text-align: center; 56 +font-weight: bold; 57 +background: #ccc; 58 +border: 1px solid gray; 59 + 60 +} 61 +#menu dd { 62 +background-color: #ccc; 63 +position: absolute; 64 +bottom:1.5em; 65 +width:100%; 66 +} 67 +#menu li { 68 +text-align: center; 69 +} 70 +#menu li a, #menu dt a { 71 +color: #000; 72 +text-decoration: none; 73 +display: block; 74 +height: 100%; 75 +border: 0 none; 76 +} 77 +#menu li a:hover, #menu dt a:hover { 78 +background: #eee; 79 +} 80 + 81 +#site { 82 +position: absolute; 83 +z-index: 1; 84 +top : 70px; 85 +left : 10px; 86 +color: #000; 87 +background-color: #ddd; 88 +padding: 5px; 89 +border: 1px solid gray; 90 +} 91 + 92 +a {text-decoration: none; 93 +color: black; 94 +color: #222; 95 +} 96 +--> 97 +</style> 98 +</head> 99 + 100 +<body > 101 + 102 +<div id="menu" > 103 +<dl> 104 +<dt onmouseover="javascript:montre();"><a href="#" title="Retour à l'accueil">Accueil</a></dt> 105 +</dl> 106 + 107 +<dl> 108 +<dt onmouseover="menuDeroulant('smenu1');" >Menu 1</dt> // faire apparaitre smenu1 passage de la souris 109 +<dd id="smenu1" style="display:none;" > // ne pas l'afficher 110 +<ul > 111 +<li><a href="#">Sous-Menu 1.1</a></li> 112 + 113 +<li><a href="#">Sous-Menu 1.2</a></li> 114 +<li><a href="#">Sous-Menu 1.3</a></li> 115 +<li><a href="#">Sous-Menu 1.4</a></li> 116 +<li><a href="#">Sous-Menu 1.5</a></li> 117 +<li><a href="#">Sous-Menu 1.6</a></li> 118 +</ul> 119 + 120 +</dd> 121 +</dl><dl> 122 +<dt onmouseover="menuDeroulant('smenu1');" >Menu 1</dt> 34 34 35 - <div id="Javascript"> 36 - <script type="text/javascript"> 37 - 38 - start_slideshow(1, 6, 3000); 39 - 40 - function start_slideshow(start_frame, end_frame, delay) { 41 - setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay); 42 - } 43 - 44 - function switch_slides(frame, start_frame, end_frame, delay) { 45 - return (function() { 46 - Effect.Fade('slideshow' + frame); 47 - frame = Math.floor(Math.random()*(end_frame-start_frame+1))+start_frame; 48 - //if(console) console.log("Next photo: " + frame); 49 - setTimeout("Effect.Appear('slideshow" + frame + "');", 850); 50 - setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850); 51 - }) 52 - } 53 - 54 - var isGood = document.location.href.startsWith("https://"); 55 - var isWrong = document.location.href.startsWith("http://"); 56 - console.log("Insisting? " + isGood + " " + isWrong); 57 - if(!isGood && isWrong) { 58 - if(console && console.log) console.log("Redirecting to the https side."); 59 - document.location.replace("https://" + document.location.href.substring("http://".length)); 60 - } 61 - </script> 62 - </div> 63 - 64 - </div> 124 +<dd id="smenu1" style="display:none;" > // ne pas l'afficher 125 +<ul > 126 +<li><a href="#">Sous-Menu 1.1</a></li> 127 + 128 +<li><a href="#">Sous-Menu 1.2</a></li> 129 +<li><a href="#">Sous-Menu 1.3</a></li> 130 +<li><a href="#">Sous-Menu 1.4</a></li> 131 +<li><a href="#">Sous-Menu 1.5</a></li> 132 +<li><a href="#">Sous-Menu 1.6</a></li> 133 +</ul> 134 + 135 +</dd> 136 +</dl> 137 + 138 + 139 +<dl> 140 +<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt> 141 +<dd id="smenu2"> 142 +<ul> 143 +<li><a href="#">Sous-Menu 2.1</a></li> 144 +<li><a href="#">Sous-Menu 2.2</a></li> 145 + 146 +<li><a href="#">Sous-Menu 2.3</a></li> 147 +<li><a href="#">Sous-Menu 2.4</a></li> 148 +</ul> 149 +</dd> 150 +</dl> 151 + 152 +<dl> 153 +<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt> 154 + 155 +<dd id="smenu3"> 156 + 157 +<ul> 158 +<li><a href="#">Sous-Menu 3.1</a></li> 159 +<li><a href="#">Sous-Menu 3.2</a></li> 160 +<li><a href="#">Sous-Menu 3.3</a></li> 161 +<li><a href="#">Sous-Menu 3.4</a></li> 162 + 163 +<li><a href="#">Sous-Menu 3.5</a></li> 164 + 165 +</ul> 166 +</dd> 167 +</dl> 168 + 169 +<dl> 170 +<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt> 171 +<dd id="smenu4"> 172 +<ul> 173 + 174 +<li><a href="#">Sous-Menu 4.1</a></li> 175 + 176 +<li><a href="#">Sous-Menu 4.2</a></li> 177 +<li><a href="#">Sous-Menu 4.3</a></li> 178 +</ul> 179 +</dd> 180 +</dl> 181 + 182 + 65 65 </div> 66 - 67 -{{/html}} 68 - 69 -(% style="display:flex" %) 70 -((( 71 -(% id="box bleu" style="border: solid blue" %) 72 -((( 73 -= Hello = 74 - 75 -(% id="paragraphe" style="display:flex; background-color:purple;color:blue;" %) 76 -((( 77 -(% style="border: solid black;" %) 78 -box 1 ! 79 - 80 -(% style="border: solid black;" %) 81 -Box 2 ! 82 - 83 -(% style="border: solid black;" %) 84 -Box 3 ! 85 - 86 -(% style="border: solid black;" %) 87 -Box 4 ! 88 -))) 89 -))) 90 -))) 184 + 185 + 186 +</body> 187 +</html>