質問: マウスオーバーで画像を暗くするには? 私の問題..多数の画像(ハイパーリンク内)があり、マウスオーバーでそれぞれを暗くして(つまり、不透明度の高い黒いマスクを適用するなど)、mouseoutで通常に戻します。しかし、私はそれを行うための最良の方法を理解することはできません。試してみた.. jqueryカラーアニメーションといくつかのjavascriptリファレンス。 javascriptを使用して画像の不透明度を設定します。 私はしたくない.. 画像は不透明度80%で始まり、マウスオーバーで100%になります(簡単です)。 2つの画像(1つの明るい画像と1つの暗い画像)を交換するには、この申し訳ありません。 繰り返すために..画像上で(ハイパーリンクをスライドさせて)マウスオーバーで暗くし、マウスアウトで暗さを失います。考え?更新:これは提案からの私の進歩です。 ie8では正常に見えますが、ff3では正常ではありません<html> <body> <a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)"> <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" /> </a> </body> </html> 考え?-リー[〜#〜] answer [〜#〜]私はこれで行きます(ie8とffで動作するようです)<html> <head> <style type="text/css"> .outerlink { background-color:black; display:block; opacity:1; filter:alpha(opacity=100); width:200px; } img.darkableimage { opacity:1; filter:alpha(opacity=100); } </style> </head> <body> <a href="http://www.google.com" class="outerlink"> <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" class="darkableimage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" /> </a> </body> </html>
回答: 50%の透明度で黒いpngを作成します。これをマウスオーバーでオーバーレイします。