I was thinking earlier today about how my blog could be a little more immersive, and it occured to me that I could easily cobble something together that would allow me to attach images to phrases in my text for clarification. Ok, I realize it’s not earth shattering, everyone knows you can create links to images / other content. But I hate making people leave the page, and I hate popup windows… oh yeah, and I hate complicated markup when I’m entering content. So I came up with this. Just include the script in your blog template, then link to an image like you normally would (it HAS to be an image of type .jpg, .gif, or .png). Then give it a target attribute of “contextimg”. Simple huh? Looks kinda like this.
UPDATE: 11/17/05 There is a wierd display bug in Safari that I can’t seem to figure out just yet, so I changed the script to fail for that browser. The good part about using unobtrusive JS is that you still get the image opening in a new window if you click the link in Safari, so it degrades nicely once it actually got put on the “fail” list.
Here’s a link to download the script if anyone is interested. Just call it anywhere in your document then make sure the links you want to transform have a target called “contextimg”
http://www.1066propaganda.com/util/scripts/contextimg.js