原理:

操作流程:

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

效果:

主页面代码:

<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. S2S:分享出的营销机遇

    (速途网专栏 作者:高学争)经常在网上购物的你,有没有遇到过这样的问题:你知道自己想买什么,但是在淘宝上一搜,出来了数以万计的同类型,他们有着同样的价位(甚至可能是同样的图片),但是由不同的商家提供, ...

  2. C#设置窗体最大化且不遮挡任务栏的方法

    C#设置窗体最大化示例: 也可将方法内的内容放到主窗体首次加载load方法中. /// <summary> /// 设置窗体最大化(不遮挡任务栏)但此方法在宽屏中不能显示全屏/// < ...

  3. Code 49 码

    Code 49码是一种多层.连续型.可变长度的条码符号,它可以表示全部的128个ASCII字符.每个Code 49条码符号由2到8层组成,每层有18个条和17个空.层与层之间由一个层分隔条分开.每层包 ...

  4. mysql merge table

    SELECT COUNT(*) FROM `comment` SHOW CREATE TABLE `comment` CREATE TABLE `comment1` ( `id` INT(8) NOT ...

  5. Swap file ".Podfile.swp" already exists!

    解决Swap file ".ceshi.c.swp" already exists!问题 关于swp文件:使用vi,经常可以看到swp这个文件,那这个文件是怎么产生的呢,当你打开一 ...

  6. STL之顺序容器

    顺序容器: vector:数组 list:链表 deque:双端数组 顺序容器适配器: stack:堆栈 queue:队列 priority_queue:优先级队列 deque是一个动态数组 dequ ...

  7. dhtmlx之dhtmlXGrid显示数据

    引用 <link href="../../dhtmlXGridScripts/dhtmlxgrid.css" rel="stylesheet" type= ...

  8. iOS MBProgressHUD 之带底板的加载提示

    文章来自:http://blog.csdn.net/ryantang03/article/details/7877120 MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单 ...

  9. 自定义ActionBar背景(分别针对3.0以下和3.0以上的版本)

    官方原文:http://developer.android.com/training/basics/actionbar/styling.html 针对3.0以上的版本: <?xml versio ...

  10. Keil4 每次选build 编译(F7)都全部编译的解决办法

    Keil4 每次选build 编译(F7)都全部编译的解决办法 http://blog.csdn.net/wchengshen/article/details/50440079 Keil4 每次选bu ...