Copie o código do código da seguinte forma:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<Title> guias Implementar a transformação da imagem img </ititle>
<Style type = "text/css">
#Main {Hight: 420px;
#Cabeça {{
Largura: 400px;
Altura: 52px;
pose: absoluto;
Esquerda: 10px;
Topo: -12px;
Background-Color: verde;
}
#Head li {float: esquerda;
#Contente {
Largura: 400px;
Altura: 350px;
Background-Color:#fc6;
Alinhamento de texto: centro;
pose: absoluto;
Topo: 36px;
Esquerda: 10px;
}
</style>
</head>
<Body>
<div id = "main">
<div id = "head">
<ul>
<li id = "tab1" onmouseover = "show (1)" style = "background-color: #fff"> figura 1 </li>
<li id = "tab2" onmouseover = "show (2)"> figura 2 </li>
<li id = "tab3" onmouseover = "show (3)"> figura 3 </li>
<li id = "tab4" onmouseover = "show (4)"> figura 4 </li>
</ul>
</div>
<div id = "content">
<p id = "p1"> <img src = "figura 0"/> </p>
<p id = "p2" style = "display: nenhum;"> <img src = "figura 1"> </p>
<p id = "p3" style = "display: nenhum;"> <img src = "figura 2"/> </p>
<p id = "p4" style = "display: nenhum;"> <img src = "figura 3"/> </p>
</div>
</div>
</body>
<Cript>
Função mostra (n) {
for (var i = 1; i <= 4; i ++) {
document.getElementById ("Tab"+i) .style.backgroundColor = 'Green';
document.getElementById ("p"+i) .style.display = 'nenhum';
// exibe o controle do conteúdo oculto do conteúdo, não deve ser nenhum, oculto
}
document.getElementById ("Tab"+n) .style.backgroundColor = 'White';
document.getElementById ("p"+n) .style.display = 'bloco';
// Quando o bloco, o oculto pode ser exibido
}
</script>
</html>