Cool Tips, Tutorials

How to map an image and make a better use of your promotion’s cover

See the result

We are going to show you a tool that is used to map any kind of images. Mapping an image refers to add different links in different parts of the image so our creativity can include call-to-actions and contribute much more to the main image of our promotion or contest. This tool can be used in your banners, newsletters or any time you need to map an image.

Steps to map an image

1. We access ImageMapify, we specify the URL of the image we want to map (which means that we must have previously uploaded this image on our blog, site, etc.) and we click on ‘Preview‘ so the image can be detected.

Specify the URL of the image you want to map

2. We click on ‘Add shape’ and a box will be displayed. We can enlarge or reduce this square and we also can place it in the part of the image where we want to include a link.

Click on Add Shape

3. Once we have used the box to select the space we want, we must complete the fields shown in ‘Selected shape options’:

  • Link: The link where we want to direct the users who click on that part of the image.
  • Link target: We can leave it as ‘None’, but we can choose that the link opens in the same window or in a new tab. If we are preparing the main image of our promotion, we must select ‘New Tab.
  • Text: It is the link’s ‘Alt‘. We can textually display what is shown in the link to which we are directing our users. We can also select if we want that text to be displayed or not when the user scroll the mouse over that part of the image.

complete the fields shown in "Shape Selected Options"

4. If we want to add more links, we will click again on ‘Add shape’ and we will complete the preceding fields until the image has all the links we want to include in it.

The image with all the links you want to include

5. Once we have included all the links we need for our image, we click on ‘Generate HTML code‘. Then, a window with an html code will be displayed and we will include this html code wherever we want to use our mapped image.

Generate Html Code

If we want to use the mapped image as the main image of our contest or promotion in Cool Tabs, we will use the description field in order to add the html code we have obtained with the Image Mapify tool. Below this html code, we can add the promotion’s description if we want to.

Cool Tabs Description Contest: Source

If you unselect the option ‘Source’, you will see the visual result and then you will be able to check if the links included in the promotion’s preview are working.

See the result

And that is all, you can start now using Image Mapify to map your images and to make better use of your promotion’s main image.

Create your promotion now and use this new tool >>

Leave a Reply

Try Cool Tabs!

7 days for free with no limits

Start free trial

sweepstakes, contests, giveaways