Blogging / badge use technique

My non-technical readers will need to pardon us techies for a moment while I pass along something I’ve cobbled together to my fellow bloggers / web site administrators.

You’ll notice over there to the right that I have a graphic regarding the VA GOP’s ticket of candidates for office. The graphic was put together by the Bob McDonnell campaign but has the names and pictures of all 3 statewide candidates: Bob McDonnell for Governor, Lt. Gov. Bill Bolling for Lt. Governor, and Senator Ken Cuccinelli for Attorney General. I picked up the badge from the McDonnell website and simply grabbed the HTML code that was included. Pasting that code into your site pulls the graphic from the McDonnell web site and displays it on your page. I had previously put up 3 badges that I’d pretty much made myself, 1 to each of the campaign sites. This one looked far better so I snagged it and put it up on the site.

It wasn’t until a couple of days ago when I was putting up a post about donating to each of the campaigns at the end of the quarter that realized that while the badge contains the names and pictures of all 3 candidates, it only links back to the McDonnell campaign site. Each of the 3 candidates for statewide office have reciprocal links to each others’ sites, so you can certainly get to each site that way, but I like being able to go directly to each candidate’s site from clicking the badge. The method to handle that kind of thing is with an HTML image map. Given that the map will be exactly the same for anyone who decides to go that route, I figured it would be a decent thing to do to post that code right here so you don’t have to re-engineer the wheel. Here goes:

<img src=”http://www.bobmcdonnell.com/images/buttons/The Ticket Vertical.png” usemap=”#vagop” border=”0″>
<map name=”vagop”>
<area shape=”rect” coords=”0,0,160,150″ href=”http://www.bobmcdonnell.com”&gt;
<area shape=”rect” coords=”0,151,160,224″ href=”http://www.billbolling.com”&gt;
<area shape=”rect” coords=”0,225,160,300″ href=”http://www.cuccinelli.com”&gt;
</map>

If you’re using this graphic on your site, you can copy this code and paste it over the code you got from the McDonnell site directly. The image will not change at all, so it won’t be visually different. However, if you run your mouse pointer down the graphic from top to bottom you will notice the target link will change depending on whose picture you’re pointing at. Give it a try right here to see what I mean.

It’s just a bit more intuitive to do it this way than having someone click on Ken Cuccinelli’s name on the graphic and wind up looking at bobmcdonnell.com. Feel free to spread this around and have fun!

Advertisements