Galera é o seguinte, fiz uma página em jsp para retornar dados do MySql e montar a página de acordo. Porém, eu precisei imbutir métodos onclicks que não estão funcionando, eu gostaria de entender o motivo e gostaria da ajuda de vocês.
Pra evitar uma página gigante, vou colocar apenas a parte do código importante
<%@page language="java" import="meusBeans.*" %>
<!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">
<head>
<style type="text/css">
#infCarro{
width:600px;
height:auto;
margin-bottom:5px;
margin-top:5px;
margin-left:5px;
margin-right:5px;
text-align:left;
background-color: #FFF;
}
#abrangeFotoPequena{
width:600px;
height:154px;
text-align: center;
overflow-x: scroll;
}
#obsCarro{
width:600px;
height:auto;
}
</style>
<script>
function mostraFotoGrande(foto, name){
document.getElementById("fotoCarro"+name).innerHTML = "<img src='imgs/veiculos/" + foto + "' />";
}
function desclicarLink(id){
document.getElementById("a" + id).style.color = "#FFF";
}
function clicarLink(id){
document.getElementById("a" + id).style.color = "#F00";
}
function limpaCamposForm(){
document.getElementById("nome").value = "";
document.getElementById("email").value = "";
document.getElementById("mensagem").value = "";
}
</script>
</head>
<body>
<%
ConnectDB veic = new ConnectDB();
veic.conectaBD();
String[][] carro = veic.getDadosVeiculos();
out.print("<br/><br/>");
for (int i = 0; i < carro.length; i++) {
String[] fotos = veic.getFotosVeiculo(carro[i][0].toString());
out.print("<br/>");
out.print("<div id='infCarro'>");%>
<div id="fotoCarro<%=i%>" style="width:600px; height:auto; text-align:center"></div>
<%
out.print("<div id='abrangeFotoPequena'>");
for (int j = 0; j < fotos.length; j++) {
%>
<img src="imgs/veiculos/<%= fotos[j]%>" onclick="document.getElementById('fotoCarro<%=i%>').innerHTML = <img src='imgs/veiculos/<%= fotos[j]%>'/>" width="150px" height="100px" style="margin:5px"/>
<%}
out.print("</div>");
out.print("<div id='obsCarro'><br/>");
out.print("Final da placa: " + carro[i][0] + "<br/>");
out.print("Cor: " + carro[i][1] + "<br/>");
out.print("Modelo: " + carro[i][2] + "<br/>");
out.print("Ano: " + carro[i][3] + "<br/>");
out.print("Características: " + carro[i][4]);
out.print("</div>");
out.print("</div>");
}
veic.desconectaBD();
%>
<br/><br/>
</div></div>
</body>
</html>
Bem simples, no banco de dados eu retorno um vetor com as informações de um carro, e depois outro vetor com os nomes das fotos daquele carro. Eu exibo as informações e todas as fotos de cada carro separadamente em miniatura, e gostaria que ao clicar na foto miniatura, exibisse a foto em tamanho real.
Porém, como posso ter N carros, pra exibir as fotos em tamanho real eu precisaria de uma div pra cada carro, então eu crio divs automaticamente e dou um id a elas. Nas fotos miniatura eu chamo o método onclick, jogando um na div criada automaticamente. Porém não está funcionando, eu gostaria de saber onde está o erro, e se não for possível programar dessa maneira, um jeito alternativo. Aguardo a ajuda de vocês.