Ir ao conteúdo
  • Cadastre-se

carregar uma imagem atraves de um clik


Posts recomendados

Bom dia,estou tento dificuldade para criar o código  em jascript .gostaria de  quando a pessoa clicasse jogo  carregasse outra imagem

<Doc type htmL><head>  <meta charset="utf-8">   <Title>total control </title>   <base target="_blank" />   <link rel="stylesheet" type="text/css" href=" total control.css" /></head><body> <section><h3 class="secTit">Consoles</h3><div><img class="consoleImg" "id="consoleImg "src="playstationPS3.png" /></div><ol><li>PlayStation<ul class="listaConsole"><li><a target="_self"href="">PSP</a></li>   //quando clicar troque a imagem que aparece do lado//<li><a target="_self"href="">PS3 </a></li></section>  <header>      <img src="TotalLogo.png" class="imgLogo"/>      </header>   <nav>      <ul class="menu">        <li><a href="TotalControl.html">Total Control</a></li><br/>        <li><a href="Consoles.html">Consoles</a></li><br/>        <li><a href="Jogos.html">Jogos</a></li><br/>        <li><a href="Questionario.html">Quiz</a></li><br/>        <li><a href="Compras.html">Compras</a></li>     </ul><br/>      </nav>   <footer>     <address class="ender">Av. Irmãos Mario 234<br/>Tel: (21) 1234-5678<br/>     <a href="mailto:[email protected]">[email protected]</a></address>  </footer> </body><html>

 Desde já agradeço

Link para o comentário
Compartilhar em outros sites

  • Moderador

Olá,

 

primeiramente, veja que tem vários erros de semântica no seu código.

O doctype deve ser declarado desta forma:

<!DOCTYPE html>

Dentro do elemento UL - LI não use a quebra de linha <br/>

 

e por último.  poste como tentou fazer o javascript de abrir a imagem. existem plugins que fazem isso.

Link para o comentário
Compartilhar em outros sites

Boa noite esquece o código , o JavaScript esta em vermelho para  facilitar a identificação

<!DOCTYPE html><head>  <meta charset="utf-8">   <Title>total control </title>   <base target="_blank" />   <link rel="stylesheet" type="text/css" href=" total control.css" /></head><body> <section><h3 class="secTit">Consoles</h3><div><img class="consoleImg" "id="consoleImg "src="playstationPS3.png" /></div><ol><li>PlayStation<ul class="listaConsole"><li><a href="#" onClick="mudar();"> PSP</a></li><li><a>PS3 </a></li><script> function mudar() {   img.src = "playstationPSP.png"; }</script></section>  <header>      <img src="TotalLogo.png" class="imgLogo"/>      </header>   <nav>      <ul class="menu">        <li><a href="TotalControl.html">Total Control</a></li>        <li><a href="Consoles.html">Consoles</a></li>        <li><a href="Jogos.html">Jogos</a></li>        <li><a href="Questionario.html">Quiz</a></li>        <li><a href="Compras.html">Compras</a></li>     </ul>      </nav>   <footer>     <address class="ender">Av. Irmãos Mario 234<br/>Tel: (21) 1234-5678<br/>     <a href="mailto:[email protected]">[email protected]</a></address>  </footer> </body><html>
Link para o comentário
Compartilhar em outros sites

  • Moderador

basicamente você tem:

<div id="consoles"></div><ol>    <li>PlayStation</li>        <ul class="listaConsole">            <li><a class="console" href="#psp"> PSP</a></li>            <li><a class="console" href="#ps3">PS3 </a></li>        </ul></ol>

Dispensa comentários:

 

Jquery:

function mostra(c){    var div = $('#consoles');    div.html('<img src="'+ c +'">').width(200).height(200);}var padrao = "http://thumbs.buscape.com.br/console-de-videogame/sony-playstation-3-20-gb_200x200-PUceaf_1.jpg";mostra(padrao);$('.console').on('click', function() {    var self = $(this);    var href = self.attr('href');    var ps3 = "http://thumbs.buscape.com.br/console-de-videogame/sony-playstation-3-20-gb_200x200-PUceaf_1.jpg";    var psp = "http://thumbs.buscape.com.br/console-de-videogame/sony-psp_200x200-PU86f0_1.jpg";        switch(href){        case '#psp': mostra(psp); break;        case '#ps3': mostra(ps3); break;        }   });    
Linhas 1 a 4, Função que recebe um parametro este parâmetro será a variável que conterá o endereço da imagem.
Linha 5, Define uma imagem para aparecer como padrão
Linha 6, chama a função para mostrar a imagem padrão
Linhas 8 a 18, Função on() para o evento de click.
Linhas 9 a 12, Variáveis para definir qual link foi clicado e definir imagens que serão carregadas
Linhas 14 a 17, Switch case, como parametro leva o href.
Linhas 15 e 16, mostra a imagem caso o link tal for selecionado.

 

 

 

veja o exemplo online

Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...