imagem q muda de cor ao passar o rato

Malaquite

Membro
Boa tarde.

Tenho uma dúvida.

Ando a fazer um site, em que o logotipo é um género do simbolo da mercedes, um circulo tripartido.

O que eu queria era que a imagem aparecesse a preto e branco, e ao passar o rato por cima de cada uma das três zonas do logotipo, essa parte ficasse colorida, mas apenas essa, e se mudasse de zona na imagem, seria a nova zona da imagem a ficar colorida.

Eu tenho a imagem toda a preto e branco e tenho a imagem (3) com uma das zonas coloridas.

Alguma dica para como solucionar este problema?


Obrigado
Hugo
 
Boas,

podes defenir um mapa e uma area na imagem. Quando fazes over dessa area mudas a imagem pela que pretendes.
Tens este link que te ajuda a entender como funciona.

cumps
 
Muito obrigado pela resposta.
O link que me deste não era exactamente o que eu queria, mas foi o primeiro passo.
Depois juntei outras dicas e consegui parcialmente o que queria.

http://malaquite.eu/jasscards_3/

Parcialmente porque no Google Chrome 23 aparece exactamente o que eu pretendo, mas no Internet Explorer 8 não.

Alguma sugestão para este pormenor?
 
O engraça do disso é que tive que andar a pesquisar para saber o que era o jQuery =D
Eu sei que sou um n00b nestas andanças ;-)

Respondendo às tuas perguntas:

- No IE, embora clique em qq local da imagem, apenas um dos cantos muda de cor.
- Relativamente ao JS, usei o Dreamweaver CS5 e fui colocando os comandos que ele me ia dando e cortando e copiando conforme me pareceu mais correcto.

Obrigado!
 
vendo o código fonte, tens 2 maps, remove o 2º a ver se resolve o teu problema.

Não tenho IE aqui para testar.

PS: Vais continuar com a programação web ou é só um trabalho esporádico?
 
Apaguei o segundo, que estava lá porque fui fazendo experiências com duas imagens e acabou por ficar código a mais no final.

O resultado no IE infelizmente continua o mesmo. O rato pode estar em qq lado da imagem, que apenas aparece colorido a parte vermelha. Se o rato ficar fora da imagem, fica toda a preto e branco, como pretendido.

Sempre fui um pouco "curioso" relativamente a websites, e tento construir uns quantos para usos pessoais ou de amigos.

Mas como tenho conhecimentos muito limitados, procuro sempre formas de conseguir fazer as coisas de maneiras simples.
Mas os resultados nunca são bem os esperados.

NEste exemplo uso o MS Publisher e embora apareça bem no IE, no GC aparece com alguns erros...
www.bbvl.net

Aqui, tinha pensado que queria uma entrada diferente no site, por isso andei à procura de como fazer aquelas mudanças de cor com a passagem do rato.
O consegui... parcialmente!
 
Se conseguires identificar com precisão, onde está o rato, troca de imagem para a imagem que interessa.
Ou seja, em vez de teres seis imagens, cada uma com a parte colorida que interessa, porque não tens só três imagens, que seriam a imagem na totalidade, com as duas partes a cinza e a parte colorida. Assim de acordo com o mouse-over na área que queres, trocar por uma das três imagens, e escusas de andar à "guerra" para trocar a imagem que estava activa pela imagem "cinza" e trocar a imagem que está a cinza, para a imagem a cores.

Não sei se me expliquei bem....

PS fui ver o teu código e é o que estás a fazer.... :)
 
Última edição:
Se conseguires identificar com precisão, onde está o rato, troca de imagem para a imagem que interessa.
Ou seja, em vez de teres seis imagens, cada uma com a parte colorida que interessa, porque não tens só três imagens, que seriam a imagem na totalidade, com as duas partes a cinza e a parte colorida. Assim de acordo com o mouse-over na área que queres, trocar por uma das três imagens, e escusas de andar à "guerra" para trocar a imagem que estava activa pela imagem "cinza" e trocar a imagem que está a cinza, para a imagem a cores.

