2017-10-05 88 views
1

我想知道爲什麼我的代碼爲這個網站inst工作。我定義了所有的neccessarys(funtions和css),但是我仍然收到諸如「clicked is not defined」之類的錯誤,但是在它的腳本中。它應該使用JavaScript將點擊的圖像放在前面。該代碼只是改變了zindex,使它在前面。錯誤點擊功能javascript和zindex

爲什麼不能正常工作。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 
body 
 
{ 
 
\t background-image: url("http://logar.gitastudent.online/images/background.png"); 
 
} 
 

 
#img1 { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: 1; 
 
} 
 

 
#img2 { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
    z-index: 1; 
 
} 
 
#img3 { 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 20px; 
 
    z-index: 1; 
 
} 
 
#img4 { 
 
    position: absolute; 
 
    left: 30px; 
 
    top: 30px; 
 
    z-index: 1; 
 
} 
 
#img5 { 
 
    position: absolute; 
 
    left: 40px; 
 
    top: 40px; 
 
    z-index: 1; 
 
} 
 
#img6 { 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 50px; 
 
    z-index: 1; 
 
} 
 
#img7 { 
 
    position: absolute; 
 
    left: 60px; 
 
    top: 60px; 
 
    z-index: 1; 
 
} 
 
#img8 { 
 
    position: absolute; 
 
    left: 70px; 
 
    top: 70px; 
 
    z-index: 1; 
 
} 
 
#img9 { 
 
    position: absolute; 
 
    left: 80px; 
 
    top: 80px; 
 
    z-index: 1; 
 
} 
 

 
#img10 { 
 
    position: absolute; 
 
    left: 90px; 
 
    top: 90px; 
 
    z-index: 1; 
 
} 
 

 

 
#img11 { 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 100px; 
 
    z-index: 1; 
 
} 
 

 

 
#img12 { 
 
    position: absolute; 
 
    left: 110px; 
 
    top: 110px; 
 
    z-index: 1; 
 
} 
 

 

 
#img13 { 
 
    position: absolute; 
 
    left: 120px; 
 
    top: 120px; 
 
    z-index: 1; 
 
} 
 

 

 
#img14 { 
 
    position: absolute; 
 
    left: 130px; 
 
    top: 130px; 
 
    z-index: 1; 
 
} 
 

 

 
#img15 { 
 
    position: absolute; 
 
    left: 140px; 
 
    top: 140px; 
 
    z-index: 1; 
 
} 
 

 
<script> 
 

 
var clicked = function(id) { 
 
\t 
 
\t document.getElementById("img1").style.zIndex = "1"; 
 
\t document.getElementById("img2").style.zIndex = "1"; 
 
\t document.getElementById("img3").style.zIndex = "1"; 
 
\t document.getElementById("img4").style.zIndex = "1"; 
 
\t document.getElementById("img5").style.zIndex = "1"; 
 
\t document.getElementById("img6").style.zIndex = "1"; 
 
\t document.getElementById("img7").style.zIndex = "1"; 
 
\t document.getElementById("img8").style.zIndex = "1"; 
 
\t document.getElementById("img9").style.zIndex = "1"; 
 
\t document.getElementById("img10").style.zIndex = "1"; 
 
\t document.getElementById("img11").style.zIndex = "1"; 
 
\t document.getElementById("img12").style.zIndex = "1"; 
 
\t document.getElementById("img13").style.zIndex = "1"; 
 
\t document.getElementById("img14").style.zIndex = "1"; 
 
\t document.getElementById("img15").style.zIndex = "1"; 
 
\t 
 
\t document.getElementById(id).style.zIndex = "2"; 
 
\t 
 
} 
 

 
</script> 
 

 
</style> 
 
</head> 
 
