如何将具有特定类的每个图像变成超链接？答案

【问题标题】：How can I turn every image with a specific class into a hyperlink?如何将具有特定类的每个图像变成超链接？
【发布时间】：2015-05-22 04:08:56
【问题描述】：

我正在学习管理系统中设计课程，并且希望使特定课程中的所有图像都可点击，因此单击照片会打开图像的全分辨率版本。

现在，它看起来像这样：

<img class="question-image" alt="" src="https://d16smq18f8amlc.cloudfront.net/26154/assessment/879087_1.jpg">

我想把它变成这样的：

<a href="https://contentlive.s3.amazonaws.com/26154/page/f0b69777.jpg" target="_blank">
    <img src="https://contentlive.s3.amazonaws.com/26154/page/f0b69777" style="height: 333px; width: 500px;">
</a>

基本上，我想将图像转换为图像全分辨率版本的超链接。这可能吗？

【问题讨论】：

给我们一些小提琴，它会更容易帮助你
您可以做的最简单的事情是： a> 以获得“可点击的图像”。您还可以将您的 imageClass 包装到 .

标签： html css image hyperlink

【解决方案1】：

你可以这样做

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>on demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <img class="question-image" alt="" src="http://cdn-careers.sstatic.net/careers/Img/logos/logo-socareers.svg?v=16f4bcd961f9" />

    <script>        
        $(".question-image").click(function () {
            window.open('http://stackoverflow.com/', '_blank');
        });
    </script>

</body>
</html>

为各个 URL 创建函数并传递参数

【讨论】：

【解决方案2】：

你可以这样做。 The Fiddle is here.

<a href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1jEJsCAhAJDrzQoU9Cp6OA9xQQ2hdivqHa6kbtu_fzvXhE15A" target="_blank" >
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1jEJsCAhAJDrzQoU9Cp6OA9xQQ2hdivqHa6kbtu_fzvXhE15A" alt="" style="height: 333px; width: 500px;"> 
</a>

【讨论】：