How to split an image into multiple parts with link?

Asked

Viewed 9,366 times

6

I would like to know how to split an image that can have multiple parts so that I can define the number of parts, and assign a different link to each part.

Bonus:

If the parts can assume any geometric shape, it would be great.

html image

2 answers

7


Use the tag map and area html, as in the example below

Good summarizing you can create a Shape for the link and pass the coordinates, each number is a coordinate x,y.

In case I drew a square passing 4 points, x:155,y:156, x:155, y:213, x:216, y:217, x:227, y:156.

To add another link (dividing the image into several parts) just put another area with the coordinates.

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>

There are some sites that generate "mapping" code automatically like this: http://imagemap-generator.dariodomi.de/

  • Sorry, but I could not understand where the image is divided in your example. Could you give a better example?

  • 1

    @Pauloroberto is the tag map. In it you define the regions of the image that will be links. The attribute coords of the subtag area defines the position of each vertex of each area. haykou could add this information to the answer. But otherwise, its answer is the most correct one.

  • I gave an improved answer, see if you can understand, if not I explain better

  • @haykou you already have my +1, but you could quote in your text that the most important part of the code are the tags map and area ;)

6

I believe you can do this using background-image and background-position, as follows:

<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 
}

Follow an example of the above technique Jsfiddle.

  • Could you use the snippet code and show me how it would work? wouldn’t have to have elements <img> to work?

  • This works until some change in CSS or the introduction of a new element breaks everything.

  • 1

    later I add a snippet code

  • @Pauloroberto added a fiddle in the answer

  • not for nothing but what’s the difference between the snippet and the fiddle? : P but all right, no problem.

  • I found it interesting! but it has how to make any kind of geometric shape this way?

  • @Pauloroberto are different tools. I prefer to use Jsfiddle to make demonstrations. stackoverflow has a similar tool that people call code snippet.

  • @Pauloroberto that would be a more complicated task. I can’t tell you for sure

  • is that I like your solution better because it uses common, simple, and fully compatible means to perform segmentation, if you can show me that your solution meets geometric shapes, I will accept it as correct ;) but my +1 you have already won

Show 4 more comments

Browser other questions tagged html image

You are not signed in. Login or sign up in order to post.