1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

imagem q muda de cor ao passar o rato

Discussão em 'Web Development' iniciada por Malaquite, 12 de Novembro de 2012. (Respostas: 20; Visualizações: 1898)

  1. 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
     
  2. Sa[n]dman

    Sa[n]dman Power Member

    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
     
  3. 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?
     
  4. Sa[n]dman

    Sa[n]dman Power Member

    como te aparece isso no IE8?

    os IE são problemáticos por natureza.

    estás a usar JS. O problema é daí? Já tentaste com jQuery?
     
  5. 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!
     
  6. Sa[n]dman

    Sa[n]dman Power Member

    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?
     
  7. 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!
     
  8. paulo.correia

    paulo.correia Banido

    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: 14 de Novembro de 2012
  9. Sa[n]dman

    Sa[n]dman Power Member

    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.
     
  10. nfk

    nfk Power Member

    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: 14 de Novembro de 2012
  11. Sa[n]dman

    Sa[n]dman Power Member


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

    No IE ele chega a carregar as imagens?
     
  12. 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!
     
  13. nfk

    nfk Power Member

    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.
     
  14. Bem, agora fiz ponto por ponto o MAP e acho que desta não há margem para flashes =D
     
  15. nfk

    nfk Power Member

    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.
     
  16. 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
     
  17. Sa[n]dman

    Sa[n]dman Power Member

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

    em vez de:
    coloca:
     
  18. nfk

    nfk Power Member

    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.
     
  19. Bem, mais uma vez obrigado, mas ainda n foi com essa diga q o IE8 gostou!

    Actualizei o código mas fica na mesma!

    Obrigado por tudo!
    Hg
     

Partilhar esta Página