現在演示：http://www.iyumen.cn/TopUser.asp
效果說明：鼠標放到頭像上，頭像自動變換成另一張圖片。因為我網站里有兩種格式圖片 gif和jpg的，所以，現在如果原圖是jpg的話，就沒問題，如果是gif的話有提示說沒有上傳頭像，其實是有的，只是js里沒有設置讀取到 gif.
所以，我想要的功能就是 鼠標放到圖片上，不需要變換另一張圖片，這個能辦到嗎？
該頁面涉及到的源碼，我弄成壓縮包了，方便高人下載修改。可能我描述的不是很清楚。
实现代码如下：
function oo(obj){
return typeof(obj)=="string"?document.getElementById(obj):obj
}
var eet,eel,bid,dh;
var state=0;
var showi=0;
function asdf_list(sign,id,user){
var xid=id.substr(0,id.length-5)
bid=id;
e=oo(bid)
// alert(name)
var et=e.offsetTop;
var el=e.offsetLeft;
while(e=e.offsetParent){
et+=e.offsetTop;
el+=e.offsetLeft;
}
eet=et;
eel=el;
if(sign==1){
if(showi==0){
if(el<780){
//alert("<780")
oo("navigation_logo").style.right="";
oo("navigation_logo").style.left=(el+119) + "px";
oo("navigation_logo").style.top=(et-3) + "px";
var imgtanchuhtml2="<table width=100% border=0 cellspacing=0 cellpadding=0><tr><td valign=bottom id=tdimg style=padding-top:3px;padding-left:3px; >"
imgtanchuhtml2 +="<dl class=member-detail><dt><a class=user-icon href=#x><div style=float:left;padding-right:1px; id=showlogoimg ></div></a><div id=arrow_img onmouseover=showarrow('1'); onmouseout=showarrow('2'); onClick=disnav(); style=float:left;></div></dt></dl></td></tr></table>"
oo("imgtanchu").innerHTML=imgtanchuhtml2;
oo("ll").src="http://www.iyumen.cn/images/imgs/avatar_border.gif"
oo("lr").src="http://www.iyumen.cn/images/imgs/avatar_border2.gif"
oo("showlogoimg").innerHTML="<img onError=this.src='http://www.iyumen.cn/images/img/logo_s.png' width=100 height=100 src=/UploadFile/" + xid + "/userphoto.jpg alt=" + user + " onClick=disnav();>" + user ;
oo("link_1").innerHTML="<a href=/My_" + xid + ".html target=_blank>去" + user + "的个人主页</a>";
if(loginstate==0){
oo("link_3").innerHTML="<a href=/Sbox.asp?User_ID=" + xid + " target=_blank>给" + user + "发短消息</a>";
}else{
oo("link_3").innerHTML="<a href=javascript:show_login2();>给" + user + "发短消息</a>";
}
oo("link_4").innerHTML="<a href=/List_" + xid + ".html target=_blank>查看" + user + "的评论列表</a>";
oo("oDiv").style.top=(et-3) + "px";
oo("oDiv").style.left=(el-3) + "px";
oo("oDiv").style.display='';
}else{
// alert(">780")
hw = oo("home").scrollWidth - el;
oo("navigation_logo").style.left="";
oo("navigation_logo").style.right=(parseInt(hw)+parseInt(10)) + "px";
oo("navigation_logo").style.top=(et-3) + "px";
oo("navigation_logo").style.left;
var imgtanchuhtml="<table width=100% border=0 cellspacing=0 cellpadding=0><tr><td valign=bottom id=tdimg style=padding-top:3px; ><dl class=member-detail>"
imgtanchuhtml +="<dt><div id=arrow_img onclick=disnav2(); style=float:left;></div><a class=user-icon href=#x><div style=float:left;padding-right:2px; id=showlogoimg ></div></a></dt></dl></td></tr></table>"
oo("imgtanchu").innerHTML=imgtanchuhtml;
oo("arrow_img").style.background="url(http://www.iyumen.cn/images/imgs/avatar_left.gif) top repeat-x; #ff0000;"
oo("ll").src="http://www.iyumen.cn/images/imgs/avatar_border2.gif"
oo("lr").src="http://www.iyumen.cn/images/imgs/avatar_border.gif"
oo("showlogoimg").innerHTML="<img onError=this.src='http://www.iyumen.cn/images/img/logo_s.png' width=100 height=100 src=/UploadFile/" + xid + "/userphoto.gif alt=" + user + " onClick=disnav2();>" + user ;
oo("link_1").innerHTML="<a href=/My_" + xid + ".html target=_blank>去" + user + "的主页</a>";
if(loginstate==0){
oo("link_3").innerHTML="<a href=/Sbox.asp?User_ID==" + xid + " target=_blank>给" + user + "发短消息</a>";
}else{
oo("link_3").innerHTML="<a href=javascript:show_login2(); >给" + user + "发短消息</a>";
}
oo("link_4").innerHTML="<a href=/List_" + xid + ".html target=_blank>查看" + user + "的评论列表</a>";
oo("oDiv").style.left=(el-10) + "px";
oo("oDiv").style.top=(et-3) + "px";
oo("oDiv").style.display='';
}
state=1;
}
}else if(sign==2){
state=0;
}
}
function asdfg(sign){
if(sign==1){
oo("oDiv").style.display='';
state=1;
}else if(sign==2){
if(oo("navigation_logo").style.display=='none'){
oo("oDiv").style.display='none';
}
state=0;
}
}
function asdfg_left(sign){
if(sign==1){
oo("oDiv").style.display='';
state=1;
}else if(sign==2){
if(oo("navigation_logo").style.display=='none'){
oo("oDiv").style.display='none';
}
state=0;
}
}
function asdfgh(sign,id){
if(sign==1){
oo("navigation_logo").style.display='';
state=1;
}else if(sign==2){
state=0;
}
}
function showarrow(sign){
if(sign==1){
if(oo("navigation_logo").style.display=='none'){
oo("arrow_img").style.background="url('http://www.iyumen.cn/images/imgs/avatar_right.gif')";
}
}else if(sign==2){
if(oo("navigation_logo").style.display=='none'){
if(oo("arrow_img").style.background=="url(http://www.iyumen.cn/images/imgs/avatar_left.gif)"){
oo("arrow_img").style.background="url('http://www.iyumen.cn/images/imgs/avatar_right.gif')";
}else{
oo("navigation_logo").style.display='none';
oo("arrow_img").style.background="url('http://www.iyumen.cn/images/imgs/avatar_right.gif')";
}
}else{
oo("navigation_logo").style.display='';
if(oo("navigation_logo").style.display=='none'){
oo("arrow_img").style.background="url('http://www.iyumen.cn/images/imgs/avatar_right.gif')";
}
}
}
}
function disnav(){
var dis=oo("navigation_logo").style.display;
if(dis=="none"){
oo("navigation_logo").style.display='';
oo("arrow_img").style.background="url('http://www.iyumen.cn/images/imgs/avatar_left.gif')";
ssh=sh+50;
showi=1;
}else{
oo("navigation_logo").style.display='none';
oo("arrow_img").style.background="url('http://www.iyumen.cn/images/imgs/avatar_right.gif')";
showi=0;
}
}
function disnav2(){
var dis=oo("navigation_logo").style.display;
if(dis=="none"){
oo("navigation_logo").style.display='';
oo("arrow_img").style.background="url('http://www.iyumen.cn/images/imgs/avatar_right.gif')";
ssh=sh+50;
showi=1;
}else{
oo("navigation_logo").style.display='none';
oo("arrow_img").style.background="url('http://www.iyumen.cn/images/imgs/avatar_left.gif')";
showi=0;
}
}
var obj=document.getElementById("d")
var t=new Object();
function show(){
obj.style.display="";
obj.style.width=document.body.clientWidth;
obj.style.height=document.body.clientHeight;
if(obj.filters.alpha.opacity>25){
obj.filters.alpha.opacity=25;
clearTimeout(t.timer1);
return;
}else{
obj.filters.alpha.opacity+=2;
t.timer1=setTimeout("show()",10)
}
return;
}
function hide(){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
if(obj.filters.alpha.opacity<=0){
obj.filters.alpha.opacity=0;
obj.style.display="none"
clearTimeout(t.timer2)
return;
}else{
obj.filters.alpha.opacity-=2;
t.timer2=setTimeout("hide()",5);
}
}else{
obj.style.display="none"
}
return;
}
var sPop = null;
var postSubmited = false;
var smdiv = new Array();
var userAgent = navigator.userAgent.toLowerCase();
var is_webtv = userAgent.indexOf('webtv') != -1;
var is_kon = userAgent.indexOf('konqueror') != -1;
var is_mac = userAgent.indexOf('mac') != -1;
var is_saf = userAgent.indexOf('applewebkit') != -1 || navigator.vendor == 'Apple Computer, Inc.';
var is_opera = userAgent.indexOf('opera') != -1 && opera.version();
var is_moz = (navigator.product == 'Gecko' && !is_saf) && userAgent.substr(userAgent.indexOf('firefox') + 8, 3);
var is_ns = userAgent.indexOf('compatible') == -1 && userAgent.indexOf('mozilla') != -1 && !is_opera && !is_webtv && !is_saf;
var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera && !is_saf && !is_webtv) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);
var sw,sh;
sw=document.body.clientWidth
sh=document.body.clientHeight
var obj=document.getElementById("dssss")
var t=new Object();
function show(){
var screet=eet-300;
scrollTo(0,screet);
if (window.navigator.userAgent.indexOf("MSIE")>=1){
obj.style.display="";
oo("info_dsss").style.left=(document.body.offsetWidth-400)/2+"px";
oo("info_dsss").style.top=eet+"px";
oo("info_dsss").style.display="";
obj.style.width=oo("home").scrollWidth+"px";
obj.style.height=oo("home").scrollHeight+"px";
//obj.style.width=document.body.clientWidth;
//obj.style.height=document.body.clientHeight;
if(obj.filters.alpha.opacity>60){
obj.filters.alpha.opacity=60;
clearTimeout(t.timer1);
return;
}else{
obj.filters.alpha.opacity+=2;
show()
}
return;
}else{
obj.style.background="url(http://www.iyumen.cn/images/imgs/reg-pop-bg2.png)";
obj.style.display="";
//obj.style.width=document.body.clientWidth;
//obj.style.height=document.body.clientHeight;
oo("info_dsss").style.left=(document.body.offsetWidth-400)/2+"px";
oo("info_dsss").style.top=eet+"px";
oo("info_dsss").style.display="";
obj.style.width=oo("home").scrollWidth+"px";
obj.style.height=oo("home").scrollHeight+"px";
}
}
function show_out(){
scrollTo(0,0);
if (window.navigator.userAgent.indexOf("MSIE")>=1){
obj.style.display="";
oo("quit-alert").style.left=(document.body.offsetWidth-300)/2+"px";
oo("quit-alert").style.top="200px";
oo("quit-alert").style.display="";
obj.style.width=oo("home").scrollWidth+"px";
obj.style.height=oo("home").scrollHeight+"px";
//obj.style.width=document.body.clientWidth;
//obj.style.height=document.body.clientHeight;
if(obj.filters.alpha.opacity>60){
obj.filters.alpha.opacity=60;
clearTimeout(t.timer1);
return;
}else{
obj.filters.alpha.opacity+=2;
show_out()
}
return;
}else{
obj.style.background="url(http://www.iyumen.cn/images/imgs/reg-pop-bg2.png)";
obj.style.display="";
//obj.style.width=document.body.clientWidth;
//obj.style.height=document.body.clientHeight;
oo("quit-alert").style.left=(document.body.offsetWidth-300)/2+"px";
oo("quit-alert").style.top="200px";
oo("quit-alert").style.display="";
obj.style.width=oo("home").scrollWidth+"px";
obj.style.height=oo("home").scrollHeight+"px";
}
}
function in_party(){
scrollTo(0,0);
if (window.navigator.userAgent.indexOf("MSIE")>=1){
obj.style.display="";
oo("in_party").style.left=(document.body.offsetWidth-300)/2+"px";
oo("in_party").style.top="200px";
oo("in_party").style.display="";
obj.style.width=oo("home").scrollWidth+"px";
obj.style.height=oo("home").scrollHeight+"px";
//obj.style.width=document.body.clientWidth;
//obj.style.height=document.body.clientHeight;
if(obj.filters.alpha.opacity>60){
obj.filters.alpha.opacity=60;
clearTimeout(t.timer1);
return;
}else{
obj.filters.alpha.opacity+=2;
in_party()
}
return;
}else{
obj.style.background="url(http://www.iyumen.cn/images/imgs/reg-pop-bg2.png)";
obj.style.display="";
//obj.style.width=document.body.clientWidth;
//obj.style.height=document.body.clientHeight;
oo("in_party").style.left=(document.body.offsetWidth-300)/2+"px";
oo("in_party").style.top="200px";
oo("in_party").style.display="";
obj.style.width=oo("home").scrollWidth+"px";
obj.style.height=oo("home").scrollHeight+"px";
}
}
function hide_in(){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
if(obj.filters.alpha.opacity<=0){
obj.filters.alpha.opacity=0;
obj.style.display="none"
oo("in_party").style.display="none"
clearTimeout(t.timer2)
return;
}else{
obj.filters.alpha.opacity-=2;
hide_in()
}
}else{
obj.style.display="none"
oo("in_party").style.display="none"
}
oo("in_party").style.top="200px";
return;
}
function show_black(){
scrollTo(0,0);
if (window.navigator.userAgent.indexOf("MSIE")>=1){
obj.style.display="";
oo("quit-black").style.left=(document.body.offsetWidth-300)/2+"px";
oo("quit-black").style.top="200px";
oo("quit-black").style.display="";
obj.style.width=oo("home").scrollWidth+"px";
obj.style.height=oo("home").scrollHeight+"px";
//obj.style.width=document.body.clientWidth;
//obj.style.height=document.body.clientHeight;
if(obj.filters.alpha.opacity>60){
obj.filters.alpha.opacity=60;
clearTimeout(t.timer1);
return;
}else{
obj.filters.alpha.opacity+=2;
show_black();
}
return;
}else{
obj.style.background="url(http://www.iyumen.cn/images/imgs/reg-pop-bg2.png)";
obj.style.display="";
//obj.style.width=document.body.clientWidth;
//obj.style.height=document.body.clientHeight;
oo("quit-black").style.left=(document.body.offsetWidth-300)/2+"px";
oo("quit-black").style.top="200px";
oo("quit-black").style.display="";
obj.style.width=oo("home").scrollWidth+"px";
obj.style.height=oo("home").scrollHeight+"px";
}
}
function show_add(){
scrollTo(0,0);
if (window.navigator.userAgent.indexOf("MSIE")>=1){
obj.style.display="";
oo("add-alert").style.left=(document.body.offsetWidth-300)/2+"px";
oo("add-alert").style.top="200px";
oo("add-alert").style.display="";
obj.style.width=oo("home").scrollWidth+"px";
obj.style.height=oo("home").scrollHeight+"px";
//obj.style.width=document.body.clientWidth;
//obj.style.height=document.body.clientHeight;
if(obj.filters.alpha.opacity>60){
obj.filters.alpha.opacity=60;
clearTimeout(t.timer1);
return;
}else{
obj.filters.alpha.opacity+=2;
show_add();
}
return;
}else{
// alert("ssdd")
obj.style.background="url(http://www.iyumen.cn/images/imgs/reg-pop-bg2.png)";
obj.style.display="";
//obj.style.width=document.body.clientWidth;
//obj.style.height=document.body.clientHeight;
oo("add-alert").style.left=(document.body.offsetWidth-300)/2+"px";
oo("add-alert").style.top="200px";
oo("add-alert").style.display="";
obj.style.width=oo("home").scrollWidth+"px";
obj.style.height=oo("home").scrollHeight+"px";
//alert(obj.style.width)
}
}
function show_login(){
scrollTo(0,0);
oo("login-out").style.display="";
oo("login-pop").style.display="";
}
function show_login2(){
oo("oDiv").style.display="none";
oo("navigation_logo").style.display="none";
oo("arrow_img").style.background="url('http://www.iyumen.cn/images/imgs/avatar_right.gif')";
showi=0;
scrollTo(0,0);
oo("login-out").style.display="";
oo("login-pop").style.display=""
}
function hide(){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
if(obj.filters.alpha.opacity<=0){
obj.filters.alpha.opacity=0;
obj.style.display="none"
oo("info_dsss").style.display="none"
clearTimeout(t.timer2)
return;
}else{
obj.filters.alpha.opacity-=2;
hide()
}
}else{
obj.style.display="none"
oo("info_dsss").style.display="none"
}
return;
}
function hide_login(){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
if(obj.filters.alpha.opacity<=0){
obj.filters.alpha.opacity=0;
obj.style.display="none"
oo("login-out").style.display="none";
oo("login-pop").style.display="none";
clearTimeout(t.timer2)
return;
}else{
obj.filters.alpha.opacity-=2;
hide_login()
}
}else{
obj.style.display="none"
oo("login-out").style.display="none";
oo("login-pop").style.display="none";
}
oo("login-out").style.top="95px";
return;
}
function hide_out(){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
if(obj.filters.alpha.opacity<=0){
obj.filters.alpha.opacity=0;
obj.style.display="none"
oo("quit-alert").style.display="none"
clearTimeout(t.timer2)
return;
}else{
obj.filters.alpha.opacity-=2;
hide_out()
}
}else{
obj.style.display="none"
oo("quit-alert").style.display="none"
}
oo("quit-alert").style.top="200px";
return;
}
function hide_add(){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
if(obj.filters.alpha.opacity<=0){
obj.filters.alpha.opacity=0;
obj.style.display="none"
oo("add-alert").style.display="none"
clearTimeout(t.timer2)
return;
}else{
obj.filters.alpha.opacity-=2;
hide_add()
}
}else{
obj.style.display="none"
oo("add-alert").style.display="none"
}
oo("add-alert").style.top="200px";
return;
}
function hide_black(){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
if(obj.filters.alpha.opacity<=0){
obj.filters.alpha.opacity=0;
obj.style.display="none"
oo("quit-black").style.display="none"
clearTimeout(t.timer2)
return;
}else{
obj.filters.alpha.opacity-=2;
hide_black();
}
}else{
obj.style.display="none"
oo("quit-black").style.display="none"
}
oo("quit-black").style.top="200px";
return;
}
function login_url(op,partyid,groupid,styles){
var loghref=location.href ;
oo("login_url").innerHTML="<input type=hidden name=url value=" + loghref + ">";
actinfo(op);
setday(partyid,groupid,styles);
}
以上就是【從博客網扣了一個效果出來】的全部内容了,欢迎留言评论进行交流!