iT邦幫忙

0

onMouseOver更換圖示問題

網頁設計
joemade 2015-02-07 11:40:30 ‧ 2694 瀏覽

請教各位高手,我想用onMouseOver更換網站圖示,但更換的圖示尺寸大小不一,當onMouseOver事件被觸發時整個網頁會跟著圖示移動,而我又想做出'更換圖示大小不一'的變換效果,應該要怎麼做網頁才不會跟著移動呢?

登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

6
wiseguy
iT邦超人 1 級 ‧ 2015-02-07 20:09:22
最佳解答

方法一，先用一個固定大小的 div 來佔住網頁的位置，而圖片就秀在此 div 裡面，那網頁就不會因為圖的大小而挪動了。
方法二，圖片的 position 設為 absolute (絕對位置)，z-index 設大一點，等於圖片浮在網頁上，如此圖的大小變換，就不會影響網頁了。

joemade iT邦新手 5 級 ‧ 2015-02-15 09:53:48 檢舉

謝謝你,但方法一,會讓圖檔變形,效果不好...搖頭

slime iT邦大師 1 級 ‧ 2015-02-15 10:29:17 檢舉

http://fecbob.pixnet.net/blog/post/43035313-%5Bcss%5D-%E8%AE%93%E5%9C%96%E7%89%87%E8%87%AA%E5%8B%95%E6%94%BE%E5%88%B0%E6%9C%80%E5%A4%A7%EF%BC%8C%E8%80%8C%E4%B8%94%E4%BF%9D%E6%8C%81%E9%95%B7%E5%AF%AC%E7%AD%89%E6%AF%94

joemade iT邦新手 5 級 ‧ 2015-02-16 10:26:10 檢舉

我將方法一做些應用,先用較大的圖檔以<IMG>佔住網頁位置,這樣下一個圖檔大小就不會影響網頁.

登入發表回應
2
slime
iT邦大師 1 級 ‧ 2015-02-07 13:02:03

如果對 CSS 稍微了解, 可以設定一個 div 狀態為 hidden .

當點圖或 OnMouseOver 時, 才把那個 div 改為可顯示, 並顯示出大圖.

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