鼠标一动 小图变大图
技术与开发
我最近访问网易新闻，发现右侧的新闻图片切换效果非常有趣（见图）。我在网上也有个“小窝”，想在里面添加相似的图片效果，不知道该怎么设计？
要想把这种效果“占为己有”，并非难事。我们可以在页面内使用“DIV+CSS”进行布局，将图片变换区分为大图展示、小图导航、文字介绍三个小区域，然后把这三个区连接起来形成一个有机的整体即可。
首先我们用CSS设计结构，然后为每个图片配置DIV，通过它来判断图片是显示还是不显示，最后设计鼠标移动显示功能，即鼠标移到不同的导航图上时，可以在大图展示、文字介绍区显示不同的信息。利用相同原理，我们还可以制作图片可以变化的相册。
小知识：DIV相当于网页中的一种容器，可以存放任何HTML元素。它具有可定位性强的特点。
第一步 设计图片框架
要把图片变换区划分为大图展示、小图导航、文字介绍三个小区域，我们可以在页面框架上部的＜head＞＜/head＞标签内添加相关代码（代码下载地址：http：//www.cpcw.com/bzsoft）。
第二步 在框架中导入内容
框架虽然有了，但没有内容显得毫无“生气”，我们要让它“动”起来。在页面框架中的 ＜div id="focusPic1" style="display:block;"＞＜a href="#"＞＜img src="图片1地址" alt="图片1说明" width="360" height="240" border="0" class="left" /＞＜/a＞＜/div＞/*图片地址、说明请根据实际情况自己修改，下面的3段代码也如此*/ ＜div id="focusPic2" style="display:none;"＞＜a href="#"＞＜img src="图片2地址" alt="图片2说明" width="360" height="240" border="0" class="left" /＞＜/a＞＜/div＞ ＜div id="focusPic3" style="display:none;"＞＜a href="#"＞＜img src="图片3地址" alt="图片3说明" width="360" height="240" border="0" class="left" /＞＜/a＞＜/div＞ ＜div id="focusPic4" style="display:none;"＞＜a href="#"＞＜img src="图片4地址" alt="图片4说明" width="360" height="240" border="0" class="left" /＞＜/a＞＜/div＞ /*大图focusPic区结束*/ /*小图导航区开始*/ ＜ul＞ ＜li id="focusnav1" class="active" onmouseover="javascript:showFocus（1）;"＞＜a href="#"＞＜img src="小图1地址" width="75" height="50" alt="说明" border="0" /＞＜/a＞＜/li＞/*图片地址、说明请根据实际情况自己修改，下面的3段代码也如此*/ ＜li id="focusnav2" class="" onmouseover="javascript:showFocus（2）;"＞＜a href="#"＞＜img src="小图2地址" width="75" height="50" alt="说明" border="0" /＞＜/a＞＜/li＞ ＜li id="focusnav3" class="" onmouseover="javascript:showFocus（3）;"＞＜a href="#"＞＜img src="小图3地址" width="75" height="50" alt="说明" border="0" /＞＜/a＞＜/li＞ ＜li id="focusnav4" class="" onmouseover="javascript:showFocus（4）;"＞＜a href="#"＞＜img src="小图4地址" width="75" height="50" alt="说明" border="0" /＞＜/a＞＜/li＞ ＜/ul＞ /*小图导航区结束*/ ＜/div＞ /*图片显示区结束*/ ＜div id="focusContent1" style="display:block;"＞ ＜h2＞＜a href="#"＞文字说明1
＜div class="text"＞文字详细说明1＜/div＞/*说明文字请根据实际情况自己修改*/ ＜/div＞ ＜div id="focusContent2" style="display:none;"＞ ＜h2＞＜a href="#"＞文字说明2＜/a＞＜/h2＞ ＜div class="text"＞文字详细说明2＜/div＞/*说明文字请根据实际情况自己修改*/ ＜/div＞ ＜div id="focusContent3" style="display:none;"＞ ＜h2＞＜a href="#">文字说明3＜/a＞＜/h2＞ ＜div class="text"＞文字详细说明3＜/div＞/*说明文字请根据实际情况自己修改*/ ＜/div＞ ＜div id="focusContent4" style="display:none;"＞ ＜h2＞＜a href="#"＞文字说明4＜/a＞＜/h2＞ ＜div class="text"＞文字详细说明4＜/div＞/*说明文字请根据实际情况自己修改*/ 页面已经全部设计完成了，可是当我们预览时却只会显示第一张图片，根本不会切换，这又是为什么呢？不用急，还差最后一步，我们要在第三步 用鼠标控制图片切换显示
总结
这种图片切换显示效果，不仅可以用来做新闻图片的变换，还可以用来制作相册照片显示，多样的图片展示效果，简单的使用方法，更能吸引访客的眼球、勾住网友的心，大家可以在自己的网站上试试。