<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>Image Gallery</title>

    <script type="text/javascript" src="scripts/showPic.js"></script>

</head>

<body>

  <h1>Snapshots</h1>

  <ul>

    <li>

      <a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a>

    </li>

    <li>

      <a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this); return false;">Coffee</a>

    </li>

    <li>

      <a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a>

    </li>

    <li>

      <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a>

    </li>

  </ul>

  <img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />

  <p id="description">Choose an image.</p>

</body>

</html>

showPic.js文件

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;

}

JQuery的图片切换效果要漂亮很多：
http://www.cnblogs.com/lhb25/p/50-jquery-plugins-f.html
http://tympanus.net/Development/ImageTransitions/

JS当页换图片（分析href所给的信息）的更多相关文章

  1. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  2. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  3. JS可控制的图片自动循环播放查看效果

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

  4. java+js实现完整的图片展示本地目录demo

    java+js实现完整的图片展示本地目录demo 最近的项目满足需要,实现通过一个前端button点击事件,流行音乐浏览下的全部图片: 思路: - 获取到所需展示图片的本地目录内全部图片的文件绝对路径 ...

  5. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  6. JS实现随机背景图片与图片大小变换的效果

    经常在网上见一些网站访问一次背景图片改变一次,而且图片的大小不停变换,于是想着自己研究一下. 背景图片可以通过JS的随机数来改变图片的src来实现随机图片,图片的大小变换可以用JS的setInterv ...

  7. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  8. js插件---强大的图片裁剪Cropper

    js插件---强大的图片裁剪Cropper 一.总结 一句话总结:官网或者github里面的文档或者demo才是真的详细 使用的话找到图片裁剪后的base64数据,然后这个数据可下载可传递到服务器 1 ...

  9. Django加入JS，CSS，图片等外部文件的方法

    Django加入JS,CSS.图片等外部文件的方法 By 白熊花田(http://blog.csdn.net/whiterbear) 转载需注明出处,谢谢. 在使用Django搭建站点时,往往须要使用 ...

随机推荐

  1. Atitit .h5文件上传 v3

    Atitit .h5文件上传 v3 1. 上传原理1 2. V3版新特性1 3. Html1 4. Js2 5. uploadV2.js2 6. upServlet & FileUploadS ...

  2. Atitti. 语法树AST、后缀表达式、DAG、三地址代码

    Atitti. 语法树AST.后缀表达式.DAG.三地址代码 抽象语法树的观点认为任何复杂的语句嵌套情况都可以借助于树的形式加以描述.确实,不得不承认应用抽象语法树可以使语句翻译变得相对容易,它很好地 ...

  3. Atitit.词法分析的理论原理 part2

    Atitit.词法分析的理论原理 part2 1.  转换图1 1.1. 转换图是由程序流程图改进而成的.同样,转换图也可以等价地转换为程序流程图3 1.2. 2.2.3  构造词法分析器(2)流程程 ...

  4. TextView中超链接拦截

    TextView中的超链接点击时,其实是通过Intent方式的,因此会调用Activity中的startActivity(Intent intent)方法,所以可在此方法中做些简单的拦截操作 例如拦截 ...

  5. 40. Implement Queue by Two Stacks【medium】

    As the title described, you should only use two stacks to implement a queue's actions. The queue sho ...

  6. php 36进制与10进制转换

    php 36进制与10进制转换 /** * @desc im:十进制数转换成三十六机制数 * @param (int)$num 十进制数 * return 返回:三十六进制数 */ function ...

  7. 由于没有发现潜在的递归导致MySQL链接数溢出：MySQLNonTransientConnectionException: Data source rejected establishment of connection, message from server: "Too many connec

    DAOProxy的代码:下面代码中红色高亮的就是出问题的地方,DAOFactory中会构造一个PersonDAOProxy,调用listPersons或者addPerson显然会导致递归,从而导致My ...

  8. iOS swift 关于自定义表情键盘

    目录 输入框 键盘监听 键盘切换 表情装载 表情加载 表情输入 表情输出 表情显示 结束语 demo下载 demo图片: 输入框 为了让输入框能够随着用户输入内容变化自动变化高度,这里的输入框使用UI ...

  9. Excel函数sumproduct应用案例-多条件求和

    作者:iamlaosong 越来越认为sumproduct这个函数实用,过去用sum组函数.改起来复制起来都麻烦,sumif在条件多的时候也认为不方便. 如今改用sumproduct函数,就简单多了. ...

  10. linux设置时间的方法

    0. date -R  中国上海的时区是+8000 1.tzselect 设置时区,依次选择5,9,1,1(如果时区不一样,执行下面的命令得到之后时间是不一样的) 2.sudo ntpdate asi ...