Copiar código del código de la siguiente manera:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-oquiv = "content-type" content = "text /html; charset = utf-8" /> />
<title> pestañas implementan la transformación de imágenes IMG </title>
<Style type = "text/css">
#Main {altura: 420px;
#Cabeza {{
Ancho: 400px;
Altura: 52px;
Pose: Absoluto;
Izquierda: 10px;
Arriba: -12px;
Color de fondo: verde;
}
#Head li {float: izquierda;
#Contenido {
Ancho: 400px;
Altura: 350px;
Color de fondo:#FC6;
Text-Align: Center;
Pose: Absoluto;
Arriba: 36px;
Izquierda: 10px;
}
</style>
</ablo>
<Body>
<div id = "main">
<div id = "cabeza">
<ul>
<li id = "tab1" onmouseover = "show (1)" style = "de fondo de fondo: #fff"> Imagen 1 </li>
<li id = "tab2" onMouseOver = "show (2)"> Imagen 2 </li>
<li id = "tab3" onMouseOver = "show (3)"> Imagen 3 </li>
<li id = "tab4" onMouseOver = "show (4)"> Imagen 4 </li>
</ul>
</div>
<div id = "contenido">
<p id = "p1"> <img src = "imagen 0"/> </p>
<p id = "p2" style = "display: none;"> <img src = "imagen 1"> </p>
<p id = "p3" style = "display: none;"> <img src = "imagen 2"/> </p>
<p id = "p4" style = "display: none;"> <img src = "imagen 3"/> </p>
</div>
</div>
</body>
<script>
Show de función (n) {
para (var i = 1; i <= 4; i ++) {
document.getElementById ("tab"+i) .style.backgroundcolor = 'verde';
document.getElementById ("P"+I) .style.display = 'Ninguno';
// Muestra el control del contenido oculto del contenido, debe ser ninguno, oculto
}
document.getElementById ("tab"+n) .style.backgroundcolor = 'white';
document.getElementById ("P"+n) .style.display = 'block';
// Cuando el bloque, el oculto se puede mostrar
}
</script>
</html>