js小实例(点击链接改变图片)_在js的dom中,当a标签中的href里是图片是,怎么改图片大小-CSDN博客

这是一个使用JavaScript编写的简单图片画廊，通过点击链接实现图片的动态更换。点击不同的链接，图片的源地址会根据链接的`href`属性改变，同时图片下方的描述也会更新为链接的`title`属性值。通过`showPic`函数处理点击事件，阻止了默认的页面跳转行为，实现了平滑的用户体验。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=gbk" />
  <title>Image Gallery</title>
    <script type="text/javascript" >
    function showPic(whichpic) {
      var source = whichpic.getAttribute("href"); //获取当前点击的元素的属性href的值
      var placeholder = document.getElementById("placeholder"); //获取目标
      placeholder.setAttribute("src",source);
      /*
      设置目标的属性src。从而达到改变图片。
      setAttribute完成了2部操作：即先创建属性，然后赋值。如果属性存在，则覆盖属性的值。
      当然我们可以用 placeholder.src = source;
      不过，还是建议大家使用setAttribute(),它是1级dom，
      他可以对文档中的任何一个元素的任何一个属性做出修改。
      另外他的移植性更好。
      */
      var text = whichpic.getAttribute("title");
      //获取当前点击的元素的属性title的值
      var description = document.getElementById("description");//获取目标
      description.firstChild.nodeValue = text;
      /*
       或者使用
       description.childNodes[0].nodeValue = text;
      */
    }
    </script>
</head>
<body>
  <h1>javascript 图片馆</h1>
  <!--
在a标签上加事件我们要注意，避免要他跳转。
解决方法：函数返回false； 事件认为链接没有被点击。
当然这种情况是在href的值有用的情况下。
如果href的值是javascript:void(0);也可以不跳转。
  -->
  <ul>
    <li>
      <a href="images/1.gif" title="test1" onclick="showPic(this); return false;">test1</a>
    </li>
    <li>
      <a href="images/2.gif" title="test2" onclick="showPic(this); return false;">test2</a>
    </li>
    <li>
      <a href="images/3.gif" title="test3" onclick="showPic(this); return false;">test3</a>
    </li>
    <li>
      <a href="images/4.gif" title="test4" onclick="showPic(this); return false;">test4</a>
    </li>
    <li><a href="javascript:void(0);" title="test5">test5</a>
    </li>
  </ul>
  <img id="placeholder" src="images/img.gif" alt="my image gallery" />
  <p id="description">选择图片.</p>
</body>
</html>