CODEWITHSUNDEEP
javascripthtml
MoneyMike
MoneyMike

Reputation: 23

Have an image change on click

So I have a button on my website that is an image, and I am trying to make it so that when you click the image of the button, it will change to an image of a different button that give it the effect of the button being pushed. After looking around on the internet, this is what I have came up with:

<p style="text-align: center;">
  <span style="font-family: arial, helvetica, sans-serif;">
    <a href="/index.php/about-us/about-cmi">
      <img alt="" onclick="this.src='/images/yootheme/Button_Template_Long_CMI_Click copy.png';" src="/images/yootheme/Button_Template_Long_CMI copy.png" style="width: 144px; height: 35px;" />
    </a>
   </span>
</p>

I had this originally:

<p style="text-align: center;">
  <span style="font-family: arial, helvetica, sans-serif;">
    <a href="/index.php/about-us/about-cmi">
      <img alt="" src="/images/yootheme/Button_Template_Long_CMI copy.png" onclick="this.src='/images/yootheme/Button_Template_Long_CMI_Click copy.png';" style="width: 144px; height: 35px;" />
    </a>
  </span>
</p>

But when I saved it, it switched the original source and the onclick source. My problem is that when I click the image of the button, the image does change like it is supposed to, but for whatever reason the image that appears is the broken image, and my image paths are all correct because when I type that into my browser, it goes to the correct image.

Upvotes: 0

Views: 92

Answers (3)

jacmkno
jacmkno

Reputation: 1317

Usually this is done with css. This is how it works: http://jsfiddle.net/2wS89/

<p class="center">
    <span class="btcont"><a class="btn" href="/index.php/about-us/about-cmi"></a></span>
</p>

<style>
    A.btn{ width: 144px; height: 35px; display:block;
        background: url(someimage.jpg) center center no-repeat;
    }
    A.btn:active{
        background: url(someotherimage.jpg) center center no-repeat;
    }
    .btcont {font-family: arial, helvetica, sans-serif;}
    .center {text-align: center;}
</style>

If you want it to change permanently you have to add more css and a little js: http://jsfiddle.net/2wS89/2/ (keep in mind that the "return false;" disables the link just for the show)

Upvotes: 1

Ryan Brodie
Ryan Brodie

Reputation: 6620

You don't need JS, a pure CSS implementation will work just fine. Use the :active selector:

button {
    background: #000;
}

button:active {
    background: #fff;
}

Here's some documentation: http://www.w3schools.com/cssref/sel_active.asp

I hope this is what you're after :)

Upvotes: 0

AMADANON Inc.
AMADANON Inc.

Reputation: 5929

Try loading both images in advance, one on top of the other, then you can make the top image visible/invisible. This also allows easier testing, and someone on a slow link doesn't have to wait for the second image to load when the button is pressed.

Upvotes: 0

Related Questions