emu in blogjava

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            171 隨筆 :: 103 文章 :: 1052 評論 :: 2 Trackbacks
          現在很多網站都用背景圖片來實現hover(鼠標經過)切換圖片。但是IE有個該死的bug會造成超鏈接的背景圖片有時無法cache,因此在鼠標經過超鏈接圖片的時候就看到嘩嘩一大片的http下載請求。

          這不像很多網站上描述的,是由于IE的緩存策略被設置在“每次訪問此頁時更新”了造成的,不管IE緩存策略如何設置,都無法徹底避免這個問題。

          emu試驗了一下,發現用前景圖也可以實現老甘(他的域名貌似已經過期,居然沒續費……)用背景圖實現的類似效果,不過要多用上一些小技巧: 
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <HEAD>
          <style>
              A.file
          {overflow:hidden;height:20px;width:20px;}
              A.file IMG
          {position:relative;left:-130px;top:-350px}
              A.file:hover
          {emu:expression(0)}
              A.file:hover IMG
          {left:-10px;top:-350px}

              A.file2 
          {text-decoration:none;color:gray}
              A.file2 span
          {overflow:hidden;height:20px;width:20px;}
              A.file2 span IMG
          {position:relative;left:-130px;top:-348px}
              A.file2:hover
          {color:red;height:20}
              A.file2:hover span IMG
          {left:-10px;top:-348px}
          </style>
          </HEAD>
          <BODY>
           one single icon : 
          <class="file" href="#"><img src="http://www.aygfsteel.com/images/blogjava_net/emu/1359/o_button.gif"></A>.<BR>
          an icon with text:
          <class="file2" href="#"><span><img src="http://www.aygfsteel.com/images/blogjava_net/emu/1359/o_button.gif"></span>test</A>
          </BODY>
          </HTML>

           不用背景圖的一個代價就是,再也不能css裸奔了。twinsen一定要講這是個人品問題了。有的時候,要對付IE這樣人品不好的平臺,犧牲一點人品來換取一點性能上的優化,并不是不值得考慮的吧?

          在Firefox下面比較郁悶,必須要display:block才能實現overflow的效果,試了下display:table等table族的樣式,都沒有辦法真正的overflow。
          posted on 2007-06-06 20:45 emu 閱讀(3675) 評論(8)  編輯  收藏

          評論

          # re: 用前景圖實現hover切換圖片 2007-06-07 09:37 TwinsenLiang
          有別的方法又不用,不要用這些爛招,大哥  回復  更多評論
            

          # re: 用前景圖實現hover切換圖片 2007-06-07 09:47 emu
          技術探討,不必這么執著于爛不爛啦,大哥  回復  更多評論
            

          # re: 用前景圖實現hover切換圖片 2007-07-17 14:38 Scorr
          兩位大哥

          :)  回復  更多評論
            

          # re: 用前景圖實現hover切換圖片 2007-08-16 15:05 Gulu77
          想法吾錯~,但英雄無用武之地~  回復  更多評論
            

          # re: 用前景圖實現hover切換圖片 2007-08-17 18:39 emu
          呵呵玩玩而已嘛,如果苛求每個創新都一定要有使用價值,那我們的創新精神就會收到壓制。  回復  更多評論
            

          # re: 用前景圖實現hover切換圖片 2009-05-15 16:28 藏獒價格
          CSS高級運用哦.  回復  更多評論
            

          # re: 用前景圖實現hover切換圖片 2009-05-15 16:29 藏獒
          我一般喜歡把CSS寫在TABLE或DIV里,只有經常重用的CSS我才會寫成文件.  回復  更多評論
            

          # re: 用前景圖實現hover切換圖片 2009-05-15 16:30 魔獸世界私服
          CSS其實難學,哎..看起來不難,其實難...  回復  更多評論
            


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 西峡县| 凌云县| 信宜市| 永吉县| 涞水县| 澄城县| 东安县| 彭阳县| 常宁市| 东港市| 明溪县| 连平县| 且末县| 长宁区| 讷河市| 安溪县| 通山县| 桂林市| 茶陵县| 拜泉县| 宜兴市| 木兰县| 元氏县| 芦山县| 望江县| 涿州市| 通海县| 耒阳市| 东光县| 璧山县| 神池县| 威远县| 邵阳县| 镇坪县| 黎川县| 大足县| 曲阳县| 义马市| 惠水县| 合作市| 太和县|