Help w/a code: mouse-over & on-click effects

JavaScript
1

I am working on implementing a gallery into my website with categories that collapse/expand the set of images within those categories.

i figured out mostly everything i need except i can’t get the BUTTONS to behave the way that I want.

I’m working with the following images:

arrow1:
arrow2:
arrow3:

in general, I want “arrow1” to change to “arrow2” whenever you hover a mouse over it, and back to “arrow1” when the mouse is moves away. (which is simple by itself)

the complicated part that I can’t figure out, is what happens when you CLICK the button. I want the image to change to “arrow3” when it is clicked (because the content expands), and to STAY at that image until it’s clicked again, at which point it should behave as what I started with. The problem is, I can get the arrow to change on click no problem, but once the mouse is moved away, the “onMouseOut” effect changes it back to “arrow1”.

this is the code I’m working with, hope someone can help


<SCRIPT LANGUAGE = "JavaScript">
<!--
first=new Image
first.src="http://www.clearnonsense.com/images/arrow1.png"

second=new Image
second.src="http://www.clearnonsense.com/images/arrow2.png"
// --></SCRIPT>
</HEAD>

<table border="0">
<tr>
<td>
<a href="javascript:void(0)" OnMouseOut="monitor.src=first.src" OnMouseOver="monitor.src=second.src" onMouseUp="clickdown('pic1')"><img src="http://www.clearnonsense.com/images/arrow1.png" border="0" name="monitor" onclick="showhide('div1',this,'http://www.clearnonsense.com/images/arrow1.png','http://www.clearnonsense.com/images/arrow3.png');"/></a>
</td>
</tr>
<tr>
<td valign="top" width="15">
<div id="div1" style="display: none;">imgset1</div>
</td>
</tr>
</table>
2

Something like this?

I’ve converted your arrows into a sprite 9 x 27pixels. That way you can use background-position instead.

getElementsByClassName doesn’t work in older IE browsers, so you would possibly need to use a fallback script.

Not sure if it’s the best way, but I’m using a span element absolutely positioned for the arrows.

Arrow Menu

  var toggle = function(el, className) {
	
	var classMatch = new RegExp('(\\\\s?' + className + ')\\\\b'),
	    classToMatch = el.className;
	
	el.className = (classMatch.test(classToMatch)) 
	  ? classToMatch.replace(classMatch, '')
	  : classToMatch + ' ' + className;
	
  };
  
  var toggleName = 'clicked',
      subMenus = document.getElementsByClassName('subMenu'),
      len = subMenus.length,
	  i = 0;
	  
  for (; i < len ; i++) {
  
    subMenus[i].onclick = (function(ix) {
	
      return function(){
	  
	    toggle(subMenus[ix], toggleName);
		
	  }
	
	}(i));
  
  }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arrow Menu</title>
<style type ='text/css'>
a {
  text-decoration: none;
  text-align: center;
  color: #000;
}

ul{
  list-style: none;
  float: left;
}

ul li {
  position:relative;
  float: left;
  border: 1px solid black;
  border-right: 0;
}

ul li.last { border-right: 1px solid black; }

ul li a {
  display: block;
  width: 100px;
  height: 30px;
  background: #ccc;
  line-height: 26px;
}

ul li a span {  
  position: absolute;
  top: 10px; right: 5px;
  width: 9px;
  height: 9px;
  background: transparent url('arrows.png') center left no-repeat; 
}

ul li a:hover span { background-position: top left; }

ul li a:active span, ul#nav li.clicked a span {

  background-position: bottom left;
  
}
</style>
</head>
<body>
<ul id = 'nav'>
  <li class = 'subMenu'><a href = '#'>menu1<span></span></a></li>
  <li><a href = '#'>menu2</a></li>
  <li><a href = '#'>menu3</a></li>
  <li class = 'subMenu last'><a href = '#'>menu4<span></span></a></li>
</ul>

<script type = 'text/javascript'>
  
  var toggle = function(el, className) {
	
	var classMatch = new RegExp('(\\\\s?' + className + ')\\\\b'),
	    classToMatch = el.className;
	
	el.className = (classMatch.test(classToMatch)) 
	  ? classToMatch.replace(classMatch, '')
	  : classToMatch + ' ' + className;
	
  };
  
  var toggleName = 'clicked',
      subMenus = document.getElementsByClassName('subMenu'),
      len = subMenus.length,
	  i = 0;
	  
  for (; i < len ; i++) {
  
    subMenus[i].onclick = (function(ix) {
	
      return function(){
	  
	    toggle(subMenus[ix], toggleName);
		
	  }
	
	}(i));
  
  }

</script>
</body>
</html>
3

mmm, not exactly what I was looking for, I don’t need the menu to be written with the script for the arrows, I just want the mouse over and on click effects to work for the button alone, nothing else. So, just the button, and the functions

4

Might be getting the wrong end of the stick, but here goes.

First off, ideally you want to try and keep your javascript unobtrusive and out of your html. ‘Tag soup’ I think the term is.

CSS can handle your mouseover/mouseout. Use :hover instead.

The following isn’t particularly well scripted but without having an idea of the layout it’s hard to know the best approach. I would suggest having a look at Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style

Just Button

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arrow Menu</title>
<style type ='text/css'>
#arrows {

  width: 9px;
  height: 9px;
  border: 0;
  background: transparent url('arrows.png') center left no-repeat;
  
}

/* Mouse over handled here */
#arrows:hover {
  background-position: top left;
}

/* Style for 'clicked' class to show clicked arrow */
#arrows:active, #arrows.clicked {
  background-position: bottom left; 
}

#imageSet {
 
  margin: 20px 0 0 -9999px;
  width: 100px;
  height: 100px;
  color: #ccc;
  background: #222;
  border: 1px solid black;
  
}

/* Style for 'show' class to show imageSet */
#imageSet.show {
  margin-left: 0px;
}

</style>
</head>
<body>

<button id = 'arrows'></button>
<div id="imageSet">imgset1</div>


<script type = 'text/javascript'>
  
  var toggle = function(el, className) {
	
	var classMatch = new RegExp('(\\\\s?' + className + ')\\\\b'),
	    classToMatch = el.className;
	
	el.className = (classMatch.test(classToMatch)) 
	  ? classToMatch.replace(classMatch, '')
	  : classToMatch + ' ' + className;
	
  };
      // This bit is for the button
  var toggleButton = 'clicked',
      button = document.getElementById('arrows'),
	  
	  // This bit is for the imageSet div element  
	  toggleImageSet = 'show',
	  imageSet = document.getElementById('imageSet');
	  
  button.onclick = function(){
    
	toggle(button, toggleButton); // first toggle the 'clicked' class on the button
	toggle(imageSet, toggleImageSet); // second toggle the 'show' class on the imageSet
	
  };

</script>
</body>
</html>