Jump to content
Sign in to follow this  
rafael f silva

trocar de imagem com jquery

Recommended Posts

pessoal, nesse programa quero que o ao clicar em cada um dos "spans"

o próprio "span" fique marcado em verde e, se houver algum outro já marcado

em verde, que ele desmarque e volte a ser vermelho.

Até aí meu programa funciona.

Agora vem o problema:

tenho 5 imagens, todas do mapa mundi, mas cada uma tem um continente marcado em cor diferente.

desejo que ao clicar no nome do continente a imagem #mapa receba sua imagem correspondente


queria saber oq por exatamente onde puis as "????????" para que a imagem ja busque pelo nome do spam

que eu cliquei (por exemplo: asia, africa, etc)


segue o codigo, desde ja agradeço.


<html>

<head>

<style>

span {

color: red;

text-decoration: underline;

}

span.active {

color: green;

text-decoration: underline;

}

</style>


<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('span').click(function(){

$('span.active').removeClass("active");

$(this).addClass("active");

$('img#mapa').attr("src", "imagens/" + ????????;

});

});

</script>

</head>


<body>

<span> asia </span><br/>

<span> america </span><br/>

<span> europa </span><br/>

<span> asia </span><br/>

<span> oceania </span><br/>

<img id="mapa" src="imagens/MapaMundi.jpg">;

</body>


</html>

Share this post


Link to post
Share on other sites

Assumindo que tens uma imagem para cada continente (ex: asia.jpg, europa.jpg, etc.), algo assim deve funcionar:

$(document).ready(function() {
  $('span').click(function() {
    $('span.active').removeClass("active");
    $(this).addClass("active");
    $('img#mapa').attr("src", "imagens/" + $(this).attr("id") + ".jpg");
  });
});

Share this post


Link to post
Share on other sites

Olá amigo para não ter problema com caminhos das imagens,era bom tu adiciona tabem exemplo

var UrlRaiz = location.protocol + "//" + location.host+'/';

e usar assim

$('img#mapa').attr("src", UrlRaiz+"imagens/" + $(this).attr("id") + ".jpg");

Share this post


Link to post
Share on other sites

Funcionou perfeitamente senhores! Muitíssimo obrigado.

Porém tenho mais uma dúvida, que se houver solução, simplificaria todo o meu código.

No meu programa hoje, cada vez que coloco a palavra de um continente no texto, tenho que indicar que ele é uma span além de criar a id pra ele. Assim, se há a palavra "América" no meu texto, tenho que digitar:

<span id="America">America</span>

Teria como eu fazer a referência somente ao texto "América", sem necessariamente ter que criar essa id?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By BiancaNunes
      Boa noite.
      Segui os passos de um dos posts daqui, mas não tem opções para fazer mais perguntas por lá, pois o tópico foi arquivado.
      https://forum.imasters.com.br/topic/425852-carregar-p%C3%A1gina-em-div-com-jquery/
       
      Seguinte, tudo funcionou direitinho, entretanto, quando vou salvar os dados dos campos da página que foi carrega dentro da div, em vez de a div manter a página aberta, a página é apagada de dentro da div.
      Alguma solução?
      Desde já agradeço.
    • By biza
      Viva pessoal, 
      Estou tentando  fazer uma consulta em que os parâmetros são enviados através do ajax para o php, até aqui tu esta a correr bem. O problema é quando tento resgatar a resposta através do "console.log" é me devolvido "undefined", será que alguém me pode auxiliar com esse pequeno problema?! Em baixo segue o essencial do código do ajax e php.
      AJAX
      $.ajax({ type: 'POST', url:'index2.php?adm='+$pag, data:{send: 1, opt: $option}, //dataType:'json', success: function(result){ console.log(result); } }); PHP
      $data = array(); /*USER OPTION REQUEST*/ if (isset($_POST['send'])){ switch($_POST['opt']){ ... case 3: /*ERASE SELECTED ITEMS*/ $data = array('status'=>'OK'); echo json_encode($data); die; break; } } Supostamente se no console.log adiciona-se "result.status" deveria obter "OK", mas em vez disso obtenho undefined. Caso execute o código da forma que esta obtenho como resultado
      {"status":"OK"}
    • By biza
      Viva pessoal, 
      Estou tentando  fazer uma consulta em que os parâmetros são enviados através do ajax para o php, até aqui tu esta a correr bem. O problema é quando tento resgatar a resposta através do "console.log" é me devolvido "undefined", será que alguém me pode auxiliar com esse pequeno problema?! Em baixo segue o essencial do código do ajax e php.
      AJAX
      $.ajax({ type: 'POST', url:'index2.php?adm='+$pag, data:{send: 1, opt: $option}, //dataType:'json', success: function(result){ console.log(result); } }); PHP
      $data = array(); /*USER OPTION REQUEST*/ if (isset($_POST['send'])){ switch($_POST['opt']){ ... case 3: /*ERASE SELECTED ITEMS*/ $data = array('status'=>'OK'); echo json_encode($data); die; break; } } Supostamente se no console.log adiciona-se "result.status" deveria obter "OK", mas em vez disso obtenho undefined. Caso execute o código da forma que esta obtenho como resultado
      {"status":"OK"}
    • By LucasLV
      Olá.
      Tenho um site onde as imagens são geradas através de um arquivo PHP - utilizo esse método para retornar imagens webp ou jpg - e vi que o navegador não utiliza, ou não salva em cache, as imagens geradas dessa forma.
      Já as onde informo o caminho completo da imagem com a extensão, aparecem como utilizadas do cache.

      Esse comportamento é normal quando as imagens são geradas desse jeito ou é por não ter feito nenhuma configuração de cache no arquivo PHP que gera as imagens?
       
      Coloquei uma imagem do resultado exibido no navegador.

    • By mateus.andriollo
      Qual seria a forma correta de projetar uma aplicação multi formulários. Estou fazendo ela em Jquery com Load() mas algumas ações não são executadas em script.
      Me pergunto seria o correto?
       
      Exemplo: pensando um cadastro de clientes/empresas
      - clientes.php (formulário de cadastro/edição/anexos)
      - empresas.php (formulários de cadastro de empresa/ funcionários/ setores)
      - relatorios.php (clientes e empresas)
       
      Cada página dessa eu chamo, ela vem sempre com o seu conteúdo...
      Pensei no seguinte, todos estea formulários carregados e eu apenas usar função Get() para preencher campos e gerar os relatórios.
       
      Fica a dúvida, pois hj essas páginas extras são HTML com form e ações PHP
       
       
       
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.