0

What I'm trying to achieve is basicly having navigation elements like

link1 link2 link3

and below them there's an image

[x] <- defaultImage

今私が欲しいのは、link1にカーソルを合わせると画像がimage1に変わり、link2にカーソルを合わせると画像がimage2に変わり、...そしてonMouseOutにすると画像がdefaultImageに戻ることです

私はこれを使っていました

function mouseOverImage(elm) {
var id = document.getElementById("catPic");
img.style.width = elm.getAttribute('data-cat-width');
img.style.height = elm.getAttribute('data-cat-height');
}
function mouseOutImage() {
var id = document.getElementById("catPic");
img.style.width = img.getAttribute('data-default-width');
img.style.height = img.getAttribute('data-default-height');
}

+

<ul>
<li>
<a href="link.htm" data-cat-image="images/img11.jpg"
data-cat-width="280px"
data-cat-height="336px" onmouseover="mouseOverImage(this)"
onmouseout="mouseOutImage()">link1</a>
</li>

<li><a href="link2.htm" data-cat-image="images/img22.jpg"
data-cat-width="280px"
data-cat-height="436px" onmouseover="mouseOverImage(this)"
onmouseout="mouseOutImage()">link2</a></li>

+

<div class="floatimg">
<img src="" width="0" height="0" alt="" id="catPic"
data-default-image="images/default.jpg"
data-default-width="0px" data-default-height="40px">
</div>

そしてそれはうまくいきます

しかし

今、私はアプローチを変更したいと思います。onMouseOver を介して変更を呼び出すたびに異なる画像を使用する代わりに、Spritesを使用したいと考えています。

そして、私はそれにどのようにアプローチすればよいか、本当に苦労していますか？

いくつかの画像から画像スプライトを生成し、次のようなコードを持っています

.sprite-1, .sprite-2, .sprite-3, .sprite-4,
{ display: block; background: url('tmp.png') no-repeat; }
.sprite-3 { background-position: -0px -0px; width: 280px; height: 441px; }
.sprite-4 { background-position: -288px -0px; width: 280px; height: 420px; }
.sprite-5 { background-position: -576px -0px; width: 280px; height: 420px; }

私はスクリプトについて何も知らないので、これを全くの初心者の質問として扱ってください。あなたが持っていて答えるなら、コードをどこに置くべきか教えてください

助けてくれてありがとう！

4

2 に答える 2

1

まず、 HTMLElementからクラスを追加および削除する関数をいくつか作成します。このためのElement.classNameプロパティに興味があるでしょう..

function hasClass(e, c) {
    return (' ' + e.className + ' ').indexOf(' ' + c + ' ') !== -1; // in list
}

function addClass(e, c) {
    if (!hasClass(e, c)) e.className += ' ' + c; // add if not in list
    return e;
}

function removeClass(e, c) {
    var i, s = ' ' + e.className + ' ';
    c = ' ' + c + ' ';
    while (-1 !== (i = s.indexOf(c))) { // while class in list
        s = s.slice(0, i) + ' ' + s.slice(i + c.length); // replace with space
    }
    e.className = s.slice(1, -1); // set
    return e;
}

次に、好みの方法でリスナーをアタッチします。たとえば、mouseoverとmouseoutの関数を作成する場合は、既存の方法と同様のパターンを使用できます..

function chooseImage(x) {
    addClass(
        document.getElementById("catPic"),
        'sprite-'+x
    );
    // unchooseImage('default here');
}
function unchooseImage(x) {
    // chooseImage('default here');
    removeClass(
        document.getElementById("catPic"),
        'sprite-'+x
    );
}

使用できる別のプロパティelement.classListがありますが、これはまだすべてのブラウザーで完全にサポートされているわけではありません (IE 10 での基本的なサポートのみ)。

以下は.sprite-1と.sprite-2です。

<a href="example.htm"
   onmouseover="chooseImage(1)"
   onmouseout="unchooseImage(1)">link1</a>
<a href="example.htm"
   onmouseover="chooseImage(2)"
   onmouseout="unchooseImage(2)">link2</a>
于 2013-07-05T19:26:05.353 に答える
0

誰かがそれを必要とする場合に備えて、要素が同じ親を持つ場合、これは純粋な CSS で実現できます。~または兄弟セレクターを使用します。それがどのように機能するかについての詳細な説明は、ここにあります。

一般的な兄弟コンビネータ セレクタは、先ほど見た隣接兄弟コンビネータ セレクタと非常によく似ています。違いは、選択される要素が最初の要素のすぐ後に続く必要はなく、その後のどこにでも表示できることです。

トリックを啓発するためにjsfiddleを作成しました。 https://jsfiddle.net/cw7dww1/

于 2016-06-28T22:34:24.333 に答える