close
上圖為一般當滑鼠滑過連結時的說明文字情況,
若想要變更其視覺樣式或顯示內容能使用HTML語法時透過javascript即可實現...
以下是利用javascript來實現自製網頁說明文字的簡易範例:
原始碼部份
javascript:
<script language="javascript" type="text/javascript">
//讀取時先隱藏說明
window.onload = function ()
{
hide();
}
//取得滑鼠座標
function pos(e)
{
var ex = document.getElementById("explain");
ex.style.left = e.clientX+document.body.scrollLeft+10+"px";
ex.style.top = e.clientY+document.body.scrollTop+10+"px";
}
//滑出連結,隱藏說明
function hide(){
var ex = document.getElementById("explain");
ex.style.display = "none";
}
//滑過連結上方時,顯示並載入說明
function view(t){
var ex = document.getElementById("explain");
ex.innerHTML = t;
ex.style.display = "inline";
}
</script>
HTML:
//說明文字div,透過css來變更視覺
<div id="explain" style="position:absolute;"></div>
//連結範例
<a hrl="#" onmouseover="view('輸入連結說明文字');" onmouseout="hide();" onmousemove="pos(event);">連結說明文字</a>
以上是利用javascript來實現自製網頁說明文字的簡易範例,
尚未判斷連結說明文字於browser的位置來變更顯示位置,
如果大大們另外有更好的方法或是範例能指點或分享的話,
小弟將感激不盡^^
全站熱搜
留言列表