Simple: we can haz image mapz naow. This is something that I've wanted to implement for quite a while, but since I've never quite grokked Blogger's implementation of HTML/XML, I've held off.
What we have here is called a client-side image map. This means that the markup code is in the HTML and interpreted by the browser.
The way I thought I would have to approach this is by image slicing from either Photoshop or Illustrator, and uploading the slices. Bloggers new regime makes this problematic; the head widget doesn't like to work with you this way.
it becomes possible, however, if you just delete the head widget code. This works for me, as all I want the the head image is to sit up there and look pretty, and I never use the options that the Head widget provides.
Right now, the header image navigation bar contains the following four options, which are subject to change:
- Home takes you from whatever individual entry to the blog front page.
- Email is a general email contact link–it's URL is a mailto link that shoots me an email at my Gmail account with the subject line of "Blog Contact".
- Contact for Work is another mailto, with the subject line "Work Contact". Use this if you want to hire me. Here's a hint: you want to hire me. Support your local graphic designer.
- Portfolio/Resume is another mailto. You'll be able to contact me if you just want to request work samples and a copy of my resume. Here's another hint: you want a copy of this. Definitely.
The real exciting part of this is that if you, too, want to create such navigation in your own blog, it's relatively simple and requires nothing more than basic HTML skills and an image editor that will allow you to locate pixel coordinates in your image. I'll make this into a Designorati-worthy how-to very soon (stay tuned for the link to that).
1 comment:
Thanks, Judy. I think it looks pretty cool...it's the first time I've tried something like that, and I think I just took my web coding skill up a level with that one.
Post a Comment