Monday, March 24, 2008

Script: Image Captions

Image Captions Script on Mac ScreenImage Captions is a simple script that uses the alt attribute of your images to create a mouse-over captions for them. The captions do not change the layout of your site in any way and the installation is as simple as including 1 line of code in the header of the page. If you kept the alt attributes of your images in order you won’t have to change anything else. The script finds the right images and adds the captions automatically.

You can see the example of the script in action on the image above. To get that result all I had to do was to add the following to my post:
<img src="mac_screen.jpg" class="centered"
alt="Image Captions Script on Mac Screen"/>

The script will work on any page and does not rely on any WordPress functionality. The code has been tested in the following browsers: Firefox 2.x, Firefox 3.x, Safari 3.x, IE 6.x and IE 7.x.

Installation and Implementation


  1. Place the captions.js file onto your web server.
  2. Install1 Prototype JavaScript framework.
  3. Edit line number 36 in captions.js to include the list of the classes of images that you want captioned:
    var imageClasses = ['centered','alignleft'];The images of ‘centered’ and ‘alignleft’ class will get captioned in the example above.
  4. Include the script in the header of your page:
    <script type="text/javascript"
    src="captions.js"></script>
    This line must come after the inclusion of prototype.js.
  5. Customize the look of the caption via CSS.

You’re done with installation now and the captions should show up on the images of the correct class when you move your mouse over them.

Look Customization


Below is a recommended piece of CSS code that should be included in your .css file or directly in the header of your web-page. You can adjust it to fit more with the theme of your site.

#caption {
text-align: center;
font: 13px Tahoma;
border: 0; padding: 2px 5px 3px 5px;
color: white; background: black;
opacity: .70; filter: alpha(opacity=70);
cursor: pointer;
}

Support


I covered everything I could think of, and hopefully you will not have any problems. But if there are any, feel free to leave a comment and I’ll try to respond as soon as possible.

  1. This library is required for many popular scripts such as Lightbox, so you might have it installed already. []
In: Software   Tags: , , , ,
Time: 15:45   Comments: 4 Comments   Post a Comment  
1
1
2
2
3
3
4
4

Leave a comment

O.o teeth mrgreen neutral -) roll twisted evil crycry cry oops razz mad lol cool -? shock eek sad smile grin