当鼠标移动到小图片上时，小图片显示红色边框并在上面大图片显示相应大图片，效果如图：

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

<style type="text/css">

#div{width:500px;height:500px;border:1px solid #fff

;margin:auto;background:#fff}

li{list-style:none;float:left;margin-top:-15px;margin-left:50px}

</style>

</head>

<body>

<div id="div">

<div style="width:350px;height:262px;border:1px solid #fff

;margin:

auto;">

  <img src="data:images/show1_big.jpg" width="" height="" /> </div>

<div style="width:500px;height:50px;border:1px solid #fff

;margin-top:180px">

<!--ul开始-->

<ul>

  <li><img src="data:images/show1.jpg" width="" height="" onmouseover="change()"/> </li>

  <li><img onmouseover="change1()" src="data:images/show2.jpg" width="" height="" /> </li>

  <li><img src="data:images/show3.jpg" width="" height="" onmouseover="change2()"/> </li>

  <li><img src="data:images/show4.jpg" width="" height="" onmouseover="change3()" /> </li>

  </ul>

            <!--ul结束-->

  </div>

</div>

</body>

<script type="text/javascript">

//定义

function kuang(){

    var getli=document.getElementsByName("li");

    for(var i=;i<getli.length;i++){

        }

    }

          //定义替换图片方法

function change(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show1_big.jpg");

    imgs.style.width="border:1px solid red";

    }

     //定义替换图片方法

    function change1(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show2_big.jpg");

    }

     //定义替换图片方法

        function change2(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show3_big.jpg");

    }

     //定义替换图片方法

    function change3(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show4_big.jpg");

    }

</script>

</html>

JavaScript+CSS交互的更多相关文章

  1. jQuery基础与JavaScript与CSS交互-第五章

    目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Fle ...

  2. C# WinForm 和 javascript进行交互 使用HTML做界面

    01 using System; 02 using System.Collections.Generic; 03 using System.Text; 04 using System.Reflecti ...

  3. JavaScript CSS Style属性对照表

    JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...

  4. 【HANA系列】SAP HANA XS使用JavaScript数据交互详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

  5. C# windows程序应用与JavaScript 程序交互实现例子

    C# windows程序应用与JavaScript 程序交互实现例子 最近项目中又遇到WinForm窗体内嵌入浏览器(webBrowser)的情况,而且涉及到C#与JavaScript的相互交互问题, ...

  6. javascript/css压缩工具---yuicompressor使用方法

    1. 下载 地址:https://github.com/yui/yuicompressor/downloads 2. 安装 yuicompressor是由java写成的一组jar文件,需要jdk环境支 ...

  7. JavaScript ,Css and Jquery In OpenERP 7.0

    From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...

  8. 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色

    1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...

  9. 【ActionScript】Flash与网页的交互，ActionScript与JavaScript的交互

    Flash是可以轻松与网页交互数据的,不然为何Flash会有这么大的生命力呢?仅仅是这样编程比較麻烦而已,又要调试Flash,然后又要放到server上调试. 只是这种方式可以收到非常好的效果.Fla ...

随机推荐

  1. 【codeforces 755E】PolandBall and White-Red graph

    [题目链接]:http://codeforces.com/contest/755/problem/E [题意] 给你n个节点; 让你在这些点之间接若干条边;构成原图(要求n个节点都联通) 然后分别求出 ...

  2. 【codeforces 527D】Clique Problem

    [题目链接]:http://codeforces.com/contest/527/problem/D [题意] 一维线段上有n个点 每个点有坐标和权值两个域分别为xi,wi; 任意一对点(i,j) 如 ...

  3. Package pdftex.def Error: PDF mode expected, but DVI mode detected!

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51646781 在如下使用LaTeX编译 ...

  4. solaris11-text-安装GUI(gnome)

      http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=45057&id=3018467 1.下载所需的资源Text Ins ...

  5. IntelliJ IDEA中出现could not auto wired错误提示处理方式

    IntelliJ IDEA中出现could not auto wired错误提示处理方式 程序可以正常运行,就是出现错误提示: 学习了:http://blog.csdn.net/xlxxybz1314 ...

  6. ACdream 1112 Alice and Bob (博弈&amp;&amp;素数筛选优化)

    题目链接:传送门 游戏规则: 没次能够将一堆分成两堆 x = a*b (a!=1&&b!=1)x为原来堆的个数,a,b为新堆的个数. 也能够将原来的堆的个数变成原来堆的约数y.y!=x ...

  7. [深入理解Android卷一全文-第十章]深入理解MediaScanner

    由于<深入理解Android 卷一>和<深入理解Android卷二>不再出版,而知识的传播不应该由于纸质媒介的问题而中断.所以我将在CSDN博客中全文转发这两本书的全部内容. ...

  8. DM8168 IPNC Boa移植

    1.交叉编译openssL 下载openssL-1.0.0.tar.gz在虚拟机下进行交叉编译,生成libcrypto.a及libssl.a.将这两个文件复制到DVRRDK_03.00.00.00/b ...

  9. user和userdebug区别

    user:不可以root userdebug:可以root

  10. bzoj2503 相框——思路

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2503 思路题: 首先,这种问题应该注意到答案只跟度数有关,跟其他什么连接方法之类的完全无关: ...