第一個jQuery demo ，鼠標換過，變換圖片。
<!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=gb2312" />
<title>無標題文檔</title>
<script language="JavaScript" src="jquery.js"></script>
</head>
<body>
<style type="text/css">
#research_main{
width:796px;
height:auto
}
#leftside{
float:left;
width:28%;
}
#middlesile{
float:left;
width:40%
}
#rightsile{
float:left;
width:28%
}
.singleone{
width:98%;
padding: 0px 5px;
}
.singleone h3{
font-size:13px;
color:#97cace;
margin:0px;
padding:0px;
background:url(yfheader_bg.jpg) no-repeat
}
.singleone p{
width:100%;
text-align:justify;
text-justify:inter-ideograph
}
#middlesile img{
border:none;
}
</style>
<script language="JavaScript">
$(document).ready(function(){ //頁面加載後，加載的方法
$("#fristarea").mouseover(function(){
//document.getElementById("telogyimg").src ="changeone.jpg";//用js實現
$("#telogyimg").attr("src","changeone.jpg");
});
$("#vedioarea").mouseover(function(){
$("#telogyimg").attr("src","default.jpg");
});
});
</script>
<div id="research_main">
<div id="leftside">
<div class="singleone" id="fristarea">
<h3>視頻芯片技術</h3>
<p id="txtdesc">針對芯片技術進行顯示和處理，以高科技的發展適應現代的發展需要</p>
</div>
</div>
<div id="middlesile">
<img id="telogyimg" src="default.jpg"/>
</div>
<div id="rightsile">
<div class="singleone" id="vedioarea">
<h3>視頻芯片技術</h3>
<p>針對芯片技術進行顯示和處理，以高科技的發展適應現代的發展需要</p>
</div>
</div>
</div>
</body>
</html>
