3

私は新しい Web 開発者なので、ベスト プラクティスがわかりません。

ホバー時に変更したい画像がページにいくつかあります。2つの解決策を見つけましたが、どちらが優れているかわかりません。

HTMLの最初のもの：

<td>
  <a href="getContent('unlight');">
    <img src="res/images/unlight/p_first.png"
         onmouseover="this.src='res/images/light/p_first.png'" alt="First"
         onmouseout="this.src='res/images/unlight/p_first.png'"/>
    <br>first
  </a>
</td>

そして、CSS を使用した 2 つ目:

<td id="first" onclick="getContent('first');">First</td>

#first{
    background: no-repeat url("./images/unlight/p_first.png");
    width: 78px;
    height: 78px;
    }

#first:hover {
    background: no-repeat url("./images/light/p_first.png");
    width: 78px;
    height: 78px;
}

すべての img に対して、2 つのパスを記述する必要があります。

これは自動化できますか？プロフェッショナルで普遍的な方法は？

4

4 に答える 4

1

使用は2番目のものを使用できますが、htmlは正しい値でなければなりません。値だけtdでは十分ではありません。

 <div id="first" >First</div>​

ドームはこちらhttp://jsfiddle.net/4qQPL/1/

于 2012-11-08T11:55:56.267 に答える
1

これは、 jQueryに触れてみる絶好の機会かもしれません。onmouseover基本的に、およびonmouseout属性で現在行っていることと同様に、目的を達成するためのより動的な方法を作成できます。さらに、jQuery を使用すると、この種のロジックを HTML マークアップから取り出して、完全に別の.jsファイルにすることができます。

jQuery を組み込むと、次のようなスクリプトを作成できます。（何が起こっているのかを理解できるように、コメントを多用してみました：

$(document).ready(function() {
    // Any `img` tag with a class of `some-class` (or whatever you want) will get this behavior on hover
    $("img.some-class").hover(
        // This first handler is for the `onmouseover` state
        function() {
            // Storing a query for `this` in a variable only runs the query once. Otherwise, you'd run it twice in the line below
            var $this = $(this);
            // Replace `/light/` in the image URL with `/unlight/`
            $this.attr("src", $this.replace("/light/", "unlight"));
        },
        // This second handler is for the `onmouseout` state
        // Its logic is similar to the first handler, so I'll omit comments explaining it
        function() {
            var $this = $(this);
            $this.attr("src", $this.replace("/unlight/", "light"));
        }
    );
});

lightこれで、各イメージのおよびunlightバージョンをlightおよびunlightサブフォルダーに保存できるようになります。両方の画像のファイル名が同じであることを確認してください。次に、この動作をさせたいタグを追加class="some-class"します。img

余分な読書:

于 2012-11-08T12:03:24.200 に答える
0

これには明らかにいくつかの方法がありますが、ここでは 1 つの方法を示します。

2 つの画像を 1 つの画像に結合し、その画像を背景画像として使用し、ホバー/フォーカス時に画像の背景位置を変更して 2 番目の画像を表示します。

また、表形式のデータを表示している場合を除き、Web サイトで表を使用するべきではありません。DIV タグ、SECTION タグなどに固執します。

例：

<a id="image1" class="hover-image" href="#">First</a>

// set a class which contains global settings for all relevant images.

a.hover-image {
 width:XXXpx;
 height:XXXpx;
 background-repeat:no-repeat;
 background-position:0 0;
}

a.hover-image:hover, a.hover-image:focus {
 background-position:XXXpx XXXpx;
}


// set the background image path based on a unique ID.

a#image1 {
 background-image:url(XXX.png);
}
于 2012-11-08T11:51:49.007 に答える
-1

CSS 

.myButtonLink {
    display: block;
    width: 100px;
    height: 100px;
    background: url('/path/to/myImage.png') bottom;
    text-indent: -99999px;
}
.myButtonLink:hover {
    background-position: 0 0;
}

HTML

<a class="myButtonLink" href="#LinkURL">Leaf</a>
于 2012-11-08T11:44:20.513 に答える