点击一个链接，在同一个页面显示图片（优美的代码）
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>显示图片</title>
<script language="javascript" src="scripts/showPic.js" type="text/javascript">
</script>
</head>
<body>
<ul id="imageGallery">
<li><a href="image/car1.jpg" title="第一张图片">第一张图片</a></li>
<li><a href="image/car2.jpg" title="第二张图片">第二张图片</a></li>
<li><a href="image/car3.jpg" title="第三张图片">第三张图片</a></li>
<li><a href="image/car4.jpg" title="第四张图片">第四张图片</a></li>
</ul><br/>
</body>
</html>
showPic.js
//显示图片
function showPic(image){
if(!document.getElementById("change")) return true;
var source=image.getAttribute("href");
var change=document.getElementById("change");
if(change.nodeName.toLowerCase()!="img") return true;
change.setAttribute("src",source);
if(!document.getElementsByName("title")) return true;
var text=image.getAttribute("title")?image.getAttribute("title"):"";
var description=document.getElementById("description");
if(description.firstChild.nodeType==3)
description.firstChild.nodeValue=text;
return false;
}
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imageGallery")) return false;
var gallery=document.getElementById("imageGallery");
var links=gallery.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
links[i].onclick=function(){
return showPic(this);
}
}
}
//生成"ing",''p"
function prepareChange(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imageGallery")) return false;
var change=document.createElement("img");
change.setAttribute("id","change");
change.setAttribute("src","image/car1.jpg");
change.setAttribute("alt","the first image");
var description=document.createElement("p");
description.setAttribute("id","description");
var descText=document.createTextNode("choose an image");
description.appendChild(descText);
var gallery=document.getElementById("imageGallery");
insertAfter(change,gallery);
insertAfter(description,change);
}
function insertAfter(newElement,targetElement){
var parentElement=targetElement.parentNode;
if(parentElement.lastChild==targetElement){
parentElement.appendChild(newElement);
}
else{
parentElement.insertBefore(newElement,targetElement.nextSibling);
}
}
function addLoadEvent(func){
var oldOnLoad=window.onload;
if(typeof window.onload!="function"){
window.onload=func;
}
else{
window.onload=function(){
oldOnLoad();
func();
}
}
}
addLoadEvent(prepareChange);
addLoadEvent(prepareGallery);
分享到：
相关推荐
标题“图片直接保存到数据库，并在JSP页面显示”涉及的知识点主要集中在Web开发领域，尤其是Java Web开发，包括图片处理、数据库存储以及前端展示。这里我们将深入探讨以下几个关键环节： 1. 图片数据的二进制化：...
在显示本地图片的例子中，我们可以使用`FileReader`接口的`readAsDataURL`方法将图片文件转换为Base64编码的字符串，然后将其设置为`<img>`标签的`src`属性来显示图片。 ```javascript var reader = new FileReader...
预加载是提高页面加载速度的一种技术，它在用户看到页面之前就开始加载图片。在DWZ中，这可能通过JavaScript实现，例如使用`$.imgLoad()`函数，确保图片在进入视口前已经加载完毕，避免用户在浏览过程中看到未加载的...
7. **图片显示**：在JSP页面上显示图片，可以通过HTML的`<img>`标签实现，其`src`属性指向图片的URL。如果图片存储在数据库内，可能需要通过Servlet或控制器动态生成数据流并返回给浏览器。 8. **安全考虑**：确保...
通过上述步骤，我们就能够实现一个简单的页面载入时随机显示图片的效果。此外，本文还提到了JavaScript在其他几个方面的应用，包括遍历算法、切换特效、查找算法、动画特效、调试技巧、数据结构以及数学运算等方面的...
图片存储数据库以及页面读取显示源码 图片存储:通过文件上传获取图片并转换成Byte[]字节数组,保存到数据库Image字段 数据库存储图片的读取和显示控制:从数据库中读取到字节流后把图片直接写入页面并对显示进行控制
"图片幻灯显示效果web页面源代码"是一个关于如何使用CSS和JavaScript实现这种效果的示例项目。接下来，我们将深入探讨这个主题，包括相关的核心技术、实现原理以及代码结构。 首先，CSS（层叠样式表）在这里主要...
显示图片" src="${ctx}/alaram/alaram!viewImages.action?alaramPic=" + pic + ""> ``` - `${ctx}`：通常表示应用上下文路径。 - `alaramPic=` + pic：将图片标识作为查询参数传递给服务端。 #### 七、总结 通过...
然后在Thymeleaf页面中，通过`<img>`标签引用这个路径来显示图片： ```html 上传的图片" /> ``` 5. **安全性考虑** 在实际应用中，要注意安全性问题，如文件名的安全性（防止路径遍历攻击），以及文件类型的...
上传图片时，选择图片之后显示在页面上，现成的代码，直接使用即可
总结来说，JSP中使用绝对路径显示图片是一种常见的实践，它确保了无论页面在哪一级目录，图片都能正确加载。但是，合理地组织项目结构，配合服务器配置和优化技术，才能使网站的性能和可维护性达到最佳状态。
在“struts1上传图片，保存数据库，再显示jsp页面”这个场景中，我们将探讨如何利用Struts1实现文件上传，将图片数据保存到数据库，并在JSP页面上展示。 1. **Struts1的文件上传组件**： Struts1并不直接支持文件...
**实时显示** 是通过Ajax的异步特性实现的，服务器处理图片上传后，返回一个确认消息，JavaScript接收到消息后更新页面，显示上传成功的提示或新图片。 **图片大小设置** 可能涉及到两部分：前端预览和后端处理。...
这个项目“页面实现多个图片轮播功能demo”将为你提供一个实践平台，让你更好地理解和掌握原生JavaScript在实际项目中的应用。记得在实际开发中，根据需求进行适当的调整和优化，以提高用户体验。
本示例"多图片上传和图片在页面直接显示demo"提供了一个实现这一功能的基础模板，支持多图和单图上传，并且包含了删除图片的功能。下面将详细讲解这一功能的实现原理和关键知识点。 首先，我们需要理解上传过程。...
用户上传图片后，可以在一个隐藏的IFrame中执行文件上传操作，完成后将返回的图片URL插入到主页面的图片标签`<img>`中，达到即时显示的效果。 3. **文件存储与访问路径**：上传的图片需要有一个固定的访问路径，这...
本教程将深入探讨如何实现一个功能完善的图片上传系统，它允许用户上传多张图片并在页面上显示，同时提供删除和指定上传的功能。这一功能对于提高用户体验至关重要，因为它让用户能够方便地管理他们上传的内容。 ...
在代码中，`response`对象的`setContentTypeIfNotSet("image/*")`方法设置响应的内容类型为图片类型，确保浏览器正确解析并显示图片。随后，通过`OutputStream`的`write()`方法将图片数据发送给客户端，完成图片的...
"美女图片闪烁页面显示"这个主题就是关于如何利用JavaScript脚本来实现一种图片的动态展示效果，即让图片在页面上产生闪烁的效果。JavaScript是一种轻量级的编程语言，广泛应用于网页交互和动态效果的实现。 首先，...
前端HTML页面中，我们可以用一个`<img>`标签来显示图片，通过设置`src`属性指向我们的`ShowImageServlet`，并传入图片ID作为参数： ```html <img src="ShowImageServlet?id=1" alt="Image from DB"> ``` 至此，...