原理:

操作流程:

首先点击头像图片,弹出选择窗口,选中其中一个则窗口推出头像更换。

效果:

主页面代码:

<tr>
<td>头像:</td> <td><input type="hidden" name="face" value=""/>
<img src="./face/m01.gif" alt="头像" class="face" id='faceimg' onclick="javascript:window.open('face.php','face','width=420,height=600,top=0,left=0,scrollbars=1');"/></td>
</tr>

子页面代码(弹出窗体页面):

http://www.cnblogs.com/KTblog/p/4958731.html

    <!-- 使用遍历文件夹函数,获取头像 -->
<?php $facearray = _myreaddir(dirname(__FILE__)."/face"); ?>
    <div id="face">
<h3>请选择头像:</h3> <?php foreach ($facearray as $num){
echo "<img src='face/".$num."' alt='face/".$num."' title='".$num."'/>";
}?> </div>

使用的JS代码:
引用:

    <!-- 点击更换头像 -->
<script type="text/javascript" src="./js/face.js"></script>

代码:

window.onload =  function() {
//获取face.php页面中的头像对象
var img = document.getElementsByTagName('img');
//进行循环
for(i=;i<img.length;i++){
//对选择的对象触发点击事件
img[i].onclick = function (){
//调用 _opener()函数
_opener(this.alt);
};
}
} //显示头像函数
function _opener(src){
//获取父页面头像对象
var faceimg = opener.document.getElementById('faceimg');
//将头像的img更换
faceimg.src = src;
//将父页面中的register表单中的name为face的值更改为src。
opener.document.register.face.value = src;
}

PHP - 点击更换头像的更多相关文章

  1. Android ImageView 点击更换头像

    首先搭建布局 主界面布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  2. [Win 8/WP 8]简单实现弹出页更换头像的功能

    在Win 8应用里,对弹出页(Popup)的灵活操作必不可少,下面我们就来简单实现一个. 一.先让Popup弹出到指定位置 先来看看效果图,如图[1]: 下面是前端代码,代码段[1]: <Gri ...

  3. H5调用相机和相册更换头像

    需求:H5调用手机的相机和相册从而实现更换头像的功能 这个功能是很常用的一个功能,因此做一个记录. 1.在头像img下加一个文件输入框 <input type="file" ...

  4. 渲染更换头像 文件转成url地址

                        需求:在一个后台页面中,插入iform页面,需求为更换头像(layui框架) 一.前提:创建user_buddha.html 页面 在侧边栏对应的 a 标签设置 ...

  5. 5分钟实现Android中更换头像功能

    写在前面:更换头像这个功能在用户界面几乎是100%出现的.通过拍摄照片或者调用图库中的图片,并且进行剪裁,来进行头像的设置.功能相关截图如下: 下面我们直接看看完整代码吧: 1 2 3 4 5 6 7 ...

  6. thinkphp验证码点击更换js实现

    <img src="__CONTROLLER__/verify" alt="" onclick=this.src="__CONTROLLER__ ...

  7. 一百一十五:CMS系统之实现点击更换图形验证码功能

    把验证码渲染到到页面上 访问,显然,是标签有个内边距 去掉内边距 加一个class 如果放大看的话,还有问题 用js实现点击更换图形验证码:生成查询字符串的形式访问图形验证码接口的url,放到img标 ...

  8. uni-app 顶部导航点击更换图标

    更换顶部导航的iconfont.ttf图标,先在配置文件配置好按钮: pages.json文件 "buttons": [ { "text": "\ue ...

  9. java:javaScript(定义方式,循环语句,函数与参数,事件机制,控制台记录,event事件获取键盘ascii,confirm和prompt,事件和内置对象,获取input,点击更换背景色)

    1. 定义JS的两种方式: <!DOCTYPE> <html> <head> <meta charset="UTF-8"></ ...

随机推荐

  1. HTML5 音频视频

    HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...

  2. poj 2309

    http://poj.org/problem?id=2309//找规律 可以看到每个根节点都可以将其在同一层的最左边的根节点整除,并且最大值为该节点加上最左边的节点值-1,最小值为////为该节点减去 ...

  3. AnsiString 在 Delphi 中虽然不可用,但是,在 C++ 中可以用

    [C++] C++ Builder 中 Ansi 编码的字符串在Android/iOS程序中显示的问题 呃,这个问题说起来,其实也不麻烦,C++ Builder 本身在 TEncoding 做了处理, ...

  4. spring mvc实现ajax 分页

    使用到的技术: ·spring 3 mvc ·json ·jquery ·java ·mysql 首先,要了解如何在spring mvc中使用json. 以下主要从Dao和View及Controlle ...

  5. 1104--DNA排序

    问题描述: 逆序数可以用来描述一个序列混乱程度的量.例如,“DAABEC”的逆序数为5,其中D大于它右边的4个数·,E大于它右边的1的个数,4+1=5,又如,“ZWQM”的逆序数为3+2+1+0=6. ...

  6. redis缓存工具Jedis进行跨jvm加锁(分布式应用)--不幸暂弃用--能够做第三方锁使用

    近期使用redis碰到了多个并发处理同一个缓存的情况.在这样的情况下须要进行加锁机制. 本来想使用java自带的ReadWriteLock进行设置读写锁,这也是上家公司使用的方法. 后来经过商讨,给予 ...

  7. Js中的多条件排序,多列排序

    參见github: https://github.com/Teun/thenBy.js

  8. C++_01_入门

    一.类的定义 Person.h类声明 Person.cpp类实现 main.cpp主函数 二.命名空间的使用 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv ...

  9. 一个人的旅行(Dijkstra算法)

    这道题可用Dijkstra算法,好像还有floyd等算法,慢慢研究 Description 虽然草儿是个路痴(就是在杭电待了一年多,居然还会在校园里迷路的人,汗~),但是草儿仍然很喜欢旅行,因为在旅途 ...

  10. filter过滤器的使用

    从J2EE1.3开始,Servlet2.3规范中加入了对过滤器的支持.过滤器能够对目标资源的请求和响应进行截取.过滤器的工作方式分为四种,下面让我们分别来看看这四种过滤器的工作方式: 1.reques ...