服务导航
企业概况     李墨菲博客
百度推广、谷歌推广、SEO优化
域名注册、服务器 VPS租用
网站服务流程    业务渠道代理
网站建设价格表
搜索引擎竞价排名服务
800元企业网站制作特价套餐
搜索引擎免费登录口
咨询QQ:2196677
售后QQ:82090889
为什么要选择八桂网讯?
8年品牌网站建设经验积累,网站成功客户超2200家!
在为您提供服务的任何一个环节,我们都拥有自己的核心团队,保障售后服务的可控性。
由程序编程师、平面美工设计师形成的专业后盾组合,从asp、asp.net、php到java的知识结构互补,使得八桂网讯能够满足客户的功能需求和二次开发整合。
全面的成熟团队为能为您提供一流的平面设计和网站管理后台。
当前位置:网站首页 新闻资讯js显示图片像alt一样的自定义内容
js显示图片像alt一样的自定义内容
编辑:八桂网讯    时间:2010/5/4    浏览:2125

今天朋友遇到了一个问题,就是鼠标移到图片上显示图片的题目,日期等内容,但是用alt呢可以显示,但不能分行等,后来我帮他弄了一下,下面将代码与大家分享:

《style type="text/css"》
.altbox border:1px solid #f60; background:#fff; padding:5px; width:150px; font-family:Arial; font-size:12px}
《/style》
《script type="text/javascript"》
 function aa(a,b)
var offsetX = 20;
var offsetY = 20;
var imgs = document.images;
for (var i=0; i《imgs.length; i++)
   (function()
    var div;
    var pw = getPW();
    var ph = getPH();
    var timeout;
    document.images[i].onmouseover = function(e)
   
     div = document.createElement("DIV");
     div.className = "altbox";
     div.innerHTML = a+"《br》"+b;
     div.style.position = "absolute";
     this.alt = '';
     document.body.appendChild(div);
     var p = getMouse(e);
     var x = p.x + offsetX;
     var y = p.y + offsetY;
     if (div.offsetWidth + x 《 pw)
      div.style.left = x + "px" ;
     } else
      div.style.left = ( pw - div.offsetWidth ) + "px";
     }
     if (div.offsetHeight + y 《 ph)
      div.style.top = y + "px";
     } else
      div.style.top = (ph - div.offsetHeight) + "px";
     }
     (function(img)
      timeout = setTimeout(function()
       if (div)
        img.alt = div.innerHTML;
        div.parentNode.removeChild(div);
        document.onmousemove = null;
       }
      },3000)
     })(this);
     document.onmousemove = function(e)
      var p = getMouse(e);
      var x = p.x + offsetX;
      var y = p.y + offsetY;
      if (div.offsetWidth + x 《 pw)
       div.style.left = x + "px" ;
      }
      if (div.offsetHeight + y 《 ph)
       div.style.top = y + "px";
      }
    
    
     }
   
    }
    document.images[i].onmouseout = function(e)
     if (div.parentNode)
      this.alt = div.innerHTML;
      div.parentNode.removeChild(div);
      document.onmousemove = null;
      clearTimeout(timeout);
     }
    }
   })();


function getMouse(ev)
var ev = ev || window.event;
if (ev.x)
   nx = ev.x;
   ny = ev.y;
} else
   nx = ev.pageX;
   ny = ev.pageY;

return x:nx,y:ny};

function getPW()
return document.documentElement.scrollWidth;

function getPH()
return document.documentElement.clientHeight 》 document.documentElement.scrollHeight ? document.documentElement.clientHeight : document.documentElement.scrollHeight;
}《/script》
《/head》
《body》
《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" a  onMouseover="aa(11111,1111)"width="204" height="150" /》
《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg"  onMouseover="aa(1111,112)"width="204" height="150" /》
《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg"  width="204" height="150" /》
《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示4" width="204" height="150" /》
《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" width="204" height="150" /》
《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" width="204" height="150" /》
《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示7" width="204" height="150" /》

请将代码中的“()、{}、《》”分别替换成"()、{}、<>"

八桂网讯 爱伦文化 深圳外语培训 招商加盟 迪优目录 广西旅游365 八桂大地 建站导航网 南宁创意雕塑 双成纸管
八桂网讯-高端网站建设专家
Copyright © 2004- 八桂网讯网络技术有限公司 Baguidadi Inc. All Rights Reserved.