具有懸停效果的響應圖像

Question

我目前有一個具有懸停效果的圖像，如下所示：

<img src="jb-400x500.jpg" alt="yada" width="400" height="500" onmouseover="this.src='jb-400x500-2.jpg';" onmouseout="this.src='jb-400x500.jpg';" />

效果很好，除了我只希望為移動查看器顯示第二個圖像（jb-400x500-2.jpg）。 我嘗試使用srcset實現此目的，但是這樣做擺脫了桌面查看器的鼠標懸停效果。 有什么辦法可以使兩者一起工作嗎？

謝謝。

Answer 1

如果在支持它的瀏覽器中包含srcset ，則src屬性將被忽略。 因此，您的腳本將需要更改srcset以及src屬性，或代替src屬性。 例如

<img src="jb-400x500.jpg" alt="yada" width="400" height="500"
  srcset="jb-400x500-2.jpg 720w,jb-400x500.jpg 1x"
  onmouseover="this.setAttribute('srcset','jb-400x500-2.jpg 720w,jb-400x500-2.jpg 1x');"
  onmouseout="this.setAttribute('srcset','jb-400x500-2.jpg 720w,jb-400x500.jpg 1x');" />

Answer 2

您可能需要通過HTML文檔底部的<script>標記添加一些JavaScript。

首先，您必須在圖片中添加id屬性，以便我們選擇它。

<img src="jb-400x500.jpg" id="image-1" alt="yada" width="400" height="500" />

其次，我們將使用Javascript來檢測您是否正在使用觸摸設備，並將必要的行為應用於圖像元素：

<script>
    // Detect if browser enables touch events
    var isTouchDevice = "ontouchstart" in document.documentElement;
    // Select your image
    var image1 = document.getElementById("image-1");

    if(isTouchDevice){ // If it's touch, change the image src
        image1.src = "jb-400x500-2.jpg";
    }else{ // If it's not touch, assign mouseover and mouseout events
        image1.addEventListener("mouseover", function( event ) {
            image1.src = "jb-400x500-2.jpg";
        });
        image1.addEventListener("mouseout", function( event ) {
            image1.src = "jb-400x500.jpg";
        });
    }
</script>

請記住，在關閉</body>之前，將<script>添加到文檔底部。

Answer 3

您需要使用CSS和@ media-query來實現此效果

基本上，我可以說您需要添加兩張具有不同懸停效果的圖像-一幅用於桌面，一幅用於移動，並根據css的屏幕分辨率隱藏其中一幅。