本文主要是介绍Javascript图片库(1),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
显示效果如下图
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"/><title >image gallery </title>
</head>
<body><h1>SnapShots</a><ul><li><a href="images/1.jpg" onclick="showpic(this);return false;" title="picture one">picture one</a></li><li><a href="images/2.jpg" onclick="showpic(this);return false;" title="picture two">picture two</a></li><li><a href="images/3.jpg" onclick="showpic(this);return false;" title="picture three">picture three</a></li><li><a href="images/4.jpg" onclick="showpic(this);return false;" title="picture four">picture four</a></li></ul><img src="images/5.jpg" id="placeholder" alt="sf"/><p id="description" >choose a picture</p> <script type="text/javascript">function showpic(whichpic){//alert("Hello world");var source = whichpic.getAttribute("href");var holder = document.getElementById("placeholder");holder.setAttribute("src",source);var text = whichpic.getAttribute("title");var desc = document.getElementById("description");desc.firstChild.nodeValue = text;}</script></body>
</html>
点击链接时,图片不会打开一个新的网页。图片下面的文字点击图片时会变为图片的title中的属性。
一般情况下,JS引用方式为:
第①种
<script language="Javascript"></script>
第②种
<script type="text/javascript"></script>
那么,这两种引用的区别在哪里呢?
在HTML网页里插入Javascript语句,应使用HTML的;其内部的代码为Javascript语句。
比如:
<script type="text/javascript">
document.write("Welcome to www.yiqixue.net!");
</script>
但是在参考别人的Javascript代码时,却看到里写的不是 type="text/javascript",而是language="Javascript"。
里的代码是Javascript。然而,language这个属性在W3C的HTML标准中,已不再推荐使用。
虽然这两种引用都没有错,但是,今后我们在制作Web网页的时候,应该使用第②种方法,尽可能的少使用或舍弃第①种方法。
再最初鞋代码的时候,写成了
这篇关于Javascript图片库(1)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!