JS点击图片改变图片图径并用正则表达式取图片名的代码

-------------JS-----------------


代码如下:

<script language="javascript" type="text/javascript">
// <!CDATA[

function img1_onclick(id) {
var imgName=document.getElementById(id).src.replace(/.*\/([^\/]+)\..+/,'$1');

if(imgName=="True")
{
document.getElementById(id).src="Images/False.jpg";
}else
{
document.getElementById(id).src="Images/True.jpg";
}
}

// ]]>
</script>

----------Form------------------------


代码如下:

<img id="img1" src="Images/False.jpg" runat="server" onclick="return img1_onclick('img1')" />s

-----------正则表达式s----------------------------


代码如下:

replace(/.*\/([^\/]+)\..+/,'$1')取得图片名

赞 (0)

相关推荐

  • js点击更换背景颜色或图片的实例代码

    1,按钮样式 复制代码 代码如下: <script>org_Color=document.bgColor.substring(1.10)</script><form><input type="button" value="淡黄色背景"onClick="document.bgColor='#feffc6'"><input type="button" value="浅

  • jsp中点击图片弹出文件上传界面及预览功能的实现

    花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:

  • JS实现点击图片在当前页面放大并可关闭的漂亮效果

    Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器. 点击这里查看实例演示 如何使用: 步骤 1 - 安装 1.Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header. <script type="text/javascript" src="js/prototype.js">

  • js实现点击后将文字或图片复制到剪贴板的方法

    本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法,代码非常简洁实用,具体功能代码如下所示: 实现复制文字代码: <table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"> <tr> <th width="100%" style="color

  • 基于JavaScript实现图片点击弹出窗口而不是保存

    一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的php来做的,插件的使用和安装极其繁琐,于是上网查了些demo,自己实现了一个纯js的图片弹出插件. 实现的思路是通过编写hook图片的onclick事件的函数,在函数中对body追加div元素,再将传入的图片对象放入元素中,同时再监听div的onclilck事件,当捕捉到点击,再关闭(其实是隐藏)弹出的div. 通过在函数初始化的时候收集页面所有的img元素,再为每个img元素增加onclick="picHook(this)"

  • 简单的实现点击箭头图片切换的js代码

    简单的实现点击箭头图片切换的js代码

    步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("I

  • javascript 不间断的图片滚动并可点击

    css: 复制代码 代码如下: <style type="text/css"> .rollBox { width: 704px; overflow: hidden; padding: 12px 0 5px 6px; } .rollBox .LeftBotton { height: 52px; width: 19px; background: url(jt.gif) no-repeat 11px 0; overflow: hidden; float: left; displa

  • 用javascript实现点击链接弹出"图片另存为"而不是直接打开

    <iframe height="0" width="0" src="/images/logo.gif" name="saveImage" id="saveImage"></iframe> <a href="###" onclick="saveImage.document.execCommand('saveAs');">Click M

  • JS点击图片改变图片图径并用正则表达式取图片名的代码

    -------------JS----------------- 复制代码 代码如下: <script language="javascript" type="text/javascript"> // <!CDATA[ function img1_onclick(id) { var imgName=document.getElementById(id).src.replace(/.*\/([^\/]+)\..+/,'$1'); if(imgName

  • vue+js点击箭头实现图片切换

    vue+js点击箭头实现图片切换

    本文实例为大家分享了vue+js点击箭头实现图片切换的具体代码,供大家参考,具体内容如下 前端需求是 返回的图片数据能够点击箭头切换 代码如下 <div class="pubuItemsBox"> <!-- 修改部分5.23晚 --> <template v-for="(orderEvent, index) in orderEventList" > <div :class="{'pubuItem':true, 'n

  • js实现点击图片改变页面背景图的方法

    本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0"> <script language=&qu

  • JS点击图片弹出文件选择框并覆盖原图功能的实现代码

    简单说下原理,把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能. js代码: <script type="text/javascript" src=

  • 利用JS实现点击按钮后图片自动切换的简单方法

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)<选择>left center right 2.实现上述布局 swap.html <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html

  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

  • JS点击链接后慢慢展开隐藏着图片的方法

    本文实例讲述了JS点击链接后慢慢展开隐藏着图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>JS点击链接后,慢慢展开隐藏着的图片</title> <body> <script language="JavaScript"> var b=0; var c=true; function fade(){ if(document.all); if(c == true){b+=3} i

  • js实现点击图片将图片地址复制到粘贴板的方法

    本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!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

  • JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

    本文实例讲述了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/1

  • JS点击缩略图整屏居中放大图片效果

    JS点击缩略图整屏居中放大图片效果

    需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大的图片进行居中显示和点击别的地方隐藏已显示的大图的时候,才发现实现起来有难度. 1 第一张点击图片将图片放大 下面将这种方式也贴出来,供自己参考(万一有需要的小伙伴正好需要这样的功能呢): <div> <img class="dialog" src="xxx.j

随机推荐