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的位置來變更顯示位置,
如果大大們另外有更好的方法或是範例能指點或分享的話,
小弟將感激不盡^^


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 無呈現 的頭像
    無呈現

    無呈現的網路筆記

    無呈現 發表在 痞客邦 留言(1) 人氣()