1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
| <!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Titre</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
#page{
margin:auto;
width:1200px;
}
#div_bouton {
width:250px;
float:left;
text-align:center;
}
#div_bouton p {
margin:10px auto;
text-align:center;
}
#div_image {
width:525px;
height:700px;
float:left;
border:1px solid #e0e0e0;
box-shadow: 1px 1px 20px #333;
}
#image_grande {
width:525px;
height:700px;
}
button{
border:0; padding:0; margin:0;
width:200px; height:30px; /* dimensions des boutons (meme que image de fond) */
font-weight:bold; font-size:1.2em; font-style:italic; /* texte des boutons */
padding-top:5px; /* centrage vertical des textes */
background: url(http://i45.servimg.com/u/f45/11/05/13/65/button61.jpg) center; /* image de fond des boutons */
cursor:pointer;
}
button:hover {
background: url(http://i45.servimg.com/u/f45/11/05/13/65/button62.jpg) center; /* image de fond des boutons (hover) */
}
</style>
<script type="text/javascript">
var picture = [
'http://images3.photomania.com/1780499/1/rad88744.gif',/* Animation Chiens Mag */
'http://images3.photomania.com/1780742/1/rad70F1C.gif',/* Animation Le Mans */
'http://i45.servimg.com/u/f45/11/05/13/65/diapo_14.jpg',/* diapo 3 */
'http://i45.servimg.com/u/f45/11/05/13/65/diapo_15.jpg',/* diapo 4 */
'http://i45.servimg.com/u/f45/11/05/13/65/diapo_16.jpg',/* diapo 5 */
'http://i45.servimg.com/u/f45/11/05/13/65/diapo_17.jpg',/* diapo 6 */
'http://i45.servimg.com/u/f45/11/05/13/65/diapo_18.jpg',/* diapo 7 */
'http://i45.servimg.com/u/f45/11/05/13/65/diapo_19.jpg',/* diapo 8 */
'http://i45.servimg.com/u/f45/11/05/13/65/diapo_20.jpg',/* diapo 9 */
'http://i45.servimg.com/u/f45/11/05/13/65/diapo_21.jpg',/* diapo 10 */
'http://i45.servimg.com/u/f45/11/05/13/65/diapo_22.jpg',/* diapo 11 */
'http://i45.servimg.com/u/f45/11/05/13/65/coordo10.jpg' /* diapo 12 */
];
var maxPict = picture.length;
function showImage( num){
var oImg = document.getElementById('image_grande');
if( num < maxPict){
oImg.src = picture[num];
}
}
window.onload = function(){
showImage(0);
};
</script>
</head><body>
<div id="page">
<h1></h1>
<div id="div_bouton">
<p><button onclick="showImage(0);">Chiens de Mag</button></p>
<p><button onclick="showImage(1);">Le Mans 2011</button></p>
<p><button onclick="showImage(2);">Diaporama 3</button></p>
<p><button onclick="showImage(3);">Diaporama 4</button></p>
<p><button onclick="showImage(4);">Diaporama 5</button></p>
<p><button onclick="showImage(5);">Diaporama 6</button></p>
<p><button onclick="showImage(6);">Diaporama 7</button></p>
<p><button onclick="showImage(7);">Diaporama 8</button></p>
<p><button onclick="showImage(8);">Diaporama 9</button></p>
<p><button onclick="showImage(9);">Diaporama 10</button></p>
<p><button onclick="showImage(10);">Diaporama 11</button></p>
<p><button onclick="showImage(11);">Nos Coordonnées</button></p>
</div>
<div id="div_image">
<img id="image_grande" src="..." alt="" />
</div>
</div>
</body></html> |
Partager