今天小編就為大家介紹dw制作鼠標放上去圖片就顯示鼠標離開圖片就消失的效果,操作方法很簡單的,不會的朋友可以參考本文哦!
操作步驟:
1、新建“HTML文檔”,在“布局”里找到“繪制層”,繪制一個方形層,填充顏色,并在里面輸入文字“夏”,字體和顏色,大家自由設置;
2、用“繪制層”再次繪制一個層,層編號設置為“夏”,寬:300px;高:200px;設置如圖所示:
3、在“夏”層里插入一張圖片,大小和“夏”層一樣大,寬和高分成設置為300px、200px;
4、點擊“窗口”—“行為”,出現“行為”窗口;
5、選中“夏”層,在“層”窗口下,打開“夏”前面的眼睛;然后選中文字“夏”,在“行為”窗口下,點擊
,選擇“顯示—隱藏層”;
6、這時彈出“顯示—隱藏層”窗口,選中層“夏”,點擊“顯示”,然后確定即可;
7、在“行為”窗口中,就會出現“顯示—隱藏層”信息,在前面的下拉菜單中選擇“onMouseover ”。
補充:onmouseover 事件會在鼠標指針移動到指定的對象上時發生。
8、再次選中“夏”層,在“層”窗口下,選擇“夏”前面的這個圖標,它的意思就是關閉圖片,這時你會看到,“夏”層以及里面的圖片都沒有了;
9、選中文字“夏”,在“行為”窗口下,點擊,選擇“顯示—隱藏層”;這時會彈出“顯示—隱藏層”窗口,選中層“夏”,點擊“隱藏”,然后確定即可;
10、在“行為”窗口中,再次出現“顯示—隱藏層”信息,在前面的下拉菜單中選擇“onMouseout ”。
補充:onmouseout 事件會在鼠標指針移出指定的對象時發生;
11、保存,預覽;
圖1:鼠標放上去,圖片顯示;
圖1
圖2:鼠標離開,圖片消失
圖2
以上就是dw制作鼠標放上去圖片就顯示鼠標離開圖標就消失方法介紹,操作步驟并不是很難,但需要大家仔細一點,尤其在設置行為時要注意圖片的顯示和隱藏,好了,有興趣的朋友可以參考本文哦!
注:本篇文章系武林網依照真實經歷原創,轉載請注明出處!
新聞熱點
疑難解答