Fabio_html
Novo Membro
Registrado
14 Mensagens
0 Curtidas
- Home
- >
- Fórum
- >
- Profissional
- >
- Programação, Sc...
- >
- Dúvida cruel em HTML
esquiloesper...
Cyber Highlander
Moderador
7.1K Mensagens
2.2K Curtidas
O que você precisa é apender um pouco mais sobre o uso e as diferenças entre "id", "class" e "name" - e também como o Html, CSS ou Javascript lidam com estes atributos.
Você infringiu uma regra extremamente importante:
Name e ID não podem ser repetidos no mesmo documento porque eles são referenciais. Por isto devem ser únicos, para identificar cada elemento individualmente.
Somente o atributo "class" permite repetições dentro do mesmo documento. Classes servem para identificar um ou mais grupos de elementos.
Outro erro é que todas as suas DIV's ficaram do lado de fora do body. Este é um erro primário!
Em resumo, você precisa de apenas uma div com o Id="janela". Veja aí:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body onload="inicio()">
<div id="janela">
<a title="Fechar" onmouseup="fechar();">X</a>
<img id="imagem" src="">
</div>
<div class="barra">
<img src="_img/homem.jpg" onclick="abrir(this);">
</div>
<div class="barra">
<img src="_img/farcry.jpg" onclick="abrir(this);">
</div>
</body>
</html>[code=JavaScript]var janela;
var imagem;
function inicio() {
janela = document.getElementById('janela');
imagem = document.getElementById('imagem');
}
function abrir(img) {
imagem.src = img.src;
janela.style.display="block";
}
function fechar() {
janela.style.display = "none";
}[/code]
[code=CSS]#janela {
position:absolute;
top: 40px;
left: 300px;
width: 500px;
border-top: 1px solid #000000;
border-right: 2px solid #666666;
border-bottom: 2px solid #000000;
border-left: 1px solid #999999;
z-index: 1000;
display:none;
}
#janela a {
font: 22px Verdana, Arial, Sans-serif;
color: red;
margin: 0;
float: right;
}
#janela img {
width: 500px;
height: 500px
}
.barra img {
width: 100px;
height: 100px
}[/code]
Navegar é preciso, viver... também. 
Fabio_html
Novo Membro
Registrado
14 Mensagens
0 Curtidas
esquiloesperto disse:Olá Fábio. Seja bem-vindo a esta comunidade.
O que você precisa é apender um pouco mais sobre o uso e as diferenças entre "id", "class" e "name" - e também como o Html, CSS ou Javascript lidam com estes atributos.
Você infringiu uma regra extremamente importante:
Name e ID não podem ser repetidos no mesmo documento porque eles são referenciais. Por isto devem ser únicos, para identificar cada elemento individualmente.
Somente o atributo "class" permite repetições dentro do mesmo documento. Classes servem para identificar um ou mais grupos de elementos.
Outro erro é que todas as suas DIV's ficaram do lado de fora do body. Este é um erro primário!
Em resumo, você precisa de apenas uma div com o Id="janela". Veja aí:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body onload="inicio()">
<div id="janela">
<a title="Fechar" onmouseup="fechar();">X</a>
<img id="imagem" src="">
</div>
<div class="barra">
<img src="_img/homem.jpg" onclick="abrir(this);">
</div>
<div class="barra">
<img src="_img/farcry.jpg" onclick="abrir(this);">
</div>
</body>
</html>
[code=JavaScript]var janela;
var imagem;
function inicio() {
janela = document.getElementById('janela');
imagem = document.getElementById('imagem');
}
function abrir(img) {
imagem.src = img.src;
janela.style.display="block";
}
function fechar() {
janela.style.display = "none";
}[/code]
[code=CSS]#janela {
position:absolute;
top: 40px;
left: 300px;
width: 500px;
border-top: 1px solid #000000;
border-right: 2px solid #666666;
border-bottom: 2px solid #000000;
border-left: 1px solid #999999;
z-index: 1000;
display:none;
}
#janela a {
font: 22px Verdana, Arial, Sans-serif;
color: red;
margin: 0;
float: right;
}
#janela img {
width: 500px;
height: 500px
}
.barra img {
width: 100px;
height: 100px
}[/code]
Realmente preciso atentar a isso. Estou engatinhando em web design e isso ai agora é de grande ajuda. Só que tem um porém, quando coloquei seu código pra rodar, a imagem não seu zoom...
Mesmo assim obrigado pela ajuda.
