Member Avatar for tanderson001

Hi there, hoping you can help me with a conundrum I have...

What ive made so far is a page header image with 4 buttons to the side of that, which when clicked will change to a diff image (sprite image, triggered by some javascript I found on the net to change the class of the buttons so that the image changes - and it looks toggled).

This works fine and if a 'toggled' button is clicked again then it will delete the class the javascript adds and 'untoggle' it.

The final aim of this is when this page is first loaded then none of these buttons are toggled and a default image in the header is shown, but when one is selected then I want the header image to change to one that is associated with the button that is pressed - I was able to achieve this with an onmouseclick action on the button to change the header image, but if the user then clicked the button again (untoggled it), how would I then be able to change the header image back to the default one?

Could this be achieved by some javascript that changed the class of the header image to the one associated with the button pressed, and then if its pressed again then it clears the header image class?

Not that great with javascript to be honest, any of you guys have some advice? Maybe there are some easier methods ive missed?

Below is the code I have so far, many thanks in advance!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script language="javascript" src="java.js"></script>

</head>

<body>

<div id="style">
                <div id="styleimage"><img src="images/header.jpg" id="image" width="610" height="229" /></div>
                <div id="stylenav">
        
        <ul>
            <li id="style1"><a href="#"></a></li>
            <li id="style2"><a href="#"></a></li>
            <li id="style3"><a href="#"></a></li>
            <li id="style4"><a href="#"></a></li>

        </ul> 

        
      </div>
        </div>
</body>
</html>
#style {width:880px; height:229px;}

#styleimage {width:610px; height:229px; float:left;}

#stylenav {width:270px; height:229px; float:left;}

#stylenav ul {list-style: none; padding: 0; margin: 0;}

#stylenav li {float: left;}

#stylenav li a {         
        height:55px;
        float: right; 
        display: block;
        text-decoration: none;
        text-align: center;
}

#stylenav li a:hover {background-position:-270px 0px}

#stylenav li.selected a {background-position:-270px 0 !important}
window.onload=function () { setStyles(); };  
function setStyles() {  
 ids = new Array ('style1','style2','style3','style4');  
 for (i=0;i<ids.length;i++) {  
  document.getElementById(ids[i]).className='';  
  document.getElementById(ids[i]).onclick=function() { return Cngclass(this); }  
 }  
}  
function Cngclass(obj){  
         var currObj; 
 for (i=0;i<ids.length;i++) { 
  currObj = document.getElementById(ids[i]); 
  if (obj.id == currObj.id) {  
  currObj.className=(currObj.className=='')?'selected':'';  
  } 
  else { currObj.className=''; } 
 } 
 return false;  
}
  • 3 Contributors
  • 3 Replies
  • 101 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by tanderson001
Member Avatar for Taywin

You need to get rid of your ternary assignment in order to accomplish what you want.

// @param obj an object for changing its class name (style)
function Cngclass(obj, act){
  var currObj;
  for (var i=0;i<ids.length;i++) {  // should always use 'var' for safer reason
    currObj = document.getElementById(ids[i]);
    if (obj.id == currObj.id) {
      if (currObj.className=="") {
        currObj.className = "selected";
      }
      else {
        currObj.className = "";
        // !!! then swap the default header back !!!
      }
    } 
    else { currObj.className=''; } 
  } 
 return false;  
}

I believe you have to put your script at the bottom of the page because the 'style#' does not exist until your HTML part comes first.

Member Avatar for fxm

You were on the right track.

This

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <meta http-equiv="Content-Type" content=
    "text/html; charset=us-ascii">
    <title>
      Untitled Document
    </title>
    <style type="text/css">

	#style {width:880px; height:229px;}

	#styleimage {width:610px; height:229px; float:left;}

	#stylenav {width:270px; height:229px; float:left;}

	#stylenav ul {list-style: none; padding: 0; margin: 0;}

	#stylenav li {float: left;}

	#stylenav li a {         
        height:55px;
        float: right; 
        display: block;
        text-decoration: none;
        text-align: center;
	}

	#stylenav li a:hover {background-position:-270px 0px}

	#stylenav li.selected a {color:green; background-position:-270px 0 !important}

    </style>
    <script type="text/javascript">

        function setStyles() {
            var cLIs = document.getElementById('stylenav').getElementsByTagName('li')
            for (var j = cLIs.length, i = 0; i < j; i++) {
                cLIs[i].className = '';
                cLIs[i].onclick = function(){Cngclass(this)}
            }

        }

        function Cngclass(that) {
            var cLIs = document.getElementById('stylenav').getElementsByTagName('li')
            for (var j = cLIs.length, i = 0; i < j; i++) {
                if (cLIs[i] === that) { 
                    cLIs[i].className = cLIs[i].className == '' ? 'selected' : ''; 
                } else {
                    cLIs[i].className = '';
                }
            }
        }

    </script>
  </head>
  <body onload="setStyles()">

    <div id="style">
      <div id="styleimage">
        <img src="images/header.jpg" id="image" width="610" height=
        "229" name="image">
      </div>
      <div id="stylenav">
        <ul>
          <li>
            <a href="#">one</a>
          </li>
          <li>
            <a href="#">two</a>
          </li>
          <li>
            <a href="#">three</a>
          </li>
          <li>
            <a href="#">four</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

corrects some problems and simplifies things a bit.

Note: I added 'color:green' to the style to make the action of this toy visible.

Member Avatar for tanderson001

Thanks for the replies, I will give these a go. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.