• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Machacaz

abrir imagem selecionada dentro de uma célula de uma tabela.

3 mensagens neste tópico

Olá...

Quero construir uma página simples em html  para uma amiga que precisa disto .

Na primeira linha da tabela terei 5 imagens e gostaria que quando clicasse nelas, estas fossem abertas numa linha abaixo.

Tenho um código que já usei anteriormente para este efeito mas agora queria mudá-lo para este caso e não está a funcionar :wallbash:.

Agradecia ajuda  :)

th_xxxx-1.jpg

Este é o código que tenho:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Imagen Autores</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/mm_health_nutr.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
//--------------- LOCALIZEABLE GLOBALS ---------------
var d=new Date();
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
//---------------   END LOCALIZEABLE   ---------------

		function mostrar(coisa){
			cod = coisa.src.substring(4);
			coisa.src="imagen/imagensAutores/" + cod + ".jpg";			
		}


</script>
<style type="text/css">
<!--
.style1 {font-size: 18px}
.style2 {font-size: 16px}
.style4 {
font-style: italic;
color: #000000;
font-weight: bold;
}
.style6 {
color: #000000;
font-style: italic;
}
body {
margin-left: 25px;
margin-top: 60px;
margin-right: -10px;
margin-bottom: 60px;
}

-->
</style>

<script language="JavaScript">



</script>

</head>
<body bgcolor="#FFFFFF">
<table width="90%" height="60%" border="0" align="center" cellpadding="0" cellspacing="0" class="marco">

    <tr>
    <td>
		<div class="pageName style2" align="left"> Imagens Autores</div>    
		   
     </td>
     
     <!-- -->
     <tr>
    	<td bgcolor="#D5EDB3" class="bodyText" align="center">
            
            <img src="imagen/imagensAutores/minisapato.jpg" onclick="mostrar(this)"/>
            <img src="imagen/imagensAutores/minirosa.jpg" />
            <img src="imagen/imagensAutores/minicouve.jpg"/>
            <img src="imagen/imagensAutores/minikiwi.jpg" />
            <img src="imagen/imagensAutores/minilivro.jpg" />
            
    	</td>
     </tr>
     
    
    
    </tr>
    <!-- -->
    
    <tr align="left">
    <td  class="bodyText" align="right"> 
        <div class="pageName style2" align="left"> Imagens</div>          
        </td>   
     </tr>
     
     <tr>
     <!-- -->
     
     <td height="400" width="400" bgcolor="#D5EDB3">
     IMAGEM AQui! 
     <img src="imagen/imagensAutores/pixel.gif" />
     </td>        
     </tr>
</table>
</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

na imagem que clicas adicionas o atributo onclick a chamar uma funçao em javascript e dpois mandas escrever essa imagem.

um exemplo simples

<img src="" width="" height="" onclick="teste()" />

<div id="apresenta"></div> este div vai apresentar aqui a imagem. que tu queres

funçao em javascript

function teste(){

document.getelementById('apresenta').innerHTML = "<img src=\"\" width=\"\" height=\"\" />"

}

a ideia basica é esta.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

usando o substring como queres

na imagem metes um onclick="show('minImagem')"

function show(imagem) {
tamanho = imagem.lenght;
imagemGrande = imagem.substring(4, tamanho);
document.getElementById(elemento-onde-vai-aparecer-imagem-grande).innerHTML = ("<img src=\"+ imagemGrande +\" />");
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora