js实现在同一窗口浏览图片

 在同一窗口浏览图片的方法有很多，本例要为大家介绍的是使用js获取img的src属性后进行替换，有此需要的朋友可以参考下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<style> 
   
h1{position:absolute;margin-left:150px;} 
ul{position:absolute;margin-top:50px;margin-left:80px;} 
li{float:left;list-style:none;padding:1em;} 
img{position:absolute;margin-top:100px;margin-left:100px;width:1000px;height:600px;} 
p{position:absolute;margin-top:800px;margin-left:550px;} 
</style> 
   
<script> 
function showCat(a){ 
  var osrc=a.getAttribute("href"); 
  var oimg=document.getElementById("img1"); 
  oimg.setAttribute("src",osrc); 
   
  var op=document.getElementById("p1"); 
  var otxt=a.getAttribute("title"); 
  op.childNodes[0].nodeValue=otxt;; 
} 
</script> 
</head> 
<body> 
<h1>Cat Home</h1> 
<ul> 
  <li> 
    <a href="img/1.jpg" title="我是白猫咪" onclick="showCat(this);return false;">白猫咪</a> 
  </li> 
  <li> 
    <a href="img/2.jpg" title="我是黑猫咪" onclick="showCat(this);return false;">黑猫咪</a> 
  </li> 
  <li> 
    <a href="img/3.jpg" title="我是花猫咪" onclick="showCat(this);return false;">花猫咪</a> 
  </li> 
</ul> 
   
<img id="img1" src="img/4.jpg" alt="猫咪"/> 
<p id="p1">choose Cat Photo</p> 
   
</body> 
</html>
时间： 2024-10-28 08:28:35

js实现在同一窗口浏览图片的相关文章

js实现在同一窗口浏览图片_javascript技巧

在同一窗口浏览图片的方法有很多,本例要为大家介绍的是使用js获取img的src属性后进行替换,有此需要的朋友可以参考下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&q

Win7画图程序巧应用 浏览图片多用途

浏览图片,我们可能更多的使用Windows默认的浏览方式,或者是第三方的比如Google Picasa,或者美图看看等这样的软件实现图片的浏览播放.但除了这些,是否有朋友会记得Win7画图程序呢?她不仅仅是一个只能画图的工具,当然也可以浏览图片,甚至也能实现一些意想不到的效果,所以接下来我们就来看看Win7的画图程序在图片浏览方面还能怎么做? 很多人甚至已经遗忘了Win7画图程序在哪里,不妨再多啰嗦几句.相比于XP等老系统,Win7的画图工具还是改进了不少,比如类菜单似于Office 的Ribb

ckedit 浏览图片和上传图片

<head>标签内引入 <script src="${ctx}/ckeditor/ckeditor.js" type="text/javascript"></script> config.js配置文件 CKEDITOR.editorConfig = function( config ) {  // Define changes to default configuration here. For example:  config.

JS简单实现浮动窗口效果示例_javascript技巧

本文实例讲述了JS简单实现浮动窗口效果.分享给大家供大家参考,具体如下: 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"> &l

指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）_javascript技巧

复制代码 代码如下: <div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div><script type="text/javascript" >//缩放图片到合适大小function ResizeImages(){  

求教：MVC中引用js动态创建页面无法获取图片。

问题描述 MVC项目中使用了一个第三方UI组件,在视图中引用该UI的js文件,调用js动态创建页面,其中引用的图片资源无法显示.但是在html文件中使用该js文件,可以正常显示.用firebug调试,发现MVC中的图片路径和html的图片src路径是一样的,但是MVC中的提示"载入指定url失败".由于是第三方UI,无法修改JS文件内容.不知是否可以通过设置MVC的参数实现?小弟刚刚接触MVC不久,求各位大神指点! 解决方案 解决方案二:在你的浏览器中看下图片的url对不对解决方案三:

JS实现的仿QQ空间图片弹出效果代码_javascript技巧

本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: <script type="text/javascript"> function imageShow(which_click) { var image_path = which_click; //alert(image_path); var tag_top = Math.max(document.documentElement.scrollTop, document.body.scroll

现在要交一份有窗口的图片压缩程序求给个MFC范例学习 本人跨专业好多内容看不懂

问题描述 现在要交一份有窗口的图片压缩程序求给个MFC范例学习 本人跨专业好多内容看不懂 求大神给个模板参考学习一下,主要现在真的没什么思路,而且这个算法涵盖的东西比较多希望能有人给份模板让我好好研究一下还有2个星期就要交了 求帮忙 解决方案 建议你找一个懂的人手把手教你.否则很难想象你又要一个涉及算法.界面的复杂程序,你又看不懂,又没有多少时间你能学会. 程序:http://download.csdn.net/download/kanhai2008/928687 解决方案二: 这个有点困难,,

js正则匹配出所有图片及图片地址src的方法

  本文实例讲述了js正则匹配出所有图片及图片地址src的方法.分享给大家供大家参考.具体分析如下: 有很多时候我们需要用到文章里面的图片,而且主要是用到它的图片地址,这个时候我们需要通过正则匹配出图片标签,然后做到我们需要的数据 平时也没怎么用正则,一不学就忘,最近项目需要,然后又去goole了,好乱!一搜一大堆,也不是我想要的,最后把自己留一个已被后用: 实现:通过js正则匹配出所有图片及所有图片地址src. 思路:1.匹配出图片img标签(即匹配出所有图片),过滤其他不需要的字符 从匹配出