Setting a CSS gradient in javascript?

Question

so I've been trying to set a gradient with javascript so that it has a mouse over effect, but I've had no luck and cannot get it to work, here is my javascript.

function mouseOVER(x)
{
x.backgroundImage="-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));";
}

function mouseOFF(x)
{
x.backgroundImage="-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #BABABA));";

}

I've been using jsFiddle to test things, so here is mine for this.

If you want mouseOver style change, try to use CSS :hover pseudoclass and there add gradient background — Setthase
– Setthase, Commented Aug 13, 2012 at 22:46
Tamlyn, I also intended for it to change the text, but I've made that work in javascript, so should the text and gradient be done separately? — George Sumpster
– George Sumpster, Commented Aug 13, 2012 at 22:48
i'd also suggest you to use css :hover and only if it is necessary (and only then) use jquery 1.8 for that case because it adds prefixes for different browsers since 1.8 for css3 features ;) — r3bel
– r3bel, Commented Aug 13, 2012 at 22:49
@GeorgeSumpster Use CSS always when posible, bacause you can have adventages of browser GPU rendering. It much faster than DOM manipulating — Setthase
– Setthase, Commented Aug 13, 2012 at 22:50

Idrizi.A · Accepted Answer · 2012-08-13 23:11:45Z

Try somethink like this, with CSS only

CSS

#home{
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #BABABA));
    width:100px;
    height:45px;
    text-align:center;
    border-radius:10px;
    position:relative;
    top:15px;
    left:15px;
}
#home:hover{
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));
}
#homenav{
    font-family:Arial, Helvetica, sans-serif;
    text-decoration: none;
    color:#000000;
    position:relative;
    top:12.5px;
}

DEMO http://jsfiddle.net/enve/ZauwA/11/

To change your text on mouseover use this code

HTML

<nav>
    <div id="home">
    <a href="home.html" id="homenav" onmouseover="changeText()" onmouseout="returnText()">HOME</a>
    </div>
</nav>

<script>
function changeText()
{
document.getElementById("homenav").innerHTML='Welcome'
}
function returnText()
{
document.getElementById("homenav").innerHTML='Home'
}
</script>

FULL DEMO http://jsfiddle.net/enve/ZauwA/19/

hugo der hungrige · Accepted Answer · 2012-08-13 22:59:39Z

3

With jQuery this works:

$('#block').css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))" 
});

You also need to apply the styles for other non-webkit browsers.

Dont know why youre Fiddle doesnt work. The Console tells me that youre functions are not defined.

Why are you trying to do this? If not necessary i would definteley suggest the CSS-way mentioned above.

answered Aug 13, 2012 at 22:59

hugo der hungrige

13k9 gold badges60 silver badges86 bronze badges

3 Comments

George Sumpster Over a year ago

I was also going to have the text change, bur I guess having them separate also works. I need to figure out my functions being defined, I have trouble with them all the time v.v

hugo der hungrige Over a year ago

It seems like you have to declare the functions before they're called. You could add them in a <script>-Tag into the header.

Oleg Over a year ago

+1, there is no need for jQuery though

Oleg · Accepted Answer · 2012-08-13 23:39:09Z

1

No need to use jQuery, vanilla JS is fine. You're simply missing a correct style property reference:

x.backgroundImage='...'; //no such property
x.style.backgroundImage='...'; //works correctly

Working sample (requires a webkit browser obviously)

That being said, you should really use pure CSS and rely on :hover dynamic pseudo-class:

#home {/*gradient 1*/}
#home:hover {/*gradient 2*/}

answered Aug 13, 2012 at 23:39

Oleg

25.1k8 gold badges64 silver badges94 bronze badges

1 Comment

hugo der hungrige Over a year ago

+1 for the correct solution! Was not sure about the right JavaScript Syntax for backgroundImage as i forgot most of it using jQuery so much :P

Rodik · Accepted Answer · 2012-08-13 22:48:43Z

0

Would you be open for a pure CSS solution?

if so, add this:

#homenav:hover{
    -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));
}

answered Aug 13, 2012 at 22:48

Rodik

4,10228 silver badges49 bronze badges

3 Comments

Jeffrey Sweeney Over a year ago

You probably should also provide a solution in JS, to answer the OP. Frankly, I don't even know what the problem is.

Rodik Over a year ago

Apparently, he accepted a pure CSS answer by Enve, so that wasn't the case.

George Sumpster Over a year ago

Yeah, I was not aware that CSS was the best option, thank you though Rodnik.

Collectives™ on Stack Overflow

Setting a CSS gradient in javascript?

4 Answers 4

Comments

3 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related