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

Machacaz · May 29, 2009 at 09:57 PM

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 .

Agradecia ajuda 🙂

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>

elcsat · May 31, 2009 at 01:55 PM

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

um exemplo simples

<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.

mohican · May 31, 2009 at 04:17 PM

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 +\" />");
}

Sign In

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

Recommended Posts

Machacaz

elcsat

mohican

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information