CODEWITHSUNDEEP
javascripthtmlcssbackground-image
Stephen
Stephen

Reputation: 4811

Change background image on click

I'm want to change the background image of my horizontal menu when the user clicks on a link. I'm just having a bit of trouble, my code is as follows:

<div class="grid_16" id="menu">
  <ul id='menuTab' class='sqglDropMenu'>
      <li><a href='Home' onclick='changeIt();'>Home</a></li>
      <li><a href='profile' onclick='changeIt();'>Profile</a></li>
      <li><a href='products' onclick='changeIt();'>Products</a></li>
      <li><a href='samples' onclick='changeIt();'>Samples</a></li>
      <li><a href='contact' onclick='changeIt();'>Contact</a></li>
  </ul>
</div>

My JS looks like this: 

function changeIt(){    
  document.getElementById('menuTab').style.backgroundImage = "url(../images/tab_off.png)";
    }

My CSS, where the initial background image is set:

.sqglDropMenu li {float: left; list-style: none; text-align:left; margin-left:5px; position: relative; display: block; line-height: 30px;}
.sqglDropMenu li a {display: block; white-space: nowrap; float: left; text-align:center; font-size: 1.3em; color: #fff;  font-weight:bold; padding-top:5px; margin-top:-1px; background:url(../images/menu_tab.png) no-repeat; width:182px; height:58px;}
.sqglDropMenu li ul {float:left; position: absolute; visibility: hidden; z-index:1000; margin: 0; margin-top:50px; * margin-top: 0px; clear:both; margin-left:-475px; background:url(../images/menuback.png) no-repeat; width:944px; height:60px}
.sqglDropMenu li ul li{float: left; position: relative; clear: left; border-width:0px; display: inline; margin: 0;}
.sqglDropMenu li ul li a{margin-left:20px; border-width:0px; text-align:left; font: 9pt Arial; adding:5px 12px; z-index:100; width: 100px; background:none;}
.sqglDropMenu li ul li a:hover{border-width:0px; background:none;}

Any help appreciated....regards, Stephen

Upvotes: 2

Views: 4885

Answers (4)

kandpal
kandpal

Reputation: 36

Try this code 

<script type="text/javascript">
$('a').on('click',function(e){
    var var1 = this.href.split('='+img+')');
    e.preventDefault();
    switch(var1[1]){
    case 'Home':
      img = 'first.jpg';
      break;
    case 'About':
      img = 'second.jpg';
      break;
   } 
   $('body').css({backgroundImage:'url(image/'+img+')'});
});

Upvotes: 1

Blender
Blender

Reputation: 298076

Try setting the background property:

function changeIt() {
  document.getElementById('menuTab').style.background = "url(../images/tab_off.png)";
}

It could be that the <li>s are preventing the background from being visible. Can you apply this style directly into the stylesheet and see what happens?

Upvotes: 0

Cata
Cata

Reputation: 11211

when you click on the link, you are redirected to the selected page so your function will be useless, you can do what you want either using

  1. php by getting the current page and set the class of the anchor that sets the background you want or
  2. javascript using it the same as php :D, you can do this by doing something like this:

var path = window.location.pathname; var page = path.substring(path.lastIndexOf('/') + 1); if (page == 'currentpage.html'){ document.write('CurrentPage') } else { document.write('CurrentPage') }

I hope this helps you

Upvotes: 2

Ry-
Ry-

Reputation: 224859

Your browser will get redirected to the value in the href attribute, which is the name of the link for you. Use changeIt(); return false in the onclick handlers instead.

Upvotes: 0

Related Questions