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.
I modified another hack called “nicetitle.js” to get this effect; the original version is at kryogenix. Cascading Style Sheets (CSS) provide the look, and Javascript is used to trigger on mouse movements and to make it generic to the files. This isn’t my best code, but it gets the job done. I’ve been meaning to make it slightly cleaner and add a couple options, but it’ll work as is…
Files
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:
- Include the CSS file and Javascript files in the
<head>section of the document).<link rel = "stylesheet" xhref="http://www.mysite.com/photodesc.css" mce_href="http://www.mysite.com/photodesc.css" >
<script type = “text/javascript” xsrc=”http://www.mysite.com/photodesc.js” mce_src=”http://www.mysite.com/photodesc.js”></script>
- In the
IMGtag for a photo add a new attributeid=[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
DIVwithclass="description"and the samepidas the associatedIMG. 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!
</div>
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 pid.
Example
Here’s a trivial example.
Leave a comment