Javascript獲取圖像源並注入到另一個圖像源中

我一直在研究Javascript照片庫，我希望它對用戶非常友好。這隻涉及每個圖像使用一個圖像和一個鏈接。我有它，所以所有的圖像出現在左側的滾動div和onClick它是假設更改右側的圖像源，但我似乎無法得到JavaScript從原始圖像獲取圖像源並更改第二個一個與它。我嘗試了其他一些方法，但這是我喜歡的方式，如果我能夠實現它，它將是完美的。Javascript獲取圖像源並注入到另一個圖像源中

這是在一個表內，所以它是不同的對齊我只是給需要的代碼。

此代碼在下面給出，但似乎他刪除了他的答案。我覺得你比我親近很多！

的Javascript：

<script type="Text/javscript"> 

function setImage(this) { 
    document.getElementById("ImageFrame").src = this.childNodes[0].src; 
} 

</script>

休息

<div style="width:275;height:400;overflow-x:scroll;"> 

    <a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0421.jpg" /></a> 

    <a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0422.jpg" /></a> 

    <a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0423.jpg" /></a> 

</div>

的圖像被改變。

<div> 
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" /> 
</div>

來源

2012-05-15 Spencer May

這裏是一個工作示例。 NOTE: a.getElementsByTagName('img')[0].src，因爲不同的瀏覽器會添加節點來標記子標記之前和之後的標記。It is safe to use getElementsByTagName('img')[0].src

<html> 
    <head> 
    <script type="text/javascript"> 
    function setImg(a){ 
      //alert(a.getElementsByTagName('img')[0].src); 
       document.getElementById('ImageFrame').src = 
          a.getElementsByTagName('img')[0].src 
      } 
     </script> 
    </head> 
    <body> 
    <a href="#" onclick="setImg(this);"><img src="JCF/PICT0421.jpg"></a> 

     <div> 
      <img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" /> 
     </div> 
    </body> 
</html>

來源

2012-05-15 13:01:24 Kaf

即使是這樣，它不起作用 –

取消提醒並檢查消息。它應該爲你顯示正確的img源。這對我來說很好。 '不要使用obj.childNode [0]，因爲0節點並不總是一個img標籤。這取決於瀏覽器。「＃： – Kaf

好吧，這一定是嚴重的，因爲即使是JavaScript的警報不適合我，我知道我有這個正確。 –

var pic1 = document.getElementById("image1"); 
var src = pic1.src; // here is the src for image1 

var pic2 = document.getElementById("image2"); 
pic1.src = src; // here we set the src for image2

所以這段代碼將採取圖像src從圖像1，並把它圖像2。

來源

2012-05-15 12:42:50

我知道如何做到這一點，這是大多數人會做，在我的即時通訊試圖去簡單，你不要」不必做出單獨的功能，每個onClick中只有一個通用代碼。 –

我相信這樣的事情應該爲你工作：

HTML：

<a href="#" onclick="setImage(this);"><img class="gallery" id="image1" src="image1.jpg" /></a>

的Javascript：

function setImage(imgParent) { 
    document.getElementById("ImageFrame").src = imgParent.childNodes[0].src; 
}

Live DEMO

當您實際加載圖像時，演示效果會更好。但是，如果您檢查了損壞的圖像，則可以看到它正確加載到新圖像中。

編輯：

由於卡夫提到，他有問題與的childNodes，你可能想嘗試了這一點，而不是：

的Javascript：

function setImage(imgParent) { 
    document.getElementById("ImageFrame").src = imgParent.getElementsByTagName('img')[0].src; 
}

來源

2012-05-15 12:48:02

刪除這個，並用我的情況下替換它，比如imgParent。否則，它會拋出一個JavaScript錯誤。我認爲這會適用於此，但我錯了。這就是爲什麼我最初刪除了我的答案。：P –

我確實改變了它，它似乎仍然沒有工作：/ –

現場演示似乎也沒有工作。我檢查了代碼的來源，圖像沒有改變。 –

假設你可以使用jQuery

$('.imageClass').click(function(){ 
    var srcToCopy = $(this).attr('src'); 
    $(somewheretoputsrc).attr('src', srcToCopy); 
})

此代碼應工作

編輯：撥弄工作圖像編輯 http://jsfiddle.net/jbduzan/b7adx/1/

來源

2012-05-15 13:10:26 jbduzan

我會把它作爲一個onclick函數嗎？因爲是的，我可以使用jQuery。 –

有幾種方法可以做到這一點，將相同的類添加到圖像中，或者創建一個函數，將2行內容包裝在click函數中，並使用onClick函數調用它。我更喜歡我在jsFiddle上使用的方法 – jbduzan

你應該用所謂的「非侵入式JavaScript去「，即不要將內容與JavaScript混合，並在加載窗口後應用所需的行爲。類似的東西：

function addDomListener(element, eventName, listener) { 
    if (element.addEventListener) // most browsers 
    element.addEventListener(eventName, listener, true); 
    else if (element.attachEvent) // IE 
    element.attachEvent('on' + eventName, listener); 
} 
window.onload = function() { 
    var elements = getElementsByClassName('thumb-link'); 
    for (int i=0; i < elements.size(); i++) { 
    var el = elements[i]; 
    addDomListener(el, "click", function() { 
     setImage(el); 
    }); 
    } 
}

getElementsByClassName方法還在這裏需要一個執行和每一個有標籤點擊數之前所需要的類「拇指鏈接」。但我相信你會知道這一點。

使用像jQuery或的Prototype.js庫將使它更容易在這裏...

來源

2012-05-15 13:42:49 Lincoln

Javascript獲取圖像源並注入到另一個圖像源中

回答

相關問題