Sash Your Site
July 15th, 2005Mike Little’s is the second site I’ve seen in a few days to feature a banner striped diagonally across a corner. Ginger D was the first, and she kindly posted some code showing how it’s accomplished. Here’s the CSS:
.banner {float:right; position:absolute; top:0px; right:0px;}
And here’s the HTML:
<div class=”banner”><img src=”blogathonbanner.gif” usemap=”#banner” border=”0″ /><map name=”banner”><area shape=”poly” coords=”2, 2, 42, 2, 150, 94, 150, 128, 148, 128, 4, 2″ href=”http://www.blogathon.org” target=_top></area></map></div>
The image has to be a GIF with a transparent background. Pretty neat trick.
(Mike, if you’ve followed my first trackback, I’ve moved some text from this post to another post. Sorry about the confusion, dude, but sometimes this site evolves like it’s got a life of its own.)
July 15th, 2005 at 9:31 pm
hes in no hurry to get here, so dont rush him. i’ll be sick if i here that dorky, know-it-all, bratty little boy’s name again
July 15th, 2005 at 9:38 pm
Hi again! :)
I figured that out all by myself. I only assume that a gif with a transparent background is suitable, I don’t know if there’s a better way of coding it, but this works in both IE and Mozilla, which is good enough for me, lol. It’s amazing that browsers still support the image map, a very old old obscure little piece of code I learned back in the dark net ages of 1997.
I posted my coding because other blogathon participants might want to do something similar, and I wanted to call attention to the event. :)
Thanks for the wave!
July 15th, 2005 at 9:42 pm
The dark ages were when image maps had to be server-side CGI. ;)
July 21st, 2005 at 11:15 pm
[…] eblog, I came across the Jim Thompson’s journal, and what caught my eye was the post Sash Your Site, where you can put up a diagonal striped b […]