用Javascript替换图像和图像标题/替代文本

时间:2012-08-17 09:34:54

标签: javascript html image

我目前有以下代码,用于在点击缩略图时替换大图像:

使用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}';

缩略图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>

大图片HTML:

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

我想要做的不仅是在点击缩略图时更改大图像源,而且还要更改alt&amp;标题标签也是。

提前致谢

3 个答案:

答案 0 :(得分:7)

尝试使用这种方式:

的JavaScript

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

缩略图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>

答案 1 :(得分:2)

使用setAttribute:

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

答案 2 :(得分:0)

你的意思是这个(jQuery方式)

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