0

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

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

4

2 回答 2

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 属性的更改。更改“标题”属性会更改悬停文本。我将两者都包括在内以供参考。

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

于 2013-08-05T21:45:37.483 回答
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>

看我插入了一个类，命名为所有图像的选项。现在让我们编写我们的 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
    });
});
于 2013-08-05T21:39:21.123 回答