CODEWITHSUNDEEP
javascriptjqueryhtmlcss
soniccool
soniccool

Reputation: 6058

Onclick CSS alternative

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;
}​

Upvotes: 0

Views: 1900

Answers (3)

ckozl
ckozl

Reputation: 6761

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

Upvotes: 1

sabithpocker
sabithpocker

Reputation: 15566

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.

Upvotes: 1

sandeep
sandeep

Reputation: 92793

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/

Upvotes: 2

Related Questions