簡單的圖片顯示
阿新 • • 發佈：2017-07-15
padding 行為 isp snapshot col borde 導航頁 -s nload
<!doctype html> <html> <head> <meta charset="utf-8"> <title>圖片瀏覽</title> <link href="pic.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Snapshots</h1> <ul> <li><a href="pic/image1.jpeg" title="盛世美顏"onclick="showPic(this);return false;">帥照1</a></li> <li><a href="pic/image2.jpeg" title="帥哥" onclick="showPic(this);return false;">帥照2</a></li> <li><a href="pic/image3.jpeg" title="絕代美顏" onclick="showPic(this);return false;">帥照3</a></li> <li><a href="pic/image4.jpeg" title="朦朧帥" onclick="showPic(this);return false;">帥照4</a></li> <li><a href="pic/image5.jpeg" title="酷" onclick="showPic(this);return false;">帥照5</a></li> <li><a href="pic/image6.jpeg" title="傲嬌" onclick="showPic(this);return false;">帥照6</a></li> <!--return false;onclick事件處理函數所觸發的Javascript代碼返回給它的值是false， （所以這個鏈接的默認行為沒有被觸發，所以不會打開圖片查看器，不會打開一個新的網頁。）即防止用戶被帶到目標鏈接窗口 --> </ul> <p id="description">Choose a picture.</p> <img id="imgPlace" src="pic/封面.jpeg" alt="my image gallery"> <script type="text/javascript"> function showPic(thePic){ // event=event||window.event; // if(event.stopPropagation){ // event.stopPropagation(); // } // else{ // event.cancelBubble=true; // } //實現圖片切換 var source=thePic.getAttribute("href"); var imgPlace=document.getElementById("imgPlace"); imgPlace.setAttribute("src",source); //實現文本切換 var title=thePic.getAttribute("title"); var description=document.getElementById("description"); //alert(description.childNodes[0].nodeValue); //childNodes[0]==firstChild 正如 childNodes[node.childNodes.length-1]=lastChild description.firstChild.nodeValue=title; } // window.onload=function(){ // var imgPlace=document.getElementById("imgPlace"); // var orginPic=imgPlace.getAttribute("src"); // // 點擊頁面空白處時 // document.onclick=function(){ // // 顯示導航頁 // imgPlace.setAttribute("src",orginPic); // } // } </script> </body> </html>
@charset "utf-8"; /* CSS Document */ /**{margin:0;padding:0;}*/ body{font-size:14px; width:100%;} img{border:none;} li{list-style:none;} input,select,textarea{ outline:none;} textarea{ resize:none;} h1{ color:#333; background:transparent;} a{ text-decoration:none; color:#DB4E27; background:transparent; font-weight:bold; } ul{ width:900px; margin:0 auto; } li{ height:16px; line-height:16px; float:left; width:150px; /*margin:10px auto;*/ margin-bottom:50px; text-align:center; } p{ clear:both; text-align:center; /*不定寬元素居中*/ } img{ display:block; margin:5px auto; height:600px; weight:440px; }
沒有辦法上傳圖片文件包，看來我以後可能得選擇github保存工作成果了
簡單的圖片顯示