HTML中,鼠标移动到相应的位置弹出图片

誮訫小緣帥 2011-11-23 06:49:02

急!!!求各位大侠,英雄,高手们指教,不胜感激....

在HTML中,当鼠标移动到相应的位置,就会弹出图片,移开后就会隐藏.

弹出的图片要显示在最上层,不能被其他<DIV>,<table>,<tr>之类的挡在下面,或是局部被挡住.

弹出的图片位置调整,如:CSDN论坛 [弹出图片位置] // CSDN论坛
.......................................................[弹出图片位置]

就像QQ,鼠标移动到图像,弹出框框..也可以将框框显示放到QQ外面,

弹出的图片是可以超出当前表格之外.

弹出的图片有链接,点击要能进行跳转.

要有源代码哇..后面要是加了注释,你就是我的偶像,师傅!我是菜鸟..谢谢!

...全文

3424 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

誮訫小緣帥 2011-11-26

打赏
举报

等下回去试下。。

多谢5楼。。。

现在能回贴的越来越少了。。

。感激不尽！！！

小韩 2011-11-24

打赏
举报

刚刚掉了JS 这个JS 是程序自动生成的。
你放在<head>把下面的代码放在你网页的这里面</head>



<script type="text/JavaScript">

<!--

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_showHideLayers() { //v6.0

  var i,p,v,obj,args=MM_showHideLayers.arguments;

  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

    obj.visibility=v; }

}

//-->

</script>

小韩 2011-11-24

打赏
举报

刚刚给楼主写了一个！时间比较赶就随便写了一个实现了楼主要的效果



<!--我只是随便给你做了一个  没有什么样式 你自己加样式就可以-->

<table width="100%" border="0" cellpadding="5" cellspacing="0" class="pro_heng">

  <tr>

    <td width="24%" rowspan="4" align="center" valign="middle"  onmouseover="MM_showHideLayers('product_pic','','show');" onmouseout="MM_showHideLayers('product_pic','','hide');">

	<!--鼠标不经过的时候正常显示的图片-->

	<img src="154U95N0-11.jpg" width="200" height="200"  class="cp_pic"/></td>

    <td width="56%" valign="top">

	<div class="bigpig" id="product_pic" style="position:absolute; z-index:10; visibility: hidden;" onmouseover="MM_showHideLayers('product_pic','','show');"  onmouseout="MM_showHideLayers('product_pic','','hide');">

	<!--鼠标经过的时候显示的图片-->

         <img src="154U95N0-11.jpg" />      </div>

	</td>

  </tr>

</table>