-3

ユーザーが画像にカーソルを合わせると、新しい画像（スプライト画像の新しいセクション）が表示されるようにする次のコードがあります。クリック時に3番目の画像を表示したい。1.これを最も効率的な方法で行っていますか？2.クリックした画像を表示するようにコーディングするにはどうすればよいですか？

HTML：

<a href="<?php echo base_url('home/linkedin_login')?>" ><img style = "border-radius: 5px;" class="signin-all" src="assets/images/header/blank.png"></a>

CSS：

    [class^="signin-"] {
  display: inline-block;

  vertical-align: text-top;
  background-image: url('../images/signin_sprite.jpg');

  background-repeat: no-repeat;
  *margin-right: .3em;
}
[class^="signin-"]:last-child {
  *margin-left: 0;
}
.signin-all{
background-position: 0px 0px;
   width: 132px;
  height: 37px;
  position: absolute;
}
.signin-all:hover{
background-position: 0px -34px;
   width: 132px;
  height: 34px;
  position: absolute;
}
4

1 に答える 1

1

これを解決するにはJavaScriptが必要です。

<a href="javascript:void(0)" onclick="changeImage()">
    <img style = "border-radius: 5px;" class="signin-all" src="assets/images/header/blank.png" id="image">
</a>

<script>
    function changeImage() {
        document.getElementById("image").src="newImageSource";
    }
</script>
于 2012-07-27T02:08:49.093 に答える