Javascript Help

iUnknown · 13-07-2009, 11:55 PM

I'll try and make this has informative and brief as possible...

I have links (<a href="#">) and I need it so that when the click is clicked (onClick="") it changes a CSS 'element''s value. So, when click, it changes the "background" of the div with the ID "banner". So in the CSS document I have:

Code:

#banner {
    background: url(images/banner.png);
    more css blah
}

Onclick of this particular link, I need it to dynamically become:

Code:

#banner {
    background: url(images/banner2.png);
    more css blah
}

Any help will be appreciated, thanks.

Johno · 14-07-2009, 12:02 AM

http://www.codingforums.com/showpost...51&postcount=2

Quick Google brought that up, should work.

iUnknown · 14-07-2009, 12:49 AM

Originally Posted by Johno!

http://www.codingforums.com/showpost...51&postcount=2

Quick Google brought that up, should work.

Thanks, but I've already tried that and couldn't get it to work.

Maybe I'm just being an idiot, but if it works I usually manage to get it to work, and I couldn't?

If a javascript coder can use the guide there (http://www.codingforums.com/showthread.php?t=122011) and get it to work in the way I need it, please let me know how you did it.

Or... any other suggestions?

Thanks very much.

Johno · 14-07-2009, 01:20 AM

Worked for me? Hope you can get it working

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>oh hay</title>
        
    <style type="text/css">
    .banner1 {
    background-color: aqua;
    width: 100px;
    height: 100px;
    }
    .banner2 {
    background-color: fuchsia;
    width: 100px;
    height: 100px;
    }
    </style>
    </head>
    
    <body>
    <div id="hello" class="banner1"></div>
    <a href="#hello" onclick="document.getElementById('hello').className ='banner2'">Hello</a>
    </body>
</html>

~~Blinger1~~ · 14-07-2009, 01:26 AM

Try this:

HTML Code:

<a href="#" onclick="document.getElementById('banner').style.backgroundImage='url(background2.jpg)';">click.</a>

BoyBetterKnow · 14-07-2009, 10:10 AM

jQuery outline selectors.

iUnknown · 14-07-2009, 10:58 AM

Originally Posted by Johno!

Worked for me? Hope you can get it working

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>oh hay</title>
        
    <style type="text/css">
    .banner1 {
    background-color: aqua;
    width: 100px;
    height: 100px;
    }
    .banner2 {
    background-color: fuchsia;
    width: 100px;
    height: 100px;
    }
    </style>
    </head>
    
    <body>
    <div id="hello" class="banner1"></div>
    <a href="#hello" onclick="document.getElementById('hello').className ='banner2'">Hello</a>
    </body>
</html>

Got that working now, thanks very much +rep. It doesn't look as good as I wanted, so I'm going to try and work out how to add a fade to the changeover now haha.

Any suggestions or help on ths would also be appreciated.

BoyBetterKnow · 14-07-2009, 11:01 AM

Originally Posted by iUnknown

Got that working now, thanks very much +rep. It doesn't look as good as I wanted, so I'm going to try and work out how to add a fade to the changeover now haha.

Any suggestions or help on ths would also be appreciated.

Use jQuery. You can do like css change then .fade('slow'); or whatever.

iUnknown · 14-07-2009, 11:11 AM

Originally Posted by BoyBetterKnow

Use jQuery. You can do like css change then .fade('slow'); or whatever.

I've got jquery now but I'm awful at javascript... I need a little bit more detailed advice on how to use it

Can I use jquery to add a fade to something like this?

Code:

onclick="document.getElementById('banner').className ='banner2'"

iUnknown · 14-07-2009, 11:33 AM

Can't edit, please merge my posts.

This is now my code:

Code:

function imgChange1() {
document.getElementById('banner').className ='banner1';
}

function imgChange2() {
document.getElementById('banner').className ='banner2';
}

function imgChange3() {
document.getElementById('banner').className ='banner3';
}

function imgChange4() {
document.getElementById('banner').className ='banner4';
}

function imgChange5() {
document.getElementById('banner').className ='banner5';
}

What can I add to the functions to make it do that with a fade?

Thanks.

Thread: Javascript Help

Thread Tools

Javascript Help

Posting Permissions