SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

    Code:
    <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. #2
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code 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));
     
      }


    Code HTML4Strict:
    <!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. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code HTML4Strict:
    <!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>


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
  •