Ir para conteúdo
Fórum Script Brasil
  • 0

Clicar e manter imagem sem mudar ao passar o mouse em outra imagem


jaysona

Pergunta

ola pessoal,

 

estou tentando fazer um mapa regional em html e javascript, estou com dúvida como fazer o seguinte:

 

ao passar o mouse sobre a cidade, ele deve trocar a imagem da cidade com uma outra mais clara, e ao clicar na cidade ele deve ficar com uma cor mais escura do que a imagem quando passamos o mouse.

 

Até ai tudo certo, mas quando eu clico ele fica com a imagem mais escura e ao passar o mouse em outra cidade ele imediatamente retira a imagem escura e volta para a imagem mais clara.

 

Como manter a imagem quando clico nela e ainda continuar o efeito de passar o mouse?

 

------------------------------

Codigo HTML

 

<div id="mapa"><img border="0" src="http://Caminho_da_IMAGEM_padrao_sem_cor.gif" id="mapaimag" alt="Mapa" width="200" height="200" usemap="#Map" />
<map name="Map" id="Map">
 
<area href="#" onclick="mapa_on_1();" onMouseover="mapa_over_1();"  shape="poly" coords="111,187,113,198,110,174,113,172,110,150,115,161,114,158,118,188,120,155,124,155,132,157,134,156,137,157,139,155,140,157,137" alt="cidade1l" />

 

<area href="#" onclick="mapa_on_2();" onMouseover="mapa_over_2();"  shape="poly" coords="41,96,191,98,147,110,198,109,153,112,157,184,158,117,158,121,144,131,157,132,156,135,177,138,154,129,157,137,158,142" alt="cidade2l" />

 

-----------------------------

 

Codigo JAVASCRIPT

 

function mapa_on_1() 
{
 
document.getElementById("mapaimag").src="http://IMAGEM_1_click.gif";
}
 

 

function mapa_over_1()
{
document.getElementById("mapaimag").src="http://IMAGEM_1_over.gif";
}

 

 

 

function mapa_on_2() 
{
 
document.getElementById("mapaimag").src="http://IMAGEM_2_click.gif";
}
 

 

function mapa_over_2()
{
document.getElementById("mapaimag").src="http://IMAGEM_2_over.gif";
}
 
o código java se eu não me engano é antigo
Por favor galera, me ajuda,
Alguém pode me dar um dica de como conseguir isso. vejo em alguns códigos eles usam (style="opacity: ) mas não faço ideia se é usado duas imagens de cor deferente ou uma e nem como usar. Minha dúvia é Como manter a imagem quando clico nela e ainda continuar o efeito de passar o mouse? com opacity ou não
Obs: sou iniciante em java
 
Obrigado
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

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.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...