我网页有500张10*10的图片,每张图片原始大小不一样,有的是100*50,有的是800*600
我想实现鼠标经过图片上,图片显示原图大小,怎么办?

解决方案 »

  1.   

    是要显示原图还是只显示原图尺寸?显示原图
    页面显示10*10小图,把放原图的div隐藏,鼠标经过时显示该div显示原图尺寸
    把原图的尺寸放img的title=""里...
      

  2.   

    页面代码:建议你页面上放的是图片的缩略图(如果是大图,会影响js事件的响应速度,这个我自己碰到过得,做过无数次测试。)
    命名:缩略图可以前缀或后缀或文件夹来区分,比如缩略图small_pic.jpg,原图big_pic.jpg
    js调用:比如mouserover时显示或动态改变图片地址mouseover=function(){small_pic.src="big_pic.jpg"}
      

  3.   

    可以看一下jquery,有一个实现此功能的组件,非常简单好用。
      

  4.   

    不知道这里有没有楼主想要的效果,如果有的话,给分吧,谢谢......
    http://www.cnblogs.com/cloudgamer/archive/2010/04/14/ImageZoom_ext.html
      

  5.   

    $(' img').mouseenter(function(){
       $(this).data('width', $(this).css('width')
      $(this).css('width','');
    }.mouseleave(function(){
      $(this).css('width', $(this).data('width'));
    }
      

  6.   

    直接写一个层,然后将其img放入此层中当鼠标移上去的时候 显示层,层内的图片不要设置其height和width即可,它显示的就是图片的原本大小。
      

  7.   


    <html>
        <head>
            <title>AAAAAAA</title>
        </head>
        <body>
            <img src="123.png" style="width: 10px; height: 10px;" onmouseout="this.style.width = '10px'; this.style.height = '10px';" onmouseover="this.style.width = null; this.style.height = null;" />
        </body>
    </html>
      

  8.   

    用 CSS 的,你看看这样可以不?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
      <title>试试</title>
    </head><style type="text/css">
    p { text-indent:2em; }
    img { border:0; }
    #txt { font-size:18px; line-height:25px; }
    .scala-img { position:relative; margin:0; }
    .scala-img .small { width:1em; }
    .scala-img .large { display:none; border:none; }
    .scala-img:hover .large { display:block; position:absolute; left:0em; top:0em; border:2px solid #dcdcdc; }
    </style><body>
      <div id="txt">
      <p>我网页有500张10*10的图片,每张图片原始大小不一样,有的是100*50,
      <span class="scala-img">
        <img src="http://avatar.csdn.net/4/3/9/3_wdpjs3.jpg" class="small" />
        <img src="http://avatar.csdn.net/4/3/9/1_wdpjs2.jpg" class="large" />
      </span>有的是800*600我想实现鼠标经过图片上,图片显示原图大小,怎么办?</p>
      </div>
    </body>
    </html>