更改圖像內的div圖像點擊

我創建了一個Javascript函數，它允許我在直接點擊div時將圖像更改爲另一個，但我試圖讓此函數根據其他圖像圖標工作選擇。更改圖像內的div圖像點擊

你可以通過上面的圖片看，我有一個包含瀏覽器的加載圖片的主DIV，和另外兩個縮略圖的div，其中包括不同的圖片，我要創建的函數改變主div如果選擇了一個較小的縮略圖div。

當前的JavaScript函數

function diffImage(img) { 
    if(img.src.match(/blank/)) img.src = "bognor.jpg"; 
    else img.src = "images/bognor2.jpg"; 
}

由於提前，山姆

來源

2015-10-20 methhead

我相信這可以回答你的問題：http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag – agbodike

你只使用上的圖標onclick事件偵聽器和函數將大圖像改變成該項目的圖像點擊：

document.getElementById("icon1").onclick = function() { 
    document.getElementById("mainImage").src = this.src; 
} 

document.getElementById("icon2").onclick = function() { 
    document.getElementById("mainImage").src = this.src; 
}

如果你碰巧有幾個圖標你可以做一個icon類，並應用事件監聽器，如下：

var icons = document.getElementsByClassName("icon"); 

for(var i=0; i<icons.length; i++) { 
    icons[i].onclick = function(){ 
     document.getElementById("main").src = this.src; 
    } 
}

Fiddle Example for using classes

雖然這是在這種情況下更易於使用jQuery並只需連接事件處理程序做$('.icon').click(function(){ ... })。當然你不需要這樣做。

來源

2015-10-20 17:17:04

如果您有許多圖標（縮略圖），比如10+，這會複製很多代碼。更不用說更改所有重複代碼的噩夢，如果圖標的名稱改變了，或者源代碼或圖像......最好將常見的東西抽象成元素的「類型」（即由類屬性定義）並將代碼/邏輯應用於它。 – ochi

@ochi在這種情況下，它只有兩個。如果有幾個我會建議用戶有一個'icon'類，並使用jQuery'$（'。icon'）。click（...）''將類應用到事件監聽器中。 –

您還假設該圖標的來源將成爲完整圖像的來源。縮略圖通常是原始版本的較小版本，如果大小合適，它看起來不會很好（非常像素）。另外，僅僅添加jquery才能切換圖像看起來像是矯枉過正......不是推薦的適用範圍 – ochi

您可以將大圖像的url放在拇指元素上的自定義data-attribute上，如<img src="thumb1.png" data-bigsrc="image1.png" />。如果你有高品質的圖像

var thumbs = document.querySelectorAll('.thumbnail'); 
var mainImage = document.querySelector('#mainImage'); 


for(var i=0; i<thumbs.length; ++i) { 
    thumbs[i].addEventListener('click', function(e) { 
     mainImage.src = e.target.getAttribute("data-bigsrc"); 
    }); 
}

，實際上想讓他們加載，當用戶點擊，你也可以使用一個單選按鈕，每幅圖像，用：然後你就可以一次這樣的活動添加到所有縮略圖value設置爲大圖片的網址。使單選按鈕不可見並將縮略圖放在標籤內。然後，您可以將事件偵聽器綁定到所有單選按鈕，並使其根據單選按鈕值更改主圖像URL。

或者，如果您希望提前加載所有圖像，只需製作大量的大小圖像對，並僅在小圖像的單選按鈕被點擊時才能看到大圖像，從而製作出全部css解決方案。

來源

2015-10-20 17:34:10

我最近做了一些類似的地方，我在一張小桌子下面放了一張桌子。

$(".browseTable").on('click', 'td', function() { 
    var thumbNail = $(this).parent('tr').find('img').attr('src'); 
    var feature = $('#featureImg img').attr('src'); 
    $('#featureImg img').fadeOut(400, function() { 
     $(this).fadeIn(400)[0].src = thumbNail; 
    }); 
});

來源

2015-10-20 17:37:42

作爲替換，這裏採用香草JavaScript和存儲/命名的文件被覆蓋的圖像的三種不同的方式。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
\t <meta charset="utf-8" /> 
 
</head> 
 
<body> 
 
    <div id="divMainImage"> 
 
     <img id="mainImage" src="/images/image01Main.jpg" alt="Main image" /> 
 
    </div> 
 
    <div id="divThumbnails"> 
 
     <img class="thumb" src="/images/image01.jpg" alt="image01 thumbnail" /> 
 
     <img class="thumb" src="/images/image02.jpg" alt="image02 thumbnail" /> 
 
     <img class="thumb" src="/images/image03.jpg" alt="image03 thumbnail" /> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     // Name both small and large images the same but with a prefix or suffix depicting thumbnail/main: 
 
     // image01.jpg (image01small.jpg) or image01Main.jpg (image01.jpg) 
 
     // image02.jpg (image02small.jpg) or image02Main.jpg (image02.jpg) etc. 
 
     // Or use two folders - one with main images, the other with thumbnails - both files named the same, 
 
     // then swap the folder to use when getting the image. 
 

 
     // Then use the displayed thumbnails' class to load originals: 
 
     var thumbnails = document.getElementsByClassName("thumb"); 
 
     var mainImage = document.getElementById("mainImage"); 
 

 
     for (index in thumbnails) 
 
     { 
 
      thumbnails[index].onclick = function() { 
 
       // Depending on the way used use on of the following: 
 
       mainImage.src = this.src.replace('.jpg', 'Main.jpg'); 
 
       // Or 
 
       // mainImage.src = this.src.replace('thumb.jpg', '.jpg'); 
 
       // Or 
 
       // mainImage.src = this.src.replace('/images/small/', '/images/large/'); 
 
      } 
 
     } 
 
    </script> 
 
</body> 
 
</html>

來源

2015-10-20 18:12:33

更改圖像內的div圖像點擊

回答

相關問題