還是要首先引用JQ架構。
然後來看看效果：(串連添加不上)只能暫時看哈圖片， 具體效果可參見我部落格左方“My Box”中的“玩遊戲”：
下面代碼中有具體注釋。
再來看看代碼：
複製代碼 代碼如下:
<div id="_gameinfo" style="width:158px; border:1px #FFC solid; background-color:#FFF; position:fixed; z-index:101; display:none;padding:1px;">
</div>
<div id="thegameBox" style="text-align:center;">
<a href="javascript:;" alt="WASD鍵控制小女孩移動，方向鍵控制小男孩的移動，不同顏色的陷阱只能容納不同顏色的人通過哦！" name="binghuoren">深林冰火人</a>
<a href="javascript:;" alt="滑鼠點擊抓東西。" name="zhishangqiu">智商球3</a>
<a href="javascript:;" alt="滑鼠操作，移動滑鼠控制機械手移動，點擊左鍵釋放磁吸力抓住貨物。" name="yunshuchuan">船長的運輸船</a>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#thegameBox a").mousemove(function(ev){
var _Imgsrc="http://www.bkjia.com/uploads/allimg/131016/23422L525-1.jpg";//這裡需要將元素name設定和你的圖片名字一樣
var _Ways=$(this).attr("alt");//擷取當前滑鼠指著的元素的alt
$("#_gameinfo").show();//顯示提示層
if(!ev){ev=window.event;};//檢測是否為IE
document.getElementById("_gameinfo").style.left=(ev.clientX+10)+"px";//設定提示資訊left為滑鼠的X軸距離+10px
document.getElementById("_gameinfo").style.top=(ev.clientY+10)+"px";//設定提示資訊top為滑鼠的X軸距離+10px
$("#_gameinfo").html('<img src="'+_Imgsrc+'" alt="" width="158" height="117" style="margin-bottom:3px;" /><br />'+'<font color="blue">操作方法：</font>'+_Ways+'');//給提示層裡面新增內容並傳入參數
}).mouseout(function(){
$("#_gameinfo").hide();//滑鼠離開元素提示層隱藏
})
})
</script>
