Can I put a link inside a title attribute?

Question

I'm using the jQuery Fancybox plugin to create a modal window with the link's href as the content, and the title as its caption. I'd like to be able to have a clickable link in the caption (in this case to lead to a larger map) but I can't put an <a> tag into the title attribute. How might I go about putting this link in through Javascript, jQuery, or other methods?

<a class='iframe' href='http://maps.google.com/maps?q=%235+Health+Department+Drive,+Troy,+MO+63379&amp;ll=38.979228,-90.97847&amp;z=13&amp;iwloc=near&amp;num=1&amp;output=embed' title='Google Map to Lincoln County Health Department'>Map to LCHD</a>

Answer 1

I'm not familiar with this plugin, but this method comes to mind.

You can bury content elements within the anchor and modify you plugin to use the elements that your introduce. For example:

<a class='iframe' 
   href='http://maps.google.com/blahlblahlbah' 
   title='Google Map to Lincoln County Health Department'>Map to LCHD
   <span class="title-href" style="display: none">http://zebrakick.com</span>
</a>

Hope that helps.

Answer 2

Maybe not the best suggestion but you can make your own atribute maybe something like this

<a class='iframe' href='http://maps.google.com/maps?q=%235+Health+Department+Drive,+Troy,+MO+63379&amp;ll=38.979228,-90.97847&amp;z=13&amp;iwloc=near&amp;num=1&amp;output=embed' title='Google Map to Lincoln County Health Department' dest="/path/to/file.ext">Map to LCHD</a>

Answer 3

Keep the element => destination_link map as an object, and fetch values from it for redirection.

var linkmap = {
   lincoln:   '/location/3/',
   someplace: '/location/99'
}

Now you can use the values from linkmap in your click event (with [] or . operator)

Answer 4

I passed additional data along with the :

<a href="images/product.jpg" title="Product nummer 1" data-title-url="http://google.nl" rel="fancybox">

and used a custom callback for setting the title:

{
    //fancybox options array
    titleFormat: function(title, currentArray, currentIndex, currentOpts){
        var currentElement = currentArray[currentIndex];

        var html = "<h1>" + title + "</h1>";
        var titleUrl = $(currentElement).data("title-url");
        if (titleUrl) {
            var link = $("<a>", {href: titleUrl, text: titleUrl, target: "_blank"});
            html += " (" + link.prop("outerHTML") + ")";
        }

        return html;
    },
}

http://fancybox.net/api

http://api.jquery.com/data/