Question

I am using some Javascript to swap text from a “title” tag to a description below the large image on my page.

How can I add a link to the text that is being swapped below the large image?

Sample page here – Sample Page

js –

    function updateCaption(elm) {
    document.getElementById('captionText').innerHTML = elm.getAttribute('title');
}

html –

<a href="ipod-blue-large.jpg" onmouseover="updateCaption(this);" title="iPod Blue" rel="zoom-id:ipod" 

<a href="ipod-blue-large.jpg" class="MagicZoom"  id="ipod"><img src="ipod-blue-large.jpg"></a><span id="captionText">Text to be swapped</span>

Answer 1

As the name implies, innerHTML accepts standard HTML. So you may do this :

function updateCaption(elm) {
     document.getElementById('captionText').innerHTML = "<a href=somehref>"+elm.getAttribute('title')+"</a>";
}   

Supposing you’d want to have the same href for the caption than for the image, you may do this :

function updateCaption(elm) {
     document.getElementById('captionText').innerHTML = 
          '<a href="'+elm.href+'">'
          + elm.getAttribute('title')
          + '</a>';
}