0

我正在尝试使用 JavaScript 使特色图片可点击：

<div class="post-wrapper">
  <section class="post-image">
    <img alt="Targ3t Band" class="img-responsive" src="http://i2.wp.com/www.example.com/wp-content/uploads/example.jpg">
    <div class="image-shadow"></div>
  </section>
  <div class="post-container">
    <div class="container">
      <section class="post-title" style="color:;">
        <h2 class="post-heading"><a href=
                    "http://www.example.com/category/example/">Band &#8211;
                    Targ3t</a></h2>
                    <ul class="post-info"></ul>
      </section>
    </div>
  </div>
</div>

有谁知道如何将标签添加<a>到<img>标签中？

4

3 回答 3

0

您需要将 id 属性添加到 img 标签。(id="image1") 在这种情况下。然后您需要创建一个 Javascript 函数，当您单击图像时将调用该函数。

然后，以下代码将在页面加载时运行函数启动器，并在单击图像时运行函数。

<script>
var image;
function clicked() {
    alert("Image clicked");
    }
function starter() {
    image = document.getElementById("image1");
    image.onclick = clicked;
    }    
window.onload = starter;
</script>
于 2016-05-31T20:18:50.460 回答
0

正如我上面提到的，我找到了编译代码并用<a>标签包装图像的 PHP 脚本get_post_permalink()，它做得很好。使用字符串定位器在我的主题中找到编译这些元素的 .php 文件。

于 2016-09-15T12:24:52.517 回答
0

假设您只是意味着图像应该将用户链接到单独的页面，那么您将如何进行调整。您所做的就是将元素包装在a标签中，如下所示：

<div class="post-wrapper">
  <section class="post-image">
    <a href="http://i2.wp.com/www.djentmag.com/wp-content/uploads/TARG3T-2016-A-e1464397193853.jpg?resize=1400%2C600"><img alt="Targ3t Band" class="img-responsive" src="http://i2.wp.com/www.djentmag.com/wp-content/uploads/TARG3T-2016-A-e1464397193853.jpg?resize=1400%2C600"></a>
    <div class="image-shadow"></div>
  </section>
  <div class="post-container">
    <div class="container">
      <section class="post-title" style="color:;">
        <h2 class="post-heading"><a href=
                    "http://www.djentmag.com/artist/targ3t/">Band &#8211;
                    Targ3t</a></h2>
        <div class="post-sub-title">
          <p>Deathcore, Hardcore - Romania</p>
        </div>
        <ul class="post-info"></ul>
      </section>
    </div>
  </div>
</div>

使用 Wordpress，您可能希望将动态值添加到 img URL。如果是这种情况，或者如果这不能完全解决问题，请提供其他信息。

于 2016-05-31T20:09:45.977 回答