I was asked how to implement the shaded description boxes used on the photoblog. Here’s a copy of the directions I sent him with links to the files needed if anyone wants to use it on their site.
You would need three files in a location that’s web accessible to browsers:
In your HTML files
In an HTML document where you want to use the effect you need to do the following:
<head>section of the document).
<link rel = "stylesheet" xhref="http://www.mysite.com/photodesc.css" mce_href="http://www.mysite.com/photodesc.css" >
- In the
IMGtag for a photo add a new attribute
id=[unique_id], for example:
<img xsrc="sample.jpg" mce_src="sample.jpg" id=1>
- Place the HTML you want to have in the grey box in a
class="description"and the same
pidas the associated
IMG. Any valid HTML works here, you can even have another image.
<div class="description" id=1>
<p>This is a sample image
We can include <a xhref="/" mce_href="/">links</a> as well!
Note: I define a class called
description_title that is the large title for each description, but there is nothing special about this class name, only
class="description" and the
pid attribute are important.
Since I used
pid‘s to associate descriptions to images, you can have multiple images on the same page. If you wanted to give the multiple images the same description, you should be able to just duplicate the
Here’s a trivial example.