<link rel="stylesheet" type="text/css" href="imagens.css" />

Tamanho: px

Começar a partir da página:

Download "<link rel="stylesheet" type="text/css" href="imagens.css" />"

Eric Lagos Alencar
8 Há anos
Visualizações:

1 Este código é responsável pela visualização html. <meta http-equiv="content-type" content="text/html; charset=utf-8"> <head><title>exibição de Imagens</title></head> <link rel="stylesheet" type="text/css" href="imagens.css" /> <script language="javascript" src="imagens.js"> </script> <body> <p><b>teste do Código:</b></p> <div id="exibicao"> <table cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000" nowrap="nowrap"> <img id="image" src="images/i1.jpg" width='550' height='290' style="margin:0 10px 0px 0px;"></td> <td bgcolor="#000000" style="width:68px;" nowrap="nowrap"> height='58'> <img class="imgmenu" id="0" src="images/i1.jpg" width='58' <br> height='58'> <img class="imgmenu" id="1" src="images/i2.jpg" width='58' <br>

css" /> <script language="javascript" src="imagens.

2 height='58'> <img class="imgmenu" id="2" src="images/i3.jpg" width='58' <br> height='58'> <img class="imgmenu" id="3" src="images/i4.jpg" width='58' </td> </tr> </table> </div> <div id="transp"></div> <div id="tarja">produtos</div> <p><b>informações</b></p> </body> </html> Este código é o código javascript reponsável pela parte dinâmica do site. salve este arquivo com o nome imagens.js // Imagens var mypix = new Array(4) mypix[0] = "i1"; mypix[1] = "i2"; mypix[2] = "i3"; mypix[3] = "i4";

jpg" width='58' </td> </tr> </table> </div> <div id="transp"></div> <div id="tarja">produtos</div>

3 // Tarjas var mytext = new Array(4) mytext[0] = "Despertador"; mytext[1] = "Liquidificador"; mytext[2] = "Maquina fotográfica"; mytext[3] = "Abajur"; // 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") { executar os comandos iten[i].onclick = function() { // quando clicar na imagem

setinterval("change()",timer); // Inicia a animação document.getelementbyid(0).classname = "imgatual"; // Função quando clica na imagem pequena exibe ela grande.

4 limpa(); // função limpa this.classname = "imgclick"; // coloca borda do click document.getelementbyid("image").src = '../images/' + mypix[this.id] + format; // exibe a imagem grande mytext[this.id]; // coloca a tarja document.getelementbyid("tarja").innerhtml = // 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++) { class=imgclick imgmenu if (iten[i].classname == "imgclick") { // busca quais imagens estão com iten[i].classname = "imgmenu"; // as quais forem muda para function borda() { var img = arguments[0]; // recebe o por parametro a ID da imagem

innerhtml = // Função que limpa as bordas que estão com class=imgclick function limpa() { var main = document.getelementbyid("exibicao"); var iten = main.

5 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 "imgclick")) { if ((iten[i].classname == "imgatual") (iten[i].classname == 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 imagem document.getelementbyid('tarja').innerhtml=mytext[i]; // coloca a tarja na if (i == tam) i = -1; i++; else { i = 0;

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.

6 window.onload = function() { abrir(); start(); Este é código css responsável pelo layout dos objetos html da página. salve este arquivo com nome 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;

7 #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 {

5; filter:alpha(opacity=50); -khtml-opacity: 0.

8 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;

Documentos relacionados

José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript. EmpregoWeb-Registo de pessoas

José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript EmpregoWeb-Registo de pessoas Elabore um sítio Web de nome EmpregoWeb, recorrendo à linguagem HTML utilizando folhas de estilos (CCS) que registe