HTML/CSS - Several links on a single image

April 2018

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.
Published by aakai1056. Latest update on February 23, 2012 at 07:01 AM by aakai1056.
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 (https://ccm.net/).
HTML - For loop with if and else
HTML - Add consecutive empty spaces