Question

我遇到这个问题，我需要根据Image源更改Alternate文本。例如，我有一个标记图像的文件夹，其中包含用于项目的所有图像。

<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 ”。

Answer 1

如果你不喜欢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属性 - 更改alt对某些版本的FireFox没有任何影响，似乎其他人也可能忽略对alt属性的更改。更改“title”属性可以改变悬停文本。我把它们都包括在内作为参

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

Answer 2

如何控制图像中的点击？这是纯粹的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
    });
});

使用图像URL为您的图像动态添加备用文本是否可能？

2 个答案: