Question

我想知道是否有人知道如何组合“a href”，“img src”和“alt”标签。我们处理大量的图像，并且为Dreamweaver中的每张图片复制和粘贴所有三个字段的相同内容是相当繁琐的。做一次是理想的。从我所看到的情况来看，可能没有多少机会这样做。我使用的是HTML或Javascript。

<a href="../../0_Images/CRG_UnitType.jpg" target="_blank">
<img src="../../0_Images/CRG_UnitType.jpg" alt="CRG_UnitType.jpg" width="775" height="617" border="2" class="picture">
</a>

Answer 1

AngularJS也可以解决这个问题。在HTML中输入它并设置包含图像数据的控制器，然后您可以使用ng-repeat。结果是这样的。

<div ng-repeat="image in images">
    <a href ="{{image.href}}" target="_blank">
        <img SRC="{{image.src}}" width="{{image.width}}" height="{{image.height}}" border="2" class="picture">
    </a>
</div>

Answer 2

首先，您的alt属性不应包含您的图像文件名，它们应该用于描述图像的内容，以防它们无法加载，或者视觉障碍者在您的网站中导航。< / p>

要回答这个问题，您肯定需要使用一些服务器端语言来节省时间。例如，您可以通过循环浏览一系列文件和标题，轻松地使用PHP显示所有图像。

在这样做之前，你需要对这种语言（或任何其他服务器端语言）有一些基本的了解，但是你花费的时间不会丢失。

Answer 3

可能，

你可以使用jquery做你想做的事情，如果src与你的例子中的href相同，那么方法是：

在HTML中仅使用图像，并添加一个额外的类：

<img src="../../0_Images/CRG_UnitType.jpg" alt="CRG_UnitType.jpg" width="775" height="617" border="2" class="picture auto_add_link">

现在添加jquery函数：

$( ".auto_add_link" ).wrap(function() {
  return '<a href="' + $(this).attr("src") + '" target="_blank"></a>';
});

不太好看，但它有效

Demo on jsfiddle

HTML Javascript结合SRC，Link，ALT标签

3 个答案: