NOTE:
The anchor portion was working, now it's not...no idea why. So I've adjusted the image to use URLs to hopefully work better...
Skill level: Advanced (
but learnable by code-friendly novices & moderate coders)
So - who wants to learn how to create an image map for diaries on Daily Kos?
Do you know what an image map is? It's when you embed an image, then make different parts of it clickable so that clicking on different regions of the image will take you to different places. As an example, I've taken an image of Mumsie from the dKos image library and added a URL to it (fairly standard technique, so that clicking the image goes to a site or to the image source) plus I've added an image map - if you mouse-over Mumsie's head or hands, you'll see that they each point to a different location - while the rest of the image itself points to the original location that I want the image linked to.
Neat, eh?
Stumble over the orange end-of-the-world debris cloud for details (if you haven't already clicked any of the clickable spots yet).
OK - so you want to give this a go. Congratulations, brave soul! The first thing you'll need is an image, either from the dKos image library or from an approved site. This example uses the dKos image library, and I'd recommend it as it encourages more folks to get familiar with it - it's really a GREAT innovation & addition to the site.
Once you've got the image uploaded, you'll need to pop it up in a window to get a URL directly to it. (Embedding it in a test diary should work. Preview the test diary and right-click the image, left-clicking on "copy image location" - that should give you the image's location in the dKos image library.)
The location for the image I'm using is:
http:/s3.amazonaws.com/dk-production/images/11286/small/georgia_whatdoyouwantfromme.jpg?1354377358
Ready? OK - continuing on...
So, now you've got an image - what's next? Creating the map, of course! I did this using a site I discovered a couple years ago: Online Image Map Creator" (http://www.image-maps.com)
Note: Use of the site is free, tho the creator says donations are both appreciated & welcome.
You enter in the URL for your image, click "Start Mapping Your Image" and you're off & running like a herd of pregnant turtles rampaging across the plains...
1
The site goes first to a page telling you that your upload was successful (usually), and has a 5 second countdown before it lets you go to the next step - the page effectively wants to remind you to spread the word about the site. When the countdown ends, click "continue to next step" - this is where the magic begins. :)
Important note! Although you can use this tool to create custom-shaped map regions, those do not work on Daily Kos (at this time, as far as I can tell from testing). Always select the rectangle button for creating mapped regions. (Yes, it's resizable.)
Drag the small square to the region you want to map and resize it accordingly. Enter a link that you want that region to map to, as well as any alt-text or title. You can put in a dummy URL and dummy text, esp. if you aren't sure yet where you want to point the region (or simply prefer to finalize things in the diary itself), but if you enter dummy text then (obviously?) don't click the "Test link" button. Click "Save" when you've positioned & resized the rectangle appropriately. Repeat as needed.
When you've finished placing regions, click "Get Your Code." You'll be taken to a page with lots of info including another opportunity to donate and some social media options. Focus on the tabs across the top - you want to click the "HTML Code" tab.
Grab the whole blurb of text. Here's the blurb for a standard test image with two maps defined:
Sample image mapping code for the test image, provided by image-maps.com
If you've got something like this, save it in a text doc.
Now you're ready for the hard part...
OK - image? Check. HTML code for the image? Check.
One step left - and it's not for the lighthearted (unless, of course, you're both lighthearted AND bloody stubborn, with stubborn winning most of the time).
First, take a look at The Mumsie Code2:
A standard image embed from the dKos image library needs to be identified - to properly ensure that we reference the correct image, you'll need to "wrap" it in the dKos image code. The standard mapped code starts with a
div statement,
div style= - check your code. See it? In front of it, add this:
<div id="body" class="article-body">
<div class="dkimg-r"><span class="image_container">
Now, make sure that your image map refers to the correct image & path - at the first
img id= section, find the
path variable and put in the URL to your dKos library image.
Then you need to close the wrapping: there's an open-ended div and span statement in there, and you might want to add a caption too. Here's the bit I tacked on the end of the mapped Mumsie Code:
</div></span><div class="dkimg-cap">Georgia, a.k.a. "Mumsie"</div></div>
Note the caption bit? You can use that, or not.
You're almost done.
Check your links
Any place you find area shape="rect" in your code, there will be an "href" statement that defines the link - the place where you want that region of the image to direct folks. It can be a full URL, or it can be an anchor (a location within the existing diary you're creating). Make sure it goes where you need it to.
Caveat: You'll have an area shape="rect" entry for each region you defined, plus one more - a 2x2 region that provides a link back to the online image mapper. I leave it in, tho you can remove it. I figured it it's worth it.
The final link is one that's not included automagickally: it's what I call the "default" link for the image. You don't need to do this - I did, just to ensure that I could. Essentially, if you click the image anywhere
except a mapped region, the image will take you to another location by default.
To put that into place, you need to insert the a href portion of the link statement ~after~ the div style statement but ~before~ the img id statement - both of those statements are from the image mapping portion of the code, and not part of the dKos image wrapper we added before & after the mapper code.
Anchors!
An HTML anchor is unlike a regular URL - it doesn't use "http"-style links. It uses a hash tag in the a href section of the reference (e.g., <a href="#Getting_Started">), and a id= in the portion of the document where you want the link to take you it (e.g., <a id="#Getting_Started">Link or title text</a>)
NOTE: Anchors within mapped regions not working at the moment. I replaced the image map above with URLs instead of the orginal anchors.
Fini.
That's it folks. Thanks for reading this far. If you've tried it, let us know how you fare. :)
Namaste.
Footnotes
__________
1 It's a saying I started using while care-giving with Mumsie...thought it was appropriate to include, as I'm using her image & referencing her. She found it amusing, and loved correcting me when I (intentionally) got it wrong.
2 Damn, that sounds like an entry for a Dan Brown title contest.