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.
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/
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
map
e area
;)
Commented
19/11/2014 às 19:03
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.
<img>
pra funcionar?
Commented
19/11/2014 às 18:48