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"></ ...
随机推荐
- S2S:分享出的营销机遇
(速途网专栏 作者:高学争)经常在网上购物的你,有没有遇到过这样的问题:你知道自己想买什么,但是在淘宝上一搜,出来了数以万计的同类型,他们有着同样的价位(甚至可能是同样的图片),但是由不同的商家提供, ...
- C#设置窗体最大化且不遮挡任务栏的方法
C#设置窗体最大化示例: 也可将方法内的内容放到主窗体首次加载load方法中. /// <summary> /// 设置窗体最大化(不遮挡任务栏)但此方法在宽屏中不能显示全屏/// < ...
- Code 49 码
Code 49码是一种多层.连续型.可变长度的条码符号,它可以表示全部的128个ASCII字符.每个Code 49条码符号由2到8层组成,每层有18个条和17个空.层与层之间由一个层分隔条分开.每层包 ...
- mysql merge table
SELECT COUNT(*) FROM `comment` SHOW CREATE TABLE `comment` CREATE TABLE `comment1` ( `id` INT(8) NOT ...
- Swap file ".Podfile.swp" already exists!
解决Swap file ".ceshi.c.swp" already exists!问题 关于swp文件:使用vi,经常可以看到swp这个文件,那这个文件是怎么产生的呢,当你打开一 ...
- STL之顺序容器
顺序容器: vector:数组 list:链表 deque:双端数组 顺序容器适配器: stack:堆栈 queue:队列 priority_queue:优先级队列 deque是一个动态数组 dequ ...
- dhtmlx之dhtmlXGrid显示数据
引用 <link href="../../dhtmlXGridScripts/dhtmlxgrid.css" rel="stylesheet" type= ...
- iOS MBProgressHUD 之带底板的加载提示
文章来自:http://blog.csdn.net/ryantang03/article/details/7877120 MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单 ...
- 自定义ActionBar背景(分别针对3.0以下和3.0以上的版本)
官方原文:http://developer.android.com/training/basics/actionbar/styling.html 针对3.0以上的版本: <?xml versio ...
- Keil4 每次选build 编译(F7)都全部编译的解决办法
Keil4 每次选build 编译(F7)都全部编译的解决办法 http://blog.csdn.net/wchengshen/article/details/50440079 Keil4 每次选bu ...