HTML/CSS - Several links on a single image

Issue

I have an image for a menu ( a rectangle in my case) and I would like to add several links on it:

  • Title1 (towards page 1)
  • Title2 (towards page 2)
  • etc ...

All on a single image.

Solution

Try to put each image in the CSS.

/* Image for the index menu*/
.image-menu1 {
        background:url(index.png);
        width:100px;
        height:100px;
}

Once you got this right, create an html link and div of class.

Thanks to MastercroW for this tip.

Ask a question
CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jean-François Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.
This document, titled « HTML/CSS - Several links on a single image », is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).