鼠標移動到圖片名上,顯示圖片的簡單實例
更新時間：2013年07月14日 15:40:51 作者：
鼠標移動到名(wait.gif)上，顯示圖片，鼠標移開則不顯示圖片
做法：新建 a.html 和 一個待顯示圖片 wait.gif 放在同一目錄下，
a.html 代碼如下：
復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var path = './'; //圖片相對路徑
function show(obj) {
var name = obj.innerText;
var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判斷
if (!sDiv) {
sDiv = document.createElement("DIV");
sDiv.id = 'img_' + name.split('.')[0];
sDiv.style.position = 'absolute';
sDiv.style.top = obj.offsetTop + obj.offsetWidth + 'px';
sDiv.style.left = obj.offsetLeft +obj.offsetHeight + 'px';
sDiv.style.border = '1px red solid';
var img = document.createElement("img");
img.src = path + name;
sDiv.appendChild(img);
document.body.appendChild(sDiv);
}
sDiv.style.display = 'block';
}
function f(obj) {
var name = obj.innerText;
var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判斷
if (sDiv) {
sDiv.style.display = 'none';
}
}
</script>
</head>
<body>
<div onmouseover="show(this)" onmouseout="f(this)" style="position:absolute;">
wait.gif
</div>
</body>
</html>
您可能感興趣的文章:
相關文章
這篇文章主要介紹了js仿百度貼吧驗證碼特效實例代碼，有需要的朋友可以參考一下2014-01-01
這篇文章主要介紹了js控制多圖左右滾動切換效果，很實用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了js實現雙擊圖片放大單擊縮小的方法,涉及js操作圖片及onclick與ondblclick事件的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了javascript自定義的addClass()方法，通過傳參就可以實現樣式的添加2014-05-05
layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法舉例
這篇文章主要給大家介紹了關于layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法的相關資料,最近接觸到layer彈窗,感覺彈窗功能異常強大,真的很方便,所以記錄下來,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了微信小程序實現多行文字滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了nodejs分離html文件里面的js和css的方法，本文需要分離出一個html 文件里面的script 和style 里面的內容，然后單獨生成js文件和css 文件，感興趣的可以了解一下2019-04-04
今天小編就為大家分享一篇layui獲取多選框中的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了js實現超簡單的展開、折疊目錄代碼,通過javascript操作鼠標點擊事件控制頁面元素樣式的動態(tài)改變實現該功能,非常簡單實用,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了js獲取本機操作系統(tǒng)類型的方法,需要的朋友可以參考下2015-12-12