While trying to find a way to emphasise a important topic on a forum I own, I came to the conclusion that the best way to achieve high exposure, but not annoy folk, was to put a little ribbon at the bottom right of the browser window.

While in itself this is not a complicated thing to do, it is a little fiddly to get the coordinates right for the link or if you’re not familiar with fixed positioning and negative margins.

PLEASE NOTE: Although you can only see and click the ribbon the transparent portion of the image is still over your content, this will stop any interaction with elements such as links underneath it.

So on to the code.

HTML (if you want to be able to click the ribbon):

<div id="RibbonSmallRight">
	<img src="whiteband_translinkimg.gif"
	     width="100" height="100"
	     border="0" usemap="#RibbonLinkMapSmallRight">
</div>
<map name="RibbonLinkMapSmallRight">
	<area shape="poly" coords="100,42,43,100,3,99,100,1"
	      href="http://yourlinkhere">
</map>

HTML (if you don’t want to be able to click the ribbon):

<div id="RibbonSmallRight"></div>

CSS:

div#RibbonSmallRight			{
	position:fixed;      /*fixed position is in relation to the viewport*/
	left:100%;           /*start at the very right of the viewport*/
	margin:0 0 0 -100px; /*negative margin brings this back into the viewport*/
	bottom:0px;          /*the bottom the the div is at the bottom of the viewport*/
	z-index:1000000000;  /*attempt to make sure this is over the top of everything else*/

	height:100px;
	width:100px;
	background-image:url(whiteband_small_right.gif);
	background-repeat:no-repeat;
}

Graphics:

The Banner

Transparent Image