How to add transparent clickable areas to header?

  • Is it possible to add transparent clickable areas to header? So let’s say your header is am image of the planets, and then each planet would be clickable because of a transparent area (or transparent gif image) over it that makes it clickable?

    Do you know how to add transparent clickable areas to header?

Viewing 2 replies - 1 through 2 (of 2 total)

  • What you’re talking about is an image map. Google it. Here’s one tutorial:

    https://www.elated.com/articles/creating-image-maps/

    If you don’t have access to a program that can create image maps for you, or you just want to go with a more standards compliant approach, you could do the following.

    Create this HTML:

    <h1><a href="/">The Name of Your Website</a></h1>

    Then, in your CSS, add this information:

    h1 {width:150px; height:50px; background:url(imageofplanets.jpg) no-repeat;}
h1 a {display:block; width:150px; height:50px; text-indent:-999em;

    Breaking that CSS down…

    You’ll want the width and height properties in both instances to match up with your images width and height. The background property is defining your image as the background and saying it shouldn’t repeat, you should obviously change imageofplanets.jpg to the name and path of your actual image.

    The second part of the CSS is saying to display the a (or link) as a block, which means it’ll fill up the entire 150 x 50px area. The text-indent bit simply hides the text The Name of Your Website which can be any text you want.

    That all might seem a bit complicated, especially if you have Dreamweaver and can just create an image map, but it will allow your site to gracefully break down on mobile devices and work more fluidly with screen readers, if such things concerns you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to add transparent clickable areas to header?’ is closed to new replies.