User Tools

Site Tools


web_development:corner_banner

I like the un-intrusive corner banners I see from time to time on a variety of web sites. It's a good way to point your site visitors to what you want them to see, without having to modify your site's design just to feature a specific link.

Here's a quick way to add your own corner banner. This appears at the top right of your page, but the code is easy to understand. If you change the size of the image, simply make a new imagemap accordingly.

<img alt="Click Here" style="position: absolute; top: 0; right: 0; border: 0;"
  src="corner_banner_205.png" width="205" height="205" border="0" usemap="#corner_banner" />
<map name="corner_banner"><area shape="poly" coords="0,0,201,202,202,128,75,0" href="#" /></map>

Make sure your corner image is a transparent png file (so your background and site shows through the square area). The imagemap prevents the whole square from being clickable. Only the banner itself will be clickable.

The sample banner I've provided is at a 45&deg; angle. Therefore, adding your text at exactly 45&deg; will give you a nice effect.

web_development/corner_banner.txt · Last modified: 2012/01/26 10:03 by import