CODEWITHSUNDEEP
htmlcssimagebackgroundbackground-image
python_rookie
python_rookie

Reputation: 35

Change Background Image on NavBar Click

I have to admit I'm very new to this, but I'm building a website based on a template am just about done except for one thing! I'm trying to get the background to change to a different image when a user clicks on a nav bar item and a different part of the site pops up.

If it's helpful, this is the website: www.pitchadvisor.com

Currently, my nav bar links are set up as follows:

<a href="#!/page_about"><span></span>What</a></li>

I tried the following change but it didn't work:

<a href="#!/page_about" onclick="document.getElementById('test').style.backgroundImage='url(http://www.pitchadvisor.com/images/bg2.jpg)'; return false;" >

Any help would be greatly appreciated!!

Thanks!

Upvotes: 0

Views: 1496

Answers (2)

user1120369
user1120369

Reputation:

Its not working because, your background is set in html not css, heres what i came up with to possibly fix it:

Change line 78 of the html from

<div id="bgStretch"><img src="http://pitchadvisor.com/images/bg.jpg" alt=""></div>

to

<div id="bgStretch"><img id='bgimage' src="http://pitchadvisor.com/images/bg.jpg" alt=""></div>

and change your javascript from

<a href="#!/page_about" onclick="document.getElementById('test').style.backgroundImage='url(http://www.pitchadvisor.com/images/bg2.jpg)'; return false;" >

to

<a href="#!/page_about" onclick="document.getElementById('bgimage').setAttribute('src', 'http://www.pitchadvisor.com/images/bg2.jpg');" >

Let me know if this works for you, or anything else i can do.

Upvotes: 2

alexp
alexp

Reputation: 797

Will this help?

    <a href="#" onclick="javascript:document.getElementById('asd')
.style.backgroundImage='url(http://www.pitchadvisor.com/images/bg2.jpg)';"> 
Click Me </a>

    <div id="asd" style="margin-top:50px; width: 100px; height: 100px; border: 1px dashed green;"></div>

Try it here: http://jsfiddle.net/dTAW3/

Upvotes: 0

Related Questions