6

Gostaria de saber como dividir uma imagem que possa ter várias partes de maneira que eu possa definir o número de partes, e atribuir um link diferente à cada parte.

Bônus:

Se as partes puderem assumir qualquer forma geométrica, seria ótimo.

0

2 Respostas 2

7

Usa a tag map e area do html, como no exemplo abaixo

Bom resumindo você pode criar um shape para o link e passar as coordenadas, cada número é uma coordenada x,y.

No caso eu desenhei um quadrado passando 4 pontos, x:155,y:156, x:155, y:213, x:216, y:217, x:227, y:156.

Para adicionar outro link (dividindo a imagem em várias partes) é só colocar mais uma área com as coordenadas.

img{
  border:1px solid red;
  }
<img src="http://cnet1.cbsistatic.com/hub/i/2011/03/16/c7675aa8-fdba-11e2-8c7c-d4ae52e62bcc/1264abab866fd3930a8b419d21d1cff1/Chrome-logo-2011-03-16.jpg" alt="" usemap="#Map" />>

<map name="Map" id="Map">
  <area alt="" title="" href="#" shape="poly" coords="155,156,155,213,216,217,227,156" />
</map>

Existem alguns sites que geram o código do "mapeamento" automaticamente como esse: http://imagemap-generator.dariodomi.de/

4
  • Desculpe, mas não consegui entender onde que a imagem está dividida no seu exemplo. Poderia dar um exemplo melhor? Commented 19/11/2014 às 18:37
  • 1
    @PauloRoberto é a tag map. Nela você define as regiões da imagem que serão links. O atributo coords da subtag area define a posição de cada vértice de cada área. O haykou poderia adicionar essa informação na resposta. Mas de resto, a resposta dele é a mais correta. Commented 19/11/2014 às 18:40
  • dei uma melhorada na resposta, vejam se dá pra entender, se nao eu explico melhor
    – haykou
    Commented 19/11/2014 às 18:43
  • @haykou você já tem o meu +1, mas você poderia citar no seu texto que a parte mais importante do código são as tags map e area ;) Commented 19/11/2014 às 19:03
6

Acredito que você consiga fazer isso utilizando background-image e background-position, da seguinte forma:

<a href="link" class="img parte1"></a>
<a href="link" class="img parte2"></a>
<a href="link" class="img parte3"></a>

.img {
   display: block;
   background-image:url(/images/img.jpg);
   width:200px;  /* Tamanho das partes 200x200 */
   height:200px;
}

.parte1 {
  background-position: x y; // posicione x, y de acordo com sua necessidade 
}

.parte2 {
   background-position: x y; // posicione x, y de acordo com sua necessidade
}

.parte3 {
   background-position: x y; // posicione x, y de acordo com sua necessidade 
}

Segue um exemplo da técnica acima JSFiddle.

9
  • Poderia utilizar o code snippet e me mostrar como isso funcionaria? não teria que ter elementos <img> pra funcionar? Commented 19/11/2014 às 18:48
  • Isso funciona até alguma mudança no CSS ou a introdução de um novo elemento quebrarem tudo. Commented 19/11/2014 às 19:03
  • 1
    mais tarde eu adiciono um code snippet Commented 19/11/2014 às 19:05
  • @PauloRoberto adicionei um fiddle na resposta Commented 19/11/2014 às 19:16
  • não é por nada mas qual a diferença entre o snippet e o fiddle? :P mas tudo bem, sem problemas. Commented 19/11/2014 às 19:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .