您的位置：首页 > Web前端 > JavaScript

JavaScript学习 基本语法

2016-11-15 20:24 316 查看
一：添加图片的实例程序
要求 点击超链接能够实现跳转到一张图片，到一张图片在本页显示的程序 其中各个文件都在一个文件夹下，根据路径建立在文件夹下
html程序
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="styles/layout.css" media="screen">
</head>
<body>
<h1>Snapshots<h1>
<ul>
<li>
<a href="images/fireworks.jpg" onclick="showPic(this);return false;" title="A fireWorks display">Fireworks</a>
</li>
<li>
<a href="images/coffee.jpg" onclick="showPic(this);return false;" title="A cup of black coffee">Coffee</a>
</li>
<li>
<a href="images/rose.jpg" onclick="showPic(this);return false;" title="A red red rose">Rose</a>
</li>
<li>
<a href="images/bigben.jpg"onclick="showPic(this);return false;" title="The famous clock">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery">
<p id="description">Choose an image.</p>
<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>

javaScript程序：
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text=whichpic.getAttribute("title");
var description=document.getElementById("description");
description.firstChild.nodeValue=text;
}

css程序：
body{
font-family:"Helvetica","Arial",serif;
color:#333;
backgroud-color:#ccc;
margin:1em 10%
}
h1{
color: #333;
background-color:transparents;
}
a{
color:#c60;
background-color:transparents;
font-weight:bold;
text-decoration:none;
}
u1{
padding:0;
}
li {
float:left;
padding:1em;
list-style:none
}
img{
display:block;
clear:both;
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航