1

ロールオーバー画像に素敵なフェード トランジションを追加するあらゆる種類の方法を見つけましたが、スクリプトを HTML ドキュメントに適用する方法を実際に述べている人はいません。

これは私がこれまでに得たものです..どのようにフェードイン、フェードアウトスクリプトを追加できますか? 画像から画像へとフリックする代わりに

<img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" 
onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)"
    onmouseout="MM_swapImgRestore()" />

HTMLドキュメントの全体を次に示します。

<td colspan="2" rowspan="5" align="left" valign="top"><a href="portfolio.html"><img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)"
    onmouseout="MM_swapImgRestore()" /></a></td>

「index-alt_12.jpg」を分離して ID タグを作成するにはどうすればよいですか? そのコードをどこに置くのですか？

4

3 に答える 3

0

jQueryをまったく使用していますか？もしそうなら、あなたのための素晴らしい解決策があります！HTML ページの下部 (jQuery を含める場所の下) で、次のようなものを使用できます。

$(document).ready(function() {
  $("#portfolio").mouseover(function() {
    $("#img1").fadeTo(200, 1); 
    // The above means take 200ms to fade to an opacity of 1.0 (fully opaque).
    $("#img2").fadeTo(200,0);
    // The above says the same thing, but for fading out
  });
});

これを少しいじると、どちらが表示されているかに応じて前後に切り替えることができますが、それが一般的な考え方です。

そして出来上がり！あなたがJavaScriptの答えを探していることは知っていますが、jQueryはこのようなものに非常に役立ち、強くお勧めします.

于 2013-03-30T13:37:57.543 に答える