Replace image and image title/alt text with Javascript

3
votes

I currently have the following code that replaces a big image when a thumbnail is clicked:

Javascript:

    img1 = new Image();
    img1.src = '{$smarty.const.dir_images}/l_{$this_page.image1}';
    img2 = new Image();
    img2.src = '{$smarty.const.dir_images}/l_{$this_page.image2}';

Thumbnail HTML:

    <a href="javascript:document['mainimage'].src = img1.src; javascript:void(0);"><img src="{$smarty.const.dir_images}/t_{$this_page.image1}" title="" alt=""/></a>
    <a href="javascript:document['mainimage'].src = img2.src; javascript:void(0);"><img src="{$smarty.const.dir_images}/t_{$this_page.image2}" title="" alt=""/></a>

Large Image HTML:

    <img id="mainimage" name="mainimage" src="{$smarty.const.dir_images}/l_{$this_page.image1}" title="{$this_page.image1text}" alt="{$this_page.image1text}" />

What I want to do is not only change the large image source when the thumbnail is clicked but the alt & title tags as well.

Thanks in advance

4
javascripthtmlimage

4 Answers

12
votes

Try to use this way:

JavaScript

img1.alt="Image alt";
img1.title="Image title";

Thumbnail HTML:

<a href="javascript:document['mainimage'].src = img1.src;document['mainimage'].alt = img1.alt; document['mainimage'].title = img1.title; javascript:void(0);"><img src="{$smarty.const.dir_images}/t_{$this_page.image1}" title="" alt=""/></a>
2
votes

Use setAttribute : 

document.getElementById("mainimage").setAttribute("alt", "My new Alt");
0
votes

You mean this (jQuery way)

img1.attr('alt','this is alt');
img1.attr('title', 'this is title');
0
votes

with out jquery you can replace element by remove it from parent then add the new element

    <script type="text/javascript">
        function replaceImage(img , num){
            var parentNode = img.parentNode;
            parentNode.removeChild(img);
            parentNode.innerHTML += '<img id="mainimage" name="mainimage" src="{$smarty.const.dir_images}/l_{$this_page.image' + num + '}" title="{$this_page.image' + num + 'text}" alt="{$this_page.image' + num + 'text}" />'
        }
    </script>
    <img src="{$smarty.const.dir_images}/t_{$this_page.image1}" title="" alt="" onclick="replaceImage(this ,1)"/>
    <img src="{$smarty.const.dir_images}/t_{$this_page.image2}" title="" alt="" onclick="replaceImage(this ,2)"/>