PHP - 点击更换头像
原理:
操作流程:
首先点击头像图片,弹出选择窗口,选中其中一个则窗口推出头像更换。
效果:
主页面代码:
<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 - 点击更换头像的更多相关文章
- Android ImageView 点击更换头像
首先搭建布局 主界面布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- [Win 8/WP 8]简单实现弹出页更换头像的功能
在Win 8应用里,对弹出页(Popup)的灵活操作必不可少,下面我们就来简单实现一个. 一.先让Popup弹出到指定位置 先来看看效果图,如图[1]: 下面是前端代码,代码段[1]: <Gri ...
- H5调用相机和相册更换头像
需求:H5调用手机的相机和相册从而实现更换头像的功能 这个功能是很常用的一个功能,因此做一个记录. 1.在头像img下加一个文件输入框 <input type="file" ...
- 渲染更换头像 文件转成url地址
需求:在一个后台页面中,插入iform页面,需求为更换头像(layui框架) 一.前提:创建user_buddha.html 页面 在侧边栏对应的 a 标签设置 ...
- 5分钟实现Android中更换头像功能
写在前面:更换头像这个功能在用户界面几乎是100%出现的.通过拍摄照片或者调用图库中的图片,并且进行剪裁,来进行头像的设置.功能相关截图如下: 下面我们直接看看完整代码吧: 1 2 3 4 5 6 7 ...
- thinkphp验证码点击更换js实现
<img src="__CONTROLLER__/verify" alt="" onclick=this.src="__CONTROLLER__ ...
- 一百一十五:CMS系统之实现点击更换图形验证码功能
把验证码渲染到到页面上 访问,显然,是标签有个内边距 去掉内边距 加一个class 如果放大看的话,还有问题 用js实现点击更换图形验证码:生成查询字符串的形式访问图形验证码接口的url,放到img标 ...
- uni-app 顶部导航点击更换图标
更换顶部导航的iconfont.ttf图标,先在配置文件配置好按钮: pages.json文件 "buttons": [ { "text": "\ue ...
- java:javaScript(定义方式,循环语句,函数与参数,事件机制,控制台记录,event事件获取键盘ascii,confirm和prompt,事件和内置对象,获取input,点击更换背景色)
1. 定义JS的两种方式: <!DOCTYPE> <html> <head> <meta charset="UTF-8"></ ...
随机推荐
- Javah生成JNI头文件
首先确保java的环境变量配置好了. 1:打开cmd 进入doc命令窗口: 进入class所在目录,我的class是在F:\summerVacation\ndkhelloworld\bin\class ...
- HAMA
http://hama.apache.org/run_examples.html http://www.binospace.com/ http://57832638.iteye.com/blog/20 ...
- Qt plugin系统的几点说明
对于一个大型软件系统来说,实现plugin是一件很美妙的事情,一个成功的plugin系统可以使软件增色不少.Plugin最大的功能是在一定程度内提高了软件的灵活度和可扩展性.一个设计精良的server ...
- jsp中forward和redirect的区别(转)
一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下: request.getRequestDispatcher("new.jsp").forward(reques ...
- linux配置nfs服务
简单介绍: unix/linux系统一种远程文件文件夹共享的服务,能够把某一个远程的文件文件夹共享到本地,进而像操作本地文件一样,操作这个远程的文件夹. 比如:a主机作为服务端,共享出来test1这个 ...
- HDU 4642 (13.08.25)
Fliping game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
- windows desktop.ini
win7桌面上的两个desktop.ini文件千万不要删除,win7系统里的desktop.ini文件是有用的. 详解 Desktop.ini 配置设置文件1 http://blog.sina.com ...
- Android string.xml error: Apostrophe not preceded by \
Android string.xml error: Apostrophe not preceded by \ 遇到了这个错误,编译无法通过 error: Apostrophe not preceded ...
- ASP.NET MVC 5 学习教程:添加查询
原文 ASP.NET MVC 5 学习教程:添加查询 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 通过控 ...
- 基于visual Studio2013解决算法导论之015第二小元素
题目 查找第二小元素 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> ...