Post #62

Javascript image captions

25th November 2003, late at night | Comments (6)

Code information
Status
Code usage Not in use on this blog
Updates None
Demo Available
Downloads Available

I’ve been going a bit Javascript-mad recently. Usually I steer well clear of the stuff, but since the blockquote incident I’ve rather had it on the brain.

Along the same lines as the blockquote script, I came up with the idea for presenting title data as captions for images. If your title attribute contains a URL then the caption becomes a link, otherwise it’s presented as plain text. You can see it in action in the demo.

If you like the idea feel free to grab the files. It’s only a rough concept, and could no doubt be improved upon.

Jump up to the start of the post ↑

Comments (6)

Jump down to the comment form ↓

  1. Adam Bramwell:

    Nice!

    Posted 11 hours, 4 minutes after the fact
  2. Dee:

    Veryy nice, I've done a similar thing not too long ago, using Simon Willison's getElementBySelector and simple DOM manipulation. Tested with IE5/6 and recent Mozilla's and Opera 7.

    Here's a demo un draft of blog unfinished redesign:
    http://www.deelan.com/temp/blog-template.html

    Basically every image wrapped in a para with class="photo" will be automatically decorated with a span element relative positioned.

    Posted 15 hours, 38 minutes after the fact
    Inspired: ↓ Dunstan
  3. Dunstan:

    Ah, nice idea Dee, putting the caption _on top_ of the image. I hadn't thought of that.

    Posted 15 hours, 43 minutes after the fact
    Inspired by: ↑ Dee
  4. Karl Bedingfield:

    Hi there,

    This is excellent!

    I have tried it used in conjunction with your drop shadow image technique and can't get it to work.

    I used:
    <div class="img-dec-r"><img src="<?php echo $siteurl; ?>/images/kitty.gif" width="160" height="150" alt="Baby birds in a nest" title="Baby birds in a nest" /></div>

    But although the image views just fine the title doe not show, it display as the usual tool tip.

    Any ideas?

    Thanks
    Karl

    Posted 2 months after the fact
    Inspired: ↓ Dunstan
  5. Dunstan:

    Hi Karl,

    Sorry, no, your code looks like my code, so I can't see what would be wrong. Are you getting any JS errors?

    One thing to note - you can't use this with the image dropshadows (unless you stick an extra div around the whole thing and alter the JS) because otherwise the caption appears _between_ the image and the dropshadow, and it all looks daft.

    All I can suggest is that you cut and paste from the source code in the page, and check your javascript errors.

    Sorry I can't help more.

    Posted 2 months after the fact
    Inspired by: ↑ Karl Bedingfield
    Inspired: ↓ Karl Bedingfield
  6. Karl Bedingfield:

    Hi Dunstan,

    Hmmm, I will have to play around a little more as I don't get any js errors. I added the script to my global js and called it.

    At least I know I can't use it with th drop shadows now anyway :)

    By the look of your picture you didn't get the snow like we did in Cambridgeshire!

    Thanks
    Karl
    ps. Great site and an inspiration!

    Posted 2 months after the fact
    Inspired by: ↑ Dunstan

Jump up to the start of the post ↑

Add your comment

I'm sorry, but comments can no longer be posted to this blog.