How can I create "invisible" and custom sized and shaped links over the background?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I am using an image as my background. I want the background image to function as the website. How can I place different sized links over specific points on the background image?
Photo of brandonschaaf


  • 1 Post
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Brandonschaaf,

Are you familiar with html? You can map out clickable areas(circles, rectangles, or polygons) that when the user clicks on that area, it will link to aspecific page. Here is some sample code with the image called page.gif. The top left pixel is considered the origin of the image with x and y being equal to zero. If areas overlap, the area mentioned first takes precedence.

<img scr="page.gif" width="400" height="250" alt="site map" usemap="#sitemap" border="0">
<map name="sitemap">
<area shape="circle" coords="185, 50, 40" href="pageone.php">
<area shape="rect" coords="2, 2, 300, 100" href="pagetwo.php">

The coordinates for a circle are: center x, center y, radius.
The coordinates for a rectangle are: left x, top y, right x, bottom y