php如何鼠标移到图片链接显示缩略图？

LiveAsaMonster 2011-08-15 11:57:08

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

...全文

129 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

乌镇程序员 2011-08-15

打赏
举报

<!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>

tianmo2010 2011-08-15

打赏
举报

要用JavaScript写个函数，当鼠标移动那里就执行该函数，用onmouseover调用函数就可以

davy152486 2011-08-15

打赏
举报

跟php没关系

LiveAsaMonster 2011-08-15

打赏
举报

谢谢！

乌镇程序员 2011-08-15

打赏
举报

那你显示的就不叫缩略图，而是以较小的尺寸显示图片：

<!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;

			img.style.width = '80px';  //设置宽度

			//img.style.height = '50px'; //设置图片高度，高宽只设置一个时，浏览器会自动计算另一个值，实现等比例缩放

            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>

灬上海爽爷 2011-08-15

打赏
举报



<!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>