【前端积累】点击链接切换图片显示

 1 <!DOCTYPE html>
 2 <html><!--树根-->
 3
 4     <head>
 5         <meta charset="utf-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7         <title>Image Gallery</title>
 8         <meta name="description" content="An interactive getting started guide for Brackets.">
 9         <script type="text/javascript" src="showpic.js"></script>
10     </head>
11     <body>
12      <h1>Snapshots</h1>
13         <ul>
14             <li>
15            <a href="image/fudan.jpg" title="fudan university" onclick="showPic(this); return false;">fudan</a>
16            </li>
17             <li>
18             <a href="image/sunflower.jpg" title="sunflower" onclick="showPic(this);return false;">sunflower</a>
19             </li>
20             <li> <a href="image/waitan.jpg" title="waitan" onclick="showPic(this);return false;">waitan</a>
21             </li>
22             <li>
23             <a href="image/lijiang.jpg" title="lijiang" onclick="showPic(this);return false;">lijiang</a>
24             </li>
25         </ul>
26        <img id="placeholder" src="image/jiuzhaigou.jpeg" alt="my image gallery"/>
27
28     </body>
29 </html>

1 function showPic(whichpic) {
2     var source = whichpic.getAttribute("href");
3     var placeholder = document.getElementById("placeholder");
4     placeholder.setAttribute("src", source);
5 }

时间： 2024-10-09 17:35:10

【前端积累】点击链接切换图片显示的相关文章

Javascript 设置cookie 后台php获得cookie 并读出在前端所点击过的图片

最近需要些一个小Demo,前端页面通过javascript设置cookie ,后台页面通过cookie读取cookie 并在另一张页面上输出在前端点击过的图片. 具体实现方法: ody> <div style="text-align:center"> <h2 id="h2">图片信息</h2> <div id="showPic"> </div>

JQuery移动动画实现点击按钮切换图片--JQuery基础

直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

图片自动轮播及点击图标切换图片

本案例两个功能: 第一,默认是自动图片轮播; 第二,hover到图片下面的不同数字,切换到数字对应的图片, 鼠标移出数字,动画从当前位置开始继续循环播放 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #d{position: relative;top: -

html页面，左边点击链接，右边显示内容参考代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled

原生js解决图片点击左右切换（简单轮播图）

想写一个综合性的小案例,主要会运用到数组和判断以及我前面几篇博客所复习到的js的知识.今天案例想要实现的效果图如下图所示: 效果是:点击"循环切换"按钮,那么"一号"位置的文案就要写入"图片可以循环",而下面的左右箭头在点击过程中可以循环点击,并且"二号"和"三号"要响应切换到相对应的数字和文字内容:否则,点击"顺序切换"按钮,那么"一号"位置的文案就要写入"

CSS实现的鼠标经过链接切换背景图片实例代码:很多导航栏都有这样的效果,当鼠标滑过的时候能够实现背景图片的切换,算是一个比较好的效果吧,也算是对导航栏最基本的美化了.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="

点击跳转到系统图库，然后将选择回来的图片显示到应用上

有时候需要跳转到系统图库选图,那么用以下代码实现 /**点击跳转到系统图库,然后将选择回来的图片显示到应用上*/ public class MainActivity extends Activity { private ImageView iv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.act

一天JavaScript示例-点击图片显示大图片添加鼠标

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-点击图片显示大图加入鼠标操作</title> <style> img{padding:5px;width:100px;height:aut

每天一个JavaScript实例-点击图片显示大图添加鼠标操作

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-点击图片显示大图添加鼠标操作</title> <style> img{padding:5px;width:100px;height:aut