carregar uma imagem atraves de um clik

vitor.cris · 18 de abril de 2014

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

DiF · 18 de abril de 2014

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.

vitor.cris · 19 de abril de 2014

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>

DiF · 19 de abril de 2014

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