4 Replies - 2751 Views - Last Post: 11 July 2011 - 03:26 PM

#1 muffinman8641   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 121
  • Joined: 17-March 11

How to create 3-step button?

Posted 09 July 2011 - 01:58 PM

I drew 3 buttons: one for when it's left alone, one that's lit up for when you put your mouse on it, and one that's pressed for when you click it. How can I implement this into my website and make it a link?
Is This A Good Question/Topic? 0
  • +

Replies To: How to create 3-step button?

#2 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1651
  • View blog
  • Posts: 8,523
  • Joined: 07-September 06

Re: How to create 3-step button?

Posted 09 July 2011 - 02:47 PM

There are a number of ways to do this, here is one possible:
1: Create the CSS for your normal button state, this should have the background image set and everything.
2: Create a CSS class for the over and down states of the button, these should have any deltas from the initial (normal) state - such as background image and such.
3: Add a little Javascript for the onmouseover and onmousedown events which changes the button's class to the appropriate class name.
4: Add a little more Javascript for the onmouseout and onmouseup events which removes the class name from the button, thus putting it back to the normal state.

Hope that makes sense.
Was This Post Helpful? 1
  • +
  • -

#3 muffinman8641   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 121
  • Joined: 17-March 11

Re: How to create 3-step button?

Posted 09 July 2011 - 06:55 PM

Thanks BetaWar! I went with your #3 and #4 suggestions. Here's the final code that ended up working out:
<a href="http:/www.google.com">
    <img src="images/button.png" alt="A big red button should be here."
    vspace="64"
    onmouseover="this.src='images/button_highlighted.png'"
    onmouseout="this.src='images/button.png'"
    onmousedown="this.src='images/button_pressed.png'" />
</a>



I made it a link (to Google for example purposes). I used vspace and added 64 pixels because the images other than "button.png" have a glow around them and that one doesn't so it's a bit smaller to keep the actual button the same size.

I have a new issue -

As previously mentioned, the three images are two different sizes. I added vspace , but how can I make vspace 0 when I mouse over and click to avoid everything on the page moving because the image changes sizes?
Was This Post Helpful? 0
  • +
  • -

#4 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: How to create 3-step button?

Posted 11 July 2011 - 10:59 AM

Just a suggestion, you can use CSS to do this. Try taking a look at this:

HTML:
<a href="http:/www.google.com" class="button"></a>


CSS:
.button {
    background-image: url('images/button.png');
    width: Whatever you want the width to be;
}
.button:hover {
    background-image: url('images/button_highlighted.png');
}
.button:active {
    background-image: url('images/button_pressed.png');
}


Was This Post Helpful? 0
  • +
  • -

#5 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: How to create 3-step button?

Posted 11 July 2011 - 03:26 PM

Another way is to create an image file that is a combination of all three images. The top third of the image is the normal button, the middle third is the hover button, and the bottom third is the active button. I believe the CSS is something like this:

.buttonImg {
    background-image: url('images/button.png');
    background-position: 0px 0px;
}
.buttonImg:hover {
    background-position: 0px -20px;
}
.buttonImg:active {
    background-position: 0px -40px;
}



The advantage of this method is that when the user hovers over the button the image appears immediately, rather than the user having to wait for the onhover image to load.

This post has been edited by e_i_pi: 11 July 2011 - 03:27 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1