Não sei se me expliquei bem....

PS fui ver o teu código e é o que estás a fazer.... :)

já tinha visto isso, o código está bem, agora o problema é o IE, não deve estar a comer alguma das funções do JS.
 
No meu Firefox 10 também há um efeito estranho. Quando se tira o cursor de cima das imagens de cima e da direita às vezes há uns flashes de cor na imagem da esquerda.

EDIT: Já percebi os "flashes". Na verdade há alguns pontos fora da imagem, incluindo à volta das imagens de cima e da direita, em que a imagem da esquerda aparece se passares o rato por cima. Não sei se é só neste browser.
 
Última edição:
No meu Firefox 10 também há um efeito estranho. Quando se tira o cursor de cima das imagens de cima e da direita às vezes há uns flashes de cor na imagem da esquerda.

EDIT: Já percebi os "flashes". Na verdade há alguns pontos fora da imagem, incluindo à volta das imagens de cima e da direita, em que a imagem da esquerda aparece se passares o rato por cima. Não sei se é só neste browser.


aqui também :P
Deve ser o map que está a atrofiar.

No IE ele chega a carregar as imagens?
 
BOm dia!
Como já repararam, estou a trabalhar apenas com 4 imagens, uma a cinza, e as outras com os cantos coloridos ficando o resto a cinza.
Em relação às imagens no IE, entra a imagem a cinza e a imagem com o canto vermelho, q é a q aparece qd estou com o rato sobre qq lado da imagem.
Quando coloquei o rollover para iniciar o trabalho, defini a imagem inicial e a imagem final (a q aparece no IE), depois o que fiz foi acrescentar as outras com a inclusão da instrução MAP.
O q acontece no IE e n sei o porquê, é que ele apenas vai buscar o inicio e não a segunda parte do código.
Penso que seja isso!
 
Os flashes já estão quase resolvidos, mas ainda há uma região na fronteira da imagem da direita, em baixo, onde aparece a imagem da esquerda.
 
Atualizaste no link que disponibilizaste? Aqui continua a ter o problema na mesma região, por baixo da imagem do pacote de açucar, na fronteira, do lado de fora.
 
Sim, actualizei.
Tenta actualizar no teu browser (se ainda n o fizeste).

Quanto ao erro...
Bem, experimentei num IE 9 e... n dá erro!

Agora, pq dá erro no IE 8?
Pois... n sei!

Mas em todo o caso, obrigado a todos pela ajuda, consegui o que queria e culpo a MS pelo erro q possa haver :-p

Obrigado!
Hg
 
tenta colocar o map numa única linha. há quem diga que é bug do IE8.

em vez de:
<map name="Map" id="Map">
<area shape="poly" coords="210,210,0,90,0,0,420,0,420,90" a="" href="http://www.jasscards.net/euro" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','jass_logo_e_cor.png',1)">
<area shape="poly" coords="420,421,420,91,210,210,211,420" a="" href="http://www.jasscards.net/acucar" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','jass_logo_pa_cor.png',1)">
<area shape="poly" coords="0,421,210,421,210,209,0,91" a="" href="http://www.jasscards.net/cartao" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','jass_logo_ct_cor.png',1)">
</map>

coloca:
<map name="Map" id="Map"><area shape="poly" coords="210,210,0,90,0,0,420,0,420,90" a="" href="http://www.jasscards.net/euro" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','jass_logo_e_cor.png',1)"><area shape="poly" coords="420,421,420,91,210,210,211,420" a="" href="http://www.jasscards.net/acucar" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','jass_logo_pa_cor.png',1)"><area shape="poly" coords="0,421,210,421,210,209,0,91" a="" href="http://www.jasscards.net/cartao" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','jass_logo_ct_cor.png',1)"></map>
 
O meu não IE8, é Firefox 10. O Chromium que tenho instalado é o 6 e também tem o mesmo problema. Não tenho versões mais recentes à mão para experimentar.
 
Back
Topo