2012-07-27 104 views
-3

我有以下代碼,允許用戶將鼠標懸停在圖像上,它會顯示一個新圖像(以及精靈圖像的新部分)。我希望它在點擊時顯示第三個圖像。我在做這個最有效的方法嗎? 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; 
} 
+1

丹尼爾,你應該接受你的一些問題的答案。 – scottheckel 2012-07-27 02:10:19

+0

這是什麼意思? – 2012-07-27 02:13:37

+0

閱讀常見問題解答:http://stackoverflow.com/faq#howtoask – 2012-07-27 02:14:59

回答

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> 
+0

嗯,這對我不起作用我試過了:與javascript:(在腳本標記)function changeImage(){ document.getElementById(「image 「)的.src =」 資產/上傳/ 13431777491_2144482096395_2018984525_n.jpg「; } – 2012-07-27 02:18:01

+0

我添加了一個「a」標籤,以便您可以點擊。立即嘗試。 – 2012-07-27 02:21:43

+0

工作過,非常感謝你! – 2012-07-27 02:49:35