Estou querendo fazer com que esse sistema puxe as imagens do banco de dados, seria possível? quem puderia me ajuda? agradeço, abração, fica com Deus. Vlw.
imagens.jsp
// Imagens
var myPix = new Array(4)
myPix[0] = "u2";
myPix[1] = "skank";
myPix[2] = "redhot";
myPix[3] = "barao";
// Tarjas
var myText = new Array(4)
myText[0] = "Tarja U2";
myText[1] = "Tarja Skank";
myText[2] = "Tarja Red Hot Chili Peppers";
myText[3] = "Tarja Barão Vermelho";
// Variáveis
var format = ".jpg"; // formato das imagens
var timer = "4000"; // tempo, em milésimos de segundos
var i = 1; // não mexer.
var intervalo; // criada variável global da animação
function start() {
intervalo = window.setInterval("change()",timer); // Inicia a animação
document.getElementById(0).className = "imgatual";
}
// Função quando clica na imagem pequena exibe ela grande.
function abrir() {
var main = document.getElementById("exibicao");
var iten = main.getElementsByTagName("img");
if (iten) {
for (var i=0;i<iten.length;i++) {
if (iten[i].className == "imgmenu") {
iten[i].onclick = function() { // quando clicar na imagem executar os comandos
limpa(); // função limpa
this.className = "imgclick"; // coloca borda do click
document.getElementById("image").src = '../images/' + myPix[this.id] + format; // exibe a imagem grande
document.getElementById("tarja").innerHTML = myText[this.id]; // coloca a tarja
}
}
}
}
}
// Função que limpa as bordas que estão com class=imgclick
function limpa() {
var main = document.getElementById("exibicao");
var iten = main.getElementsByTagName("img");
if (iten) {
for (var i=0;i<iten.length;i++) {
if (iten[i].className == "imgclick") { // busca quais imagens estão com class=imgclick
iten[i].className = "imgmenu"; // as quais forem muda para imgmenu
}
}
}
}
function borda() {
var img = arguments[0]; // recebe o por parametro a ID da imagem
var main = document.getElementById("exibicao");
var iten = main.getElementsByTagName("img");
if (iten) {
for (var i=0;i<iten.length;i++) { // aqui modifica a borda da imagem que está com a class=igmatual ou class="imgclick" para imgmenu
if ((iten[i].className == "imgatual") || (iten[i].className == "imgclick")) {
iten[i].className = "imgmenu";
}
}
document.getElementById(img).className = "imgatual"; // aqui coloca a borda na imagem atual
}
}
// Função que exibe a imagem grande!
function change() {
var tam = myPix.length;
if (i < tam) {
document.getElementById("image").src = 'images/' + myPix[i % tam] + format; // exibe a imagem grande
borda(i); // modifica a borda nas imagens pequenas
document.getElementById('tarja').innerHTML=myText[i]; // coloca a tarja na imagem
if (i == tam) i = -1;
i++;
}else { i = 0; }
}
window.onload = function() {
abrir();
start();
}
[/code
[code]
imagens.css
body {
font-family:Trebuchet MS;
font-size:14px;
}
.codigo {
width:260px;
border:1px dashed;
background-color:#E6E6FA;
padding: 4px 4px;
}
.bigcodigo {
width:550px;
border:1px dashed;
background-color:#E6E6FA;
padding: 4px 4px;
}
#transp {
position: absolute;
top: 260px;
left: 20px;
width: 515px;
height: 50px;
background: #000000;
padding: 5px;
-moz-opacity:0.5;
opacity: .5;
filter:alpha(opacity=50);
-khtml-opacity: 0.5;
}
#tarja {
position: absolute;
top: 260px;
left: 20px;
width: 515px;
height: 50px;
padding: 5px;
z-index: 1;
font-size: 0.8em;
font-weight: bold;
color: #ffffff;
}
.imgmenu {
border:2px solid #000000;
margin-top:2px;
margin-bottom:2px;
cursor: pointer;
}
.imgatual {
border:2px solid #FFFFFF;
margin-top:2px;
margin-bottom:2px;
}
.imgclick {
border:2px solid #B22222;
margin-top:2px;
margin-bottom:2px;
}
Pergunta
Ednelson Amaral Guinho
Fala família SB :ninja: blza?
Estou querendo fazer com que esse sistema puxe as imagens do banco de dados, seria possível? quem puderia me ajuda? agradeço, abração, fica com Deus. Vlw.
Ótima SEXTA :D
VALEUSSSS ABRAÇOS!
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.