1

画像のハイパーリンクがあります。そして、リンクのステータスが訪問済みになったときに画像を変更したいと思います。やり方を教えてもらえますか？できればJavaScriptを使用せずに。

私は次のことをしようとしています：両方の画像を単一の共通画像に結合しました。コードは次のとおりです。

<a href="#" class="mylink">
   <img src="common_image.jpg" width="240px" height="240px"/>
</a>

そして私のスタイル：

    .mylink {
        width: 120px;
        height: 240px;
        display: block;
        overflow: hidden;
    }

    .mylink:visited img {
        margin-left: -120px;
    }
4

4 に答える 4

2

srcCSSを介して画像の属性を変更することはできません。何らかの理由でimg-elementそれがである必要がある場合は、変更のためにJavaScriptで立ち往生しています。

もう1つの方法は、img-elementを削除し、代わりに背景のあるアンカーのみを使用することです。-propertyは、backgroundCSSを介して制御できます。

これは、のためにそれを行う方法の簡単な例:hoverですが、あなたの場合、代わり:hoverに同じように簡単に変更することができます:visited。

sprite.pngというファイルのデフォルト画像の下に「visited」画像を配置すると、コードは次のようになります。

a.mylink {
    width: 120px;
    height: 240px;
    display: block;
    overflow: hidden;
    background: url(sprite.png) no-repeat;
}

a:visited.mylink {
    background-position: 0 -240px;
}

ここでライブをご覧ください：http：//jsfiddle.net/5ZzkY/（わかりやすくするために画像の代わりにbackground-colorを使用しています）

于 2012-04-16T09:45:17.607 に答える
1

背景画像の：visited疑似セレクターでの再生は機能しません。主要なブラウザには、スニッフィングの悪用を防ぐためのセキュリティ制限があります。このStackOverflowの質問を参照してください

于 2012-10-29T10:52:40.227 に答える
0

あなたは画像を削除し、cssを介して背景を制御することができます

.mylink {
    background:url('myimagepath-01.jpg') top left no-repeat;
    width: 120px;
    height: 240px;
    display: block;
    overflow: hidden;
}

.mylink:visited {
    background:url('myimagepath-02.jpg') top left no-repeat;  
}
于 2012-04-16T09:35:04.253 に答える
0

あなたはこれを試すことができます：

HTML：

<a href="http://google.com" class="image">Link</a>​

CSS：

.image {
    background: transparent url('http://javascript.info/files/tutorial/browser/events/rollover-sprite/button.png') no-repeat top left;
    width: 186px;
    height: 52px;
    display: block;
    text-indent: -9999px;
}
.image:hover {
    background-position: 0 -52px;
}
.image:visited {
    background-position: 0 -104px;
}

スプライトを使用する場合は、画像をcss背景として設定し、background-positionプロパティを使用してその位置を移動する必要があります。このフィドルで例を見ることができます。

于 2012-04-16T09:49:25.500 に答える