可以使用图像URL为图像动态添加替代文本

dynamically add alternate text for your Image using the image URL is it possible?

本文关键字：图像 添加 文本 URL 可以使 动态      更新时间：2023-09-26

我有一个问题，需要根据图像源更改替换文本。例如，我有一个标记为图像的文件夹，其中包含用于该项目的所有图像。

<table id="OptionPics">
    <tr><td><img id="OptionPic1" alt="" src="images/selection1.png" /></td></tr>
    <tr><td><img id="OptionPic2" alt="" src="images/selection2.png" /></td></tr>
    <tr><td><img id="OptionPic3" alt="" src="images/selection3.png" /></td></tr>
</table>
<table id="SelectedPicTable">
    <tr>
        <td>
            <img id="SelectedPic" alt="" src="images/placeholder.png" />
        </td>
    </tr>
</table>

我想知道的是，是否可以根据单击的图像更改SelectedPic的alt？例如，如果单击OptionPic1，SelectedPic的alt应为"selection1"而不是images/selection1.png"。

如果你没有心情使用jQuery，这里是纯JS:

http://jsfiddle.net/MaxPRafferty/6YUhg/

HTML:

<table id="OptionPics">
<tr><td><img class="OptionPic1 optPics" alt="" src="http://jsfiddle.net/img/logo.png?image=1" /></td></tr>
<tr><td><img class="OptionPic2 optPics" alt="" src="http://jsfiddle.net/img/logo.png?image=2" /></td></tr>
<tr><td><img class="OptionPic3 optPics" alt="" src="http://jsfiddle.net/img/logo.png?image=3" /></td></tr>
</table>
<table id="SelectedPicTable">
<tr><td><img id="SelectedPic" alt="" src="http://jsfiddle.net/img/logo.png" /></td></tr>
</table>

JS:

var imgs = document.getElementsByClassName("optPics");
for(var i = 0; i < imgs.length; i++)
{
    (function(image){
        image.onclick=function(){
            var imageParts = image.src.split('/');
            var imageName = imageParts[imageParts.length-1];
            document.getElementById("SelectedPic").alt=imageName;
            document.getElementById("SelectedPic").title=imageName;
        }
    }(imgs[i]))
}

关于以上代码的几个快速注释：请注意，我还更改了title属性-在某些版本的FireFox中，更改alt没有效果，而且其他版本可能也会忽略对alt属性的更改。更改"title"属性会更改悬停文本。我把两者都包括在内以供参考。

此外，我会根据您的要求剥离图像路径，但如果由于某种原因，您的图像在文件名后面会有"/"字符，则需要修改此代码。在我的例子中，我用查询字符串来区分图像，所以我不会去掉扩展名，但如果您只想有文件名，请将相应的行更改为var imageName = imageParts[imageParts.length-1].split('.')[0];

如何控制图像中的点击？它是纯javascript，还是使用jQuery？

今天，使用jQuery非常常见，我假设您正在使用它：

<table id="OptionPics">
<tr><td><img id="OptionPic1" class="options" alt="" src="images/selection1.png" /></td></tr>
<tr><td><img id="OptionPic2" class="options" alt="" src="images/selection2.png" /></td></tr>
<tr><td><img id="OptionPic3" class="options" alt="" src="images/selection3.png" /></td></tr>
</table>
<table id="SelectedPic">
<tr><td><img id="SelectedPic" alt="" src="images/placeholder.png" /></td></tr>
</table>

看，我在所有图像中插入了一个名为options的类。现在让我们编写jQuery:

$(document).ready(function(){
    $('img.options').on('click', function(){ //everytime a image is clicked
        var i = $(this); //handle to the clicked image
        $('img#SelectedPic').attr('src', i.attr('src')).attr('alt', i.attr('alt'));
        //insert into image with the SelectedPic ID, the same src and alt attributes of the clicked image
    });
});
相关文章：