SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Toggle Onclick?

    Hi, I do not know anything about Javascript (barely anything). I have this expanding menu that I need to change out the background images on the two main links (Menu 1 and Menu 2).

    There would need to be an off, hover and clicked state for each button... It could either change out the background css, or it could just use image tags (there doesn't need to be text because they are both just image buttons).

    Here is what I have in my main html:
    Code:
    <html>
    <head>
    <title></title>
    <script language="JavaScript" type="text/JavaScript">
    		<!--
    		menu_status = new Array();
    
    		function showHide(theid){
        			if (document.getElementById) {
        			var switch_id = document.getElementById(theid);
    
            	if(menu_status[theid] != 'show') {
               		switch_id.className = 'show';
               		menu_status[theid] = 'show';
            	}else{
               		switch_id.className = 'hide';
               		menu_status[theid] = 'hide';
            		}
        		    }
    		}
    
    		//-->
    
    		var last_expanded = '';
    
    		function showHide(id)
    		{
    		var obj = document.getElementById(id);
    
    		var status = obj.className;
    
    		if (status == 'hide') {
    
    		if (last_expanded != '') {
    		var last_obj = document.getElementById(last_expanded);
    		last_obj.className = 'hide';
    		}
    
    		obj.className = 'show';
    
    		last_expanded = id;
    		} else {
    		obj.className = 'hide';
    		}
    		}
    		</script>
    </head>
    <body onload="DoInit();">
    <div id="menus">
      			<a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    			    <div id="mymenu1" class="hide">
            		      <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link One here</span></div>
            		      <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Two here</span></div>
            		      <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Three here</span></div>
            		      <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Four here</span></div>
        			    </div>
    			<a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    			    <div id="mymenu2" class="hide">
            		        <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link One here</span></div>
            		        <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Two here</span></div>
            		        <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Three here</span></div>
            		        <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Four here</span></div>
        			    </div>
    </body>
    </html>
    and here is the javascript...

    Code:
    /* Expanding Menu */
    function switchit(list){
    var listElementStyle=document.getElementById(list).style;
    if (listElementStyle.display=="none"){
    listElementStyle.display="block";
    }
    else {
    listElementStyle.display="none";
    }
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easiest way would be to have 3 separate style definitions for the links (each with theere own background image, or using a sprite) and then toggle a class to each link on click to reference the 3rd style

    e.g:

    a.myLink {

    }

    a.myLink: hover {

    }

    a.myLink.active {

    }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •