Onclick CSS alternative

Question

Right now im using css to create an onclick image change. The problem is on my website when i use it, there is a pause for the image to load. I was wondering if there is a javascript or jquery alternative that doesnt require for the image to be loaded when i click it, making it white in the back for a few seconds after i click it until it loads.

Right now this is what im using.Example Here

<input type="submit" class="create" style="font: 24px Arial, Helvetica, sans-serif; width: 681px;" value="CREATE ">

.create {
    margin: 0 auto;
    height: 62px;
    width: 681px;
    color:#FFF;
    background-image:url(http://i.imgur.com/tWGcy.jpg);
    outline: 0;
    border: 0;
    margin-top: 7px;
    font-family: Arial, Helvetica, sans-serif;
}
.create:active {
    margin: 0 auto;
    height: 62px;
    width: 681px;
    color:#FFF;
    background-image:url(http://i.imgur.com/r9d3C.jpg);
    outline: 0;
    border: 0;
    margin-top: 7px;
    font-size: 40px;
    font-family: Arial, Helvetica, sans-serif;
}

sandeep · Accepted Answer · 2012-07-06 06:36:40Z

2

There no need for any JS. You can use css sprites for this & it's a better solution.

Read this article for more http://css-tricks.com/css-sprites/

answered Jul 6, 2012 at 6:36

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

soniccool Over a year ago

Interesting i have heard about this.

ckozl · Accepted Answer · 2012-07-06 06:40:42Z

1

what you need to do is splice those image into one big image, then just change the left or top like this: DEMO

CSS:

button {
   background:url(http://anton.shevchuk.name/wp-content/uploads/2009/07/button-sprite-result.png); 
   border:0;
   padding:0;   
   width:310px;
   height:80px;
}

button:hover {
   background-position:0 -70px;   
}

button:active {
   background-position:0 -140px;   
}

HTML:

<button></button>

it's a technique called spriting, hope this helps -ck

answered Jul 6, 2012 at 6:40

ckozl

6,7613 gold badges35 silver badges51 bronze badges

4 Comments

soniccool Over a year ago

Yeah i am looking into it now actually.

ckozl Over a year ago

yeah sorry, already was 80% done making demo when i saw someone beat me to the punch...

soniccool Over a year ago

Im using a sprite generating site to make them for me :) But the code will help a million.

ckozl Over a year ago

@soniccool glad to hear it, as a general rule of thumb, when doing GUI stuff, do as much of it in CSS as possible :-)

sabithpocker · Accepted Answer · 2012-07-06 06:40:33Z

There are a number of ways to solve your issue,

Your situation argues for a solution using css image sprite.

Sprite up your image with both hover and normal background in same image, then change just background position on hover, this way no new image needs to be changed.

css-tricks tutorial You dont need all that stuff for your simple sprite but its worth reading

Another solution will be to preload images with javascript.

var img = new Image();
img.src = "http://i.imgur.com/r9d3C.jpg";

Using image sprites looks the cleaner solution, but not applicable to all conditions though.

Collectives™ on Stack Overflow

Onclick CSS alternative

3 Answers 3

1 Comment

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Related