<body> 
 

 
\t <img id="img1" src="https://i0.wp.com/www.commodore.ca/gallery/hardware/Commodore%20Educator.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Dysan_floppy_disk_01.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img3" src="https://image.freepik.com/free-photo/children-playing-on-grass_1098-504.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img4" src="https://afv.com/wp-content/uploads/2016/06/iccbaby_09.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img5" src="https://qzprod.files.wordpress.com/2016/06/rtx2fw23.jpg?quality=80&strip=all" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img6" src="https://img.wonderhowto.com/img/53/47/63580328862338/0/study-for-white-hat-hacker-associate-certification-cwa.1280x600.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img7" src="https://i.ytimg.com/vi/BEDVjg5y0Hg/maxresdefault.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img8" src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Dysan_floppy_disk_01.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img9" src="http://www.vintageisthenewold.com/wp-content/uploads/2015/01/PrintPreview-520x245.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img10" src="http://www.guidebookgallery.org/pics/gui/startupshutdown/splash/win95-1-1.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img11" src="http://i0.kym-cdn.com/photos/images/original/001/075/880/bb9.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img12" src="http://vignette4.wikia.nocookie.net/roblox-apocalypse-rising/images/5/59/Doge-meme-Text-Art.jpg/revision/latest?cb=20131125030607" width="50%" height="80%" \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img13" src="http://static1.squarespace.com/static/52e15a97e4b012e6d957fc62/5578e529e4b0204b4bc0d3c5/5907cce69de4bbccbb450a8f/1493683468194/Family-Silhouette-3.jpg?format=1000w" width="50%" height="80%" \t onclick="clicked(this)"> 
 
\t <img id="img14" src="https://mrayton.files.wordpress.com/2012/03/thecross.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img15" src="http://www.ecnmag.com/sites/ecnmag.com/files/3%2C5_DD_floppy_%28720_KB%29_back.jpeg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 

 
</body> 
 
</html>

+1

你的風格標籤內的腳本標記,更改和檢查 –

回答

0

兩個問題,一是,script無法識別內部style,所以clicked功能是不確定的。你通過thisclicked,它傳遞一個圖像對象。您可以使用id.id來閱讀id屬性。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 
body 
 
{ 
 
\t background-image: url("http://logar.gitastudent.online/images/background.png"); 
 
} 
 

 
#img1 { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: 1; 
 
} 
 

 
#img2 { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
    z-index: 1; 
 
} 
 
#img3 { 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 20px; 
 
    z-index: 1; 
 
} 
 
#img4 { 
 
    position: absolute; 
 
    left: 30px; 
 
    top: 30px; 
 
    z-index: 1; 
 
} 
 
#img5 { 
 
    position: absolute; 
 
    left: 40px; 
 
    top: 40px; 
 
    z-index: 1; 
 
} 
 
#img6 { 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 50px; 
 
    z-index: 1; 
 
} 
 
#img7 { 
 
    position: absolute; 
 
    left: 60px; 
 
    top: 60px; 
 
    z-index: 1; 
 
} 
 
#img8 { 
 
    position: absolute; 
 
    left: 70px; 
 
    top: 70px; 
 
    z-index: 1; 
 
} 
 
#img9 { 
 
    position: absolute; 
 
    left: 80px; 
 
    top: 80px; 
 
    z-index: 1; 
 
} 
 

 
#img10 { 
 
    position: absolute; 
 
    left: 90px; 
 
    top: 90px; 
 
    z-index: 1; 
 
} 
 

 

 
#img11 { 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 100px; 
 
    z-index: 1; 
 
} 
 

 

 
#img12 { 
 
    position: absolute; 
 
    left: 110px; 
 
    top: 110px; 
 
    z-index: 1; 
 
} 
 

 

 
#img13 { 
 
    position: absolute; 
 
    left: 120px; 
 
    top: 120px; 
 
    z-index: 1; 
 
} 
 

 

 
#img14 { 
 
    position: absolute; 
 
    left: 130px; 
 
    top: 130px; 
 
    z-index: 1; 
 
} 
 

 

 
#img15 { 
 
    position: absolute; 
 
    left: 140px; 
 
    top: 140px; 
 
    z-index: 1; 
 
} 
 
</style> 
 
