Copier le code du code comme suit:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> />
<Title> Tabs Implémentez la transformation d'image IMG </TITME>
<Style type = "text / css">
#Main {hauteur: 420px;
#Tête {{
Largeur: 400px;
hauteur: 52px;
Pose: absolu;
Gauche: 10px;
En haut: -12px;
Color en arrière-plan: vert;
}
#Head li {float: gauche;
#Contenu {
Largeur: 400px;
hauteur: 350px;
Color d'arrière-plan: # fc6;
Texte-aligne: Centre;
Pose: absolu;
En haut: 36px;
Gauche: 10px;
}
</ style>
</ head>
<body>
<div id = "main">
<div id = "head">
<ul>
<li id = "tab1" onMouseOver = "show (1)" style = "background-color: #fff"> image 1 </li>
<li id = "tab2" onMouseover = "show (2)"> image 2 </li>
<li id = "tab3" onMouseover = "show (3)"> image 3 </li>
<li id = "tab4" onMouseOver = "show (4)"> image 4 </li>
</ul>
</div>
<div id = "contenu">
<p id = "p1"> <img src = "image 0" /> </p>
<p id = "p2" style = "affichage: aucun;"> <img src = "image 1"> </p>
<p id = "p3" style = "affichage: aucun;"> <img src = "image 2" /> </p>
<p id = "p4" style = "affichage: aucun;"> <img src = "image 3" /> </p>
</div>
</div>
</docy>
<cript>
Fonction show (n) {
pour (var i = 1; i <= 4; i ++) {
document.getElementById ("tab" + i) .style.backgroundColor = 'Green';
document.getElementById ("p" + i) .style.display = 'Aucun';
// Afficher le contrôle du contenu caché du contenu, il ne devrait pas être caché, caché
}
document.getElementById ("tab" + n) .style.backgroundColor = 'White';
document.getElementById ("p" + n) .style.display = 'block';
// Lorsque le bloc, le caché peut être affiché
}
</cript>
</html>