Question

我正在构建一个网页，以了解响应式网页开发并遇到链接问题。当页面宽度很小时，我想为我的图像添加超链接，但是当它变大时，我想将它们从图像中取出并将它们放在另一个元素上。有没有办法用HTML，CSS和/或JavaScript做到这一点？

有关更多背景信息，请查看this幻灯片，其中我在屏幕宽度为450px时添加了一个断点。当屏幕较宽时，超链接位于“阅读更多”按钮上，但是当“阅读更多”按钮消失时，我希望它在图像上。

Answer 1

使用媒体查询的示例（最小化窗口小于600px，您将看到链接，否则您将看到图像）：

@media (max-width: 600px) {
    .logo {
      display : none;
    }
    .altText {
      display : block;
    }
}

@media (min-width: 601px) {
    .logo{
        display : block;
    }
  .altText {
      display : none;
    }
}

<img class="logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MDN">
<a href="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" class="altText">MDN</a>

Answer 2

如果你想使用jQuery，你可以这样做：

Demo

JS：

$(document).ready(function() {
  moveLink();
});

$(window).resize(function() {
  moveLink();
});

function moveLink() {  
  if ($(window).width() >= 450) {
    $("#myImage").unwrap();
    $("#myText").wrap('<a href="https://www.stackoverflow.com">').show();
  } else {
    $("#myText").unwrap().hide();
    $("#myImage").wrap('<a id="myLink" href="https://www.stackoverflow.com"></a>');
  }
}

HTML：

<img id="myImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<br>

  <span id="myText">Read More</span>

如何在屏幕变小时使图像成为链接

2 个答案: