Skip to main content

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)
Mumsie (a.k.a. Georgia) saying Alzhimer's Association site Her Final Year book website My Amazon AuthorCentral page Image Map
Georgia, a.k.a. "Mumsie"
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).

Getting Started


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...

Creating an image map


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...

 

The Hard Part - Embedding & Adjusting the code


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.

Originally posted to GreyHawk on Sat Dec 22, 2012 at 10:36 AM PST.

Also republished by KosBusters!, New Diarists, Cranky Users, and Toolbox.

EMAIL TO A FRIEND X
Your Email has been sent.
You must add at least one tag to this diary before publishing it.

Add keywords that describe this diary. Separate multiple keywords with commas.
Tagging tips - Search For Tags - Browse For Tags

?

More Tagging tips:

A tag is a way to search for this diary. If someone is searching for "Barack Obama," is this a diary they'd be trying to find?

Use a person's full name, without any title. Senator Obama may become President Obama, and Michelle Obama might run for office.

If your diary covers an election or elected official, use election tags, which are generally the state abbreviation followed by the office. CA-01 is the first district House seat. CA-Sen covers both senate races. NY-GOV covers the New York governor's race.

Tags do not compound: that is, "education reform" is a completely different tag from "education". A tag like "reform" alone is probably not meaningful.

Consider if one or more of these tags fits your diary: Civil Rights, Community, Congress, Culture, Economy, Education, Elections, Energy, Environment, Health Care, International, Labor, Law, Media, Meta, National Security, Science, Transportation, or White House. If your diary is specific to a state, consider adding the state (California, Texas, etc). Keep in mind, though, that there are many wonderful and important diaries that don't fit in any of these tags. Don't worry if yours doesn't.

You can add a private note to this diary when hotlisting it:
Are you sure you want to remove this diary from your hotlist?
Are you sure you want to remove your recommendation? You can only recommend a diary once, so you will not be able to re-recommend it afterwards.
Rescue this diary, and add a note:
Are you sure you want to remove this diary from Rescue?
Choose where to republish this diary. The diary will be added to the queue for that group. Publish it from the queue to make it appear.

You must be a member of a group to use this feature.

Add a quick update to your diary without changing the diary itself:
Are you sure you want to remove this diary?
(The diary will be removed from the site and returned to your drafts for further editing.)
(The diary will be removed.)
Are you sure you want to save these changes to the published diary?

Comment Preferences

Subscribe or Donate to support Daily Kos.

Click here for the mobile view of the site