php怎么鼠标移到图片链接显示缩略图-JavaSript-爱易网页

php怎么鼠标移到图片链接显示缩略图

日期：2014-05-16　浏览次数：20312 次

php如何鼠标移到图片链接显示缩略图？
RT
<a href="xxxxxxxxxx" target="_blank">zzzz</a>
要求鼠标移到图片链接显示缩略图

------解决方案--------------------
跟php没关系
------解决方案--------------------

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function() {
    var links = document.getElementById('demo').getElementsByTagName('a');
    for( var i = 0; i < links.length; i ++) {
        links[i].onmouseover = function() {
            var url = this.getAttribute('thumb');
            var img = document.createElement('img');
            img.src = url;
            img.style.position = 'absolute';
            img.style.top = this.offsetTop;
            document.getElementById('demo').appendChild(img);
        }
        links[i].onmouseout = function() {
            var img = document.getElementById('demo').getElementsByTagName('img')[0];
            img.parentNode.removeChild(img);
        }
    }
}
</script>
</head>

<body>
<div id="demo" style="position:relative;">
<a href="#" target="_blank" thumb='http://img3.cache.netease.com/www/logo/logo_png.png'>163.com</a><br />
<a href="#" target="_blank" thumb='http://www.google.com.hk/intl/zh-CN/images/logo_cn.png'>Google.com</a>
</div>
</body>
</html>

------解决方案--------------------
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function() {
    var links = document.getElementById('demo').getElementsByTagName('a');
    for( var i = 0; i < links.length; i ++) {
        links[i].onmouseover = function() {
            var url = this.getAttribute('thumb');
            var img = document.createElement('img');
            img.src = url;
            img.setAttribute('width','50px');
            img.setAttribute('height','50px');
            img.style.position = 'absolute';
            img.style.top = this.offsetTop;
            document.getElementById('demo').appendChild(img);
        }
        links[i].onmouseout = function() {
            var img = document.getElementById('demo').getElementsByTagName('img')[0];
            img.parentNode.removeChild(img);
        }
    }
}
</script>
</head>

<body>
<div id="demo" style="position:relative;">
<a href="#" target="_blank" thumb='http://img3.cache.netease.com/www/logo/logo_png.png'>163.com</a><br />
<a href="#" target="_blank" thumb='http://www.google.com.hk/intl/zh-CN/images/logo_cn.png'>Google.com</a>
</div>
</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

php怎么鼠标移到图片链接显示缩略图

相关资料更多>

推荐阅读更多>