Re: [問題] 滑鼠移過變圖片ASP.NET

[kyork (黃金芒果)]

※ 引述《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='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="http://l.yimg.com/f/i/tw/hp/mh/08logo.gif">
  <span>
     <img src="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！山要SOD！現在連海也要給我SOD！
推 ：一人一信支持kyork加入SOD

--
※ 發信站: 批踢踢實業坊(ptt.cc)
→ ateclean:CSS部份其實寫關鍵語法就可以了 你多寫了不少樣式 ^^"
→ ateclean:較簡單的方法是用background-image & :hover 切換
用background-image & :hover當然也可以
不過這種寫法的應用範圍比較廣
例如
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/
這招其實是用來做tip，只是我拿來亂搞XD
推 tomin:我發現你這樣寫　yahoo只是被google蓋住　沒有真的不見
的確只是蓋住，一切都是假象
→ ateclean:沒錯～ kyork用絕對定位的辦法在圖文並茂情況下會很難XD
語意正確位置就會正確，所以也不會太難找位置
絕對位置的父元素要設定為position:relative;
這樣就會以父元素當標準做絕對定位

補個連結
其他變形技巧
http://cssglobe.com/post/1614/4-uber-cool-css-techniques-for-links
※ 編輯: kyork           來自: 59.126.236.188       (04/28 00:07)