<script> 
 

 
var clicked = function(id) { 
 
\t 
 
\t document.getElementById("img1").style.zIndex = "1"; 
 
\t document.getElementById("img2").style.zIndex = "1"; 
 
\t document.getElementById("img3").style.zIndex = "1"; 
 
\t document.getElementById("img4").style.zIndex = "1"; 
 
\t document.getElementById("img5").style.zIndex = "1"; 
 
\t document.getElementById("img6").style.zIndex = "1"; 
 
\t document.getElementById("img7").style.zIndex = "1"; 
 
\t document.getElementById("img8").style.zIndex = "1"; 
 
\t document.getElementById("img9").style.zIndex = "1"; 
 
\t document.getElementById("img10").style.zIndex = "1"; 
 
\t document.getElementById("img11").style.zIndex = "1"; 
 
\t document.getElementById("img12").style.zIndex = "1"; 
 
\t document.getElementById("img13").style.zIndex = "1"; 
 
\t document.getElementById("img14").style.zIndex = "1"; 
 
\t document.getElementById("img15").style.zIndex = "1"; 
 
\t 
 
\t document.getElementById(id.id).style.zIndex = "2"; 
 
\t 
 
} 
 

 
</script> 
 

 
    
 
</head> 
 
<body> 
 

 
\t <img id="img1" src="https://i0.wp.com/www.commodore.ca/gallery/hardware/Commodore%20Educator.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Dysan_floppy_disk_01.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img3" src="https://image.freepik.com/free-photo/children-playing-on-grass_1098-504.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img4" src="https://afv.com/wp-content/uploads/2016/06/iccbaby_09.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img5" src="https://qzprod.files.wordpress.com/2016/06/rtx2fw23.jpg?quality=80&strip=all" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img6" src="https://img.wonderhowto.com/img/53/47/63580328862338/0/study-for-white-hat-hacker-associate-certification-cwa.1280x600.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img7" src="https://i.ytimg.com/vi/BEDVjg5y0Hg/maxresdefault.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img8" src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Dysan_floppy_disk_01.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img9" src="http://www.vintageisthenewold.com/wp-content/uploads/2015/01/PrintPreview-520x245.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img10" src="http://www.guidebookgallery.org/pics/gui/startupshutdown/splash/win95-1-1.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img11" src="http://i0.kym-cdn.com/photos/images/original/001/075/880/bb9.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img12" src="http://vignette4.wikia.nocookie.net/roblox-apocalypse-rising/images/5/59/Doge-meme-Text-Art.jpg/revision/latest?cb=20131125030607" width="50%" height="80%" \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img13" src="http://static1.squarespace.com/static/52e15a97e4b012e6d957fc62/5578e529e4b0204b4bc0d3c5/5907cce69de4bbccbb450a8f/1493683468194/Family-Silhouette-3.jpg?format=1000w" width="50%" height="80%" \t onclick="clicked(this)"> 
 
\t <img id="img14" src="https://mrayton.files.wordpress.com/2012/03/thecross.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
\t <img id="img15" src="http://www.ecnmag.com/sites/ecnmag.com/files/3%2C5_DD_floppy_%28720_KB%29_back.jpeg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 

 
</body> 
 
</html>

0

您弄丟了腳本。並改變document.getElementById(id).style.zIndex = "2";id.style.zIndex = "2";

 function clicked(id) { 
 
    
 
    \t document.getElementById("img1").style.zIndex = "1"; 
 
    \t document.getElementById("img2").style.zIndex = "1"; 
 
    \t document.getElementById("img3").style.zIndex = "1"; 
 
    \t document.getElementById("img4").style.zIndex = "1"; 
 
    \t document.getElementById("img5").style.zIndex = "1"; 
 
    \t document.getElementById("img6").style.zIndex = "1"; 
 
    \t document.getElementById("img7").style.zIndex = "1"; 
 
    \t document.getElementById("img8").style.zIndex = "1"; 
 
    \t document.getElementById("img9").style.zIndex = "1"; 
 
    \t document.getElementById("img10").style.zIndex = "1"; 
 
    \t document.getElementById("img11").style.zIndex = "1"; 
 
    \t document.getElementById("img12").style.zIndex = "1"; 
 
    \t document.getElementById("img13").style.zIndex = "1"; 
 
    \t document.getElementById("img14").style.zIndex = "1"; 
 
    \t document.getElementById("img15").style.zIndex = "1"; 
 
    \t 
 
    \t id.style.zIndex = "2"; 
 
    \t 
 
    }
