Manipulação de Imagens

[doishi]

Boa tarde pessoal!

Sou iniciante em HTML, e estou tentando solucionar o seguinte problema:

Tenho uma imagem que contém diferentes seções. A cada uma dessas seções eu gostaria de adicionar um link, e, quando o usuário passar o mouse por cima da imagem (onde tiver o link), ela fazer um efeito, como por exemplo mudar de cor.

Para adicionar diferentes links em uma imagem única, eu utilizei a função map (#usemap), onde passei como parâmetros as coordenadas em pixel e o link foi adicionado à aquela seção específica com sucesso. Em outras experiências consegui fazer o efeito que desejava, porém em imagens separadas utilizando "onmouseouver / onmouseout". Porém como nesse caso, por se tratar de uma imagem única, estou meio perdido de como fazer o efeito funcionar...

Segue abaixo o código:

 

<img src="url_imagem" width="925" height="525" alt="Engage"
 usemap="#engage" border="0" align="center">

<map name="engage">
   <area shape="circle" coords="134,198,54" href="link" alt="calendar" target="_blank">
   <area shape="circle" coords="285,293,41" href="link" alt="ent-programs" target="_blank">
  </map>

[lowys]

Olá!

Dá pra resolver com elementos <a> com posicionamento absoluto

Passe o arquivo vetorial pra eu te mostrar um exemplo.

[doishi]

Em ‎09‎/‎02‎/‎2016 at 00:38, lowys disse:

Olá!

Dá pra resolver com elementos <a> com posicionamento absoluto

Passe o arquivo vetorial pra eu te mostrar um exemplo.

Você consegue exemplificar com um trecho de código?

Eu não tenho acesso ao arquivo.. :(

[lowys]

Viiiiiiisssssshhhhhhhhhhh!!! mas aí, se eu tiver que redesenhar... demora muuuuito!

[wash]

6 horas atrás, doishi disse:

Você consegue exemplificar com um trecho de código?

Eu não tenho acesso ao arquivo.. :(

Olá!

Encontrei uma imagem similar no google.

Veja se seria +- assim: http://srwash.com/scriptbrasil/doishi/

[doishi]

13 horas atrás, wash disse:

Olá!

Encontrei uma imagem similar no google.

Veja se seria +- assim: http://srwash.com/scriptbrasil/doishi/

Exatamente!!!

[doishi]

Em ‎10‎/‎02‎/‎2016 at 15:30, wash disse:

Olá!

Encontrei uma imagem similar no google.

Veja se seria +- assim: http://srwash.com/scriptbrasil/doishi/

Onde foi feita a inserção da imagem/inserção dos links nas posições corretas nesse código?

[wash]

no css

[doishi]

Em ‎12‎/‎02‎/‎2016 at 16:06, wash disse:

no css

E como eu faço a "chamada" do css na página? (noob)

[wash]

Ôppa! frmz?

Tem um tutorial bacana toda vida aqui: http://pt-br.learnlayout.com/

Se quiser apenas ver, abra o link http://srwash.com/scriptbrasil/doishi/ com o chrome ou firefox  e pressione ctrl + u
Assim, você terá a oportunidade de observar o html e o css.

[doishi]

Em qual trecho do css é feita a inserção da imagem?

 

Ainda quebrando a cabeça.... =(

[wash]

...

Segue uma dica: procure pela palavrinha: background

[doishi]

Copiei e colei o código (CSS e HTML), apenas alterando a url da imagem e o resultado foi esse:

 

Como faço pra adequar o zoom da imagem?

Por quê os círculos estão se comportando dessa forma?