Javascript图片库(1)

2023-11-06 17:21
文章标签 java script 图片库

本文主要是介绍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)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/358017

相关文章

JSON字符串转成java的Map对象详细步骤

《JSON字符串转成java的Map对象详细步骤》:本文主要介绍如何将JSON字符串转换为Java对象的步骤,包括定义Element类、使用Jackson库解析JSON和添加依赖,文中通过代码介绍... 目录步骤 1: 定义 Element 类步骤 2: 使用 Jackson 库解析 jsON步骤 3: 添

Java中注解与元数据示例详解

《Java中注解与元数据示例详解》Java注解和元数据是编程中重要的概念,用于描述程序元素的属性和用途,:本文主要介绍Java中注解与元数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参... 目录一、引言二、元数据的概念2.1 定义2.2 作用三、Java 注解的基础3.1 注解的定义3.2 内

Java中使用Java Mail实现邮件服务功能示例

《Java中使用JavaMail实现邮件服务功能示例》:本文主要介绍Java中使用JavaMail实现邮件服务功能的相关资料,文章还提供了一个发送邮件的示例代码,包括创建参数类、邮件类和执行结... 目录前言一、历史背景二编程、pom依赖三、API说明(一)Session (会话)(二)Message编程客

Java中List转Map的几种具体实现方式和特点

《Java中List转Map的几种具体实现方式和特点》:本文主要介绍几种常用的List转Map的方式,包括使用for循环遍历、Java8StreamAPI、ApacheCommonsCollect... 目录前言1、使用for循环遍历:2、Java8 Stream API:3、Apache Commons

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为

Java循环创建对象内存溢出的解决方法

《Java循环创建对象内存溢出的解决方法》在Java中,如果在循环中不当地创建大量对象而不及时释放内存,很容易导致内存溢出(OutOfMemoryError),所以本文给大家介绍了Java循环创建对象... 目录问题1. 解决方案2. 示例代码2.1 原始版本(可能导致内存溢出)2.2 修改后的版本问题在

Java CompletableFuture如何实现超时功能

《JavaCompletableFuture如何实现超时功能》:本文主要介绍实现超时功能的基本思路以及CompletableFuture(之后简称CF)是如何通过代码实现超时功能的,需要的... 目录基本思路CompletableFuture 的实现1. 基本实现流程2. 静态条件分析3. 内存泄露 bug

Java中Object类的常用方法小结

《Java中Object类的常用方法小结》JavaObject类是所有类的父类,位于java.lang包中,本文为大家整理了一些Object类的常用方法,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. public boolean equals(Object obj)2. public int ha

SpringBoot项目中Maven剔除无用Jar引用的最佳实践

《SpringBoot项目中Maven剔除无用Jar引用的最佳实践》在SpringBoot项目开发中,Maven是最常用的构建工具之一,通过Maven,我们可以轻松地管理项目所需的依赖,而,... 目录1、引言2、Maven 依赖管理的基础概念2.1 什么是 Maven 依赖2.2 Maven 的依赖传递机

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程(AOP)是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插