body 
 
    { 
 
    \t background-image: url("http://logar.gitastudent.online/images/background.png"); 
 
    } 
 

 
    #img1 { 
 
     position: absolute; 
 
     left: 0px; 
 
     top: 0px; 
 
     z-index: 1; 
 
    } 
 

 
    #img2 { 
 
     position: absolute; 
 
     left: 10px; 
 
     top: 10px; 
 
     z-index: 1; 
 
    } 
 
    #img3 { 
 
     position: absolute; 
 
     left: 20px; 
 
     top: 20px; 
 
     z-index: 1; 
 
    } 
 
    #img4 { 
 
     position: absolute; 
 
     left: 30px; 
 
     top: 30px; 
 
     z-index: 1; 
 
    } 
 
    #img5 { 
 
     position: absolute; 
 
     left: 40px; 
 
     top: 40px; 
 
     z-index: 1; 
 
    } 
 
    #img6 { 
 
     position: absolute; 
 
     left: 50px; 
 
     top: 50px; 
 
     z-index: 1; 
 
    } 
 
    #img7 { 
 
     position: absolute; 
 
     left: 60px; 
 
     top: 60px; 
 
     z-index: 1; 
 
    } 
 
    #img8 { 
 
     position: absolute; 
 
     left: 70px; 
 
     top: 70px; 
 
     z-index: 1; 
 
    } 
 
    #img9 { 
 
     position: absolute; 
 
     left: 80px; 
 
     top: 80px; 
 
     z-index: 1; 
 
    } 
 

 
    #img10 { 
 
     position: absolute; 
 
     left: 90px; 
 
     top: 90px; 
 
     z-index: 1; 
 
    } 
 

 

 
    #img11 { 
 
     position: absolute; 
 
     left: 100px; 
 
     top: 100px; 
 
     z-index: 1; 
 
    } 
 

 

 
    #img12 { 
 
     position: absolute; 
 
     left: 110px; 
 
     top: 110px; 
 
     z-index: 1; 
 
    } 
 

 

 
    #img13 { 
 
     position: absolute; 
 
     left: 120px; 
 
     top: 120px; 
 
     z-index: 1; 
 
    } 
 

 

 
    #img14 { 
 
     position: absolute; 
 
     left: 130px; 
 
     top: 130px; 
 
     z-index: 1; 
 
    } 
 

 

 
    #img15 { 
 
     position: absolute; 
 
     left: 140px; 
 
     top: 140px; 
 
     z-index: 1; 
 
    }
<img id="img1" src="https://i0.wp.com/www.commodore.ca/gallery/hardware/Commodore%20Educator.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Dysan_floppy_disk_01.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img3" src="https://image.freepik.com/free-photo/children-playing-on-grass_1098-504.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img4" src="https://afv.com/wp-content/uploads/2016/06/iccbaby_09.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img5" src="https://qzprod.files.wordpress.com/2016/06/rtx2fw23.jpg?quality=80&strip=all" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img6" src="https://img.wonderhowto.com/img/53/47/63580328862338/0/study-for-white-hat-hacker-associate-certification-cwa.1280x600.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img7" src="https://i.ytimg.com/vi/BEDVjg5y0Hg/maxresdefault.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img8" src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Dysan_floppy_disk_01.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img9" src="http://www.vintageisthenewold.com/wp-content/uploads/2015/01/PrintPreview-520x245.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img10" src="http://www.guidebookgallery.org/pics/gui/startupshutdown/splash/win95-1-1.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img11" src="http://i0.kym-cdn.com/photos/images/original/001/075/880/bb9.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img12" src="http://vignette4.wikia.nocookie.net/roblox-apocalypse-rising/images/5/59/Doge-meme-Text-Art.jpg/revision/latest?cb=20131125030607" width="50%" height="80%" \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img13" src="http://static1.squarespace.com/static/52e15a97e4b012e6d957fc62/5578e529e4b0204b4bc0d3c5/5907cce69de4bbccbb450a8f/1493683468194/Family-Silhouette-3.jpg?format=1000w" width="50%" height="80%" \t onclick="clicked(this)"> 
 
    \t <img id="img14" src="https://mrayton.files.wordpress.com/2012/03/thecross.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)"> 
 
    \t <img id="img15" src="http://www.ecnmag.com/sites/ecnmag.com/files/3%2C5_DD_floppy_%28720_KB%29_back.jpeg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">