基於鏈接通過溢出的圖像變量

基本上，我有很多圖像鏈接，我希望這些鏈接觸發固定的重疊樣式，但基於單擊圖像鏈接的唯一圖像。基於鏈接通過溢出的圖像變量

<img src="../Images/square 300/Drawing/angel face300.jpg" style='height: 300px; width: 300px;' onclick="imageurls(this, '../Images/A4/drawing/angel face.jpg')" />

^^一個基本圖像鏈接W /的onclick

<script> 
function imageurls(elem, imgurl) { 
    var y = document.createElement("DIV").style.width = "100%"; 
     y.class = "overlay-content" 
    var x = document.createElement("IMG").style.width = "100%"; 
     x.setAttribute("src", imgurl); 
     x.setAttribute("width", "900"); 
     x.setAttribute("height", "900"); 
     x.setAttribute("alt", "_blank"); 
     y.appendChild(x); 
    document.getElementById("Imagediv").appendChild(y).style.width = "100%"; 
} 

function closeNav() { 
    document.getElementById("Imagediv").style.width = "0%"; 
} 
</script>

^^我的Java腳本，這裏的問題似乎是，但即時通訊不能確定是哪方面呢

<div id="Imagediv" class="overlay"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
</div>

所有我的CSS樣式完美地工作，如果我只是使用document.get.element ....並刪除var x和y覆蓋工程。

來源

2017-05-03 hale

變量聲明是錯誤的。用這樣的

 var x = document.createElement("IMG") 
    var y = document.createElement("DIV")

變量聲明之後應用的樣式。

刪除var x和y覆蓋的作品。

因爲變量聲明是錯誤的，從而attributes不追加到新創建的元素

function imageurls(elem, imgurl) { 
 
    var y = document.createElement("DIV") 
 
      y.style.width = "100%"; 
 
     y.class = "overlay-content" 
 
    var x = document.createElement("IMG") 
 
     x.style.width = "100%"; 
 
     x.setAttribute("src", imgurl); 
 
     x.setAttribute("width", "900px"); 
 
     x.setAttribute("height", "900px"); 
 
     x.setAttribute("alt", "_blank"); 
 
      y.appendChild(x); 
 
    document.getElementById("Imagediv").appendChild(y).style.width = "100%"; 
 

 
    console.log(document.getElementById('Imagediv').innerHTML) 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("Imagediv").style.width = "0%"; 
 
}

<div id="Imagediv" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
</div> 
 
<img src="../Images/square 300/Drawing/angel face300.jpg" style='height: 300px; width: 300px;' onclick="imageurls(this, '../Images/A4/drawing/angel face.jpg')" />

來源

2017-05-03 10:20:46 prasanth

已嘗試，目前仍是當我點擊它什麼也不做形象，覆蓋甚至沒有出現。有什麼更好或更容易達到我想要的？如果我只是使用 ..... document.getElementById（「Imagediv」）。style.width =「100％」.... 覆蓋層出現，但顯然只是空白，有沒有更好的方法把可變圖像放入？ – hale

看到我更新的答案.i被顯示'console.log'附加在html中的東西正確追加 – prasanth

感謝堆，設法讓它工作:)，但現在itil加載正確的IMG第一次然後只有IMG不管下一個我點擊，任何想法？ – hale

基於鏈接通過溢出的圖像變量

回答

相關問題