Re: [問題] 滑鼠移過變圖片ASP.NET
※ 引述《tomin (for pete's sake)》之銘言：
: 跟ASP無關 Demo: http://noking.googlepages.com/changelogo.html
: Code:
: <img src="http://l.yimg.com/f/i/tw/hp/mh/08logo.gif" onmouseover=
: "this.src='http://www.google.com.tw/intl/en_com/images/logo_plain.png'"
: onmouseout="this.src='" rel="nofollow">http://l.yimg.com/f/i/tw/hp/mh/08logo.gif'">
: 順道一提，Google Page要不見了，哭哭，要被移到Sites了，
: 好像不能在sites使用js、css。
其實純css也辦得到
http://subwoofe.googlepages.com/changelogo.html
HTML
<a href="#">
<img src="" rel="nofollow">http://l.yimg.com/f/i/tw/hp/mh/08logo.gif">
<span>
<img src="" rel="nofollow">http://www.google.com.tw/intl/en_com/images/logo_plain.png">
</span>
</a>
CSS
body{margin:0;padding:0;}
a img{border:0;}
a{text-decoration: none;}
a{
z-index:10;
}
a:hover{
display:block;position:relative;z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:0;
left:0;
z-index:10;
}
更麻煩.......0rz
好處是即使開NoScript也擋不住XD
或是不能用JS的環境可以頂著用
--
推
,
推 ：一人一信支持kyork加入SOD
--
※ 發信站: 批踢踢實業坊(ptt.cc)
→
04/27 21:33, , 1F
04/27 21:33, 1F
→
04/27 21:34, , 2F
04/27 21:34, 2F
用background-image & :hover當然也可以
不過這種寫法的應用範圍比較廣
例如
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/
這招其實是用來做tip，只是我拿來亂搞XD
推
04/27 22:34, , 3F
04/27 22:34, 3F
的確只是蓋住，一切都是假象
→
04/27 22:48, , 4F
04/27 22:48, 4F
語意正確位置就會正確，所以也不會太難找位置
絕對位置的父元素要設定為position:relative;
這樣就會以父元素當標準做絕對定位
補個連結
其他變形技巧
http://cssglobe.com/post/1614/4-uber-cool-css-techniques-for-links
※ 編輯: kyork 來自: 59.126.236.188 (04/28 00:07)
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 3 之 3 篇)：