How do I add html link to image title

Question

I'm actually needing to include html links in the longdesc attribute. I've altered prettyphoto to use longdesc instead of title for images, but I need to include html links in those descriptions. I know it's possible with code for characters, I just don't remember what those are.

Thanks

Answer 1

The longdesc attribute is an URI, not a place to add code. In other words, you'll need to create a page that the longdesc links to. This page is where you'll make a thorough description of what's on the image.

Answer 2

I'm not sure if this is what you're looking for, but you can use Walter Zorn's wz_tooltip to show a tooltip with any kind of content.

And example of use:

<img src="theimage.png" onmouseover="Tip('<a href=\'http://test.com/\'&gt;Link&lt;/a&gt;');" onmouseout="UnTip();">

Answer 3

Are you looking for the html entities?

If so, these are what you are looking for:

> = >

&lt; = <

" = "

' = '

Answer 4

This can be done with the longdesc attribute:

<img src="theimage.png" longdesc="thedescription.html" />

And then, in thedescription.html:

<a href="http://test.com/"&gt;Link&lt;/a&gt;

One alternative way to do this is by using an OBJECT element, as follows:

<OBJECT data="theimage.png" type="image/png">
    <a href="http://test.com/"&gt;Link&lt;/a&gt;
</OBJECT>

Also, since you asked for it, here is how to convert html entities automatically in jquery:

$('<div/>').text('<a href="link.html">Some Link</a>').html();
// the above evaluates to &lt;a href=&quot;link.html&quot;&gt;Some Link&lt;/a&gt;