Clearing color on Mouse Out

**JNeal33** · 04-18-2010, 03:39 AM

As you hover over the menu/title tabs the selected colors change and reset like i want them to but when you completely move the mouse off the menu/title tabs (on to the white of the page where the text would be) the color of the last menu/title tab the mouse was on stays that color (red, yellow, or blue) instead of reseting to grey. You guys are the best and always find a solution. Here is my code: HTML, JavaScript, then CSS (in that order) Thank you guys, i would appreciate any tips or help..

Jake

p.s. you guys have already done some work in my code, if u could glance to see if i gave you guys the credit correctly

Code:

HTML CODE:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--
    JavaScript done by "http://www.dynamicdrive.com/ 
    04-14-2010, 11:35 AM
    author: vwphillips  "Senior Coder"
    -->
   <title>The 221B Blog</title>
   <link href="final.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="final.js"></script>
	
</head>

<body>
	<!-- Menu List -->
    <div id="page">
		
		<div id="menu1" class="menu">
         <a href="#">The Return of Sherlock Holmes</a> <!-- menu title tab #1 -->
		</div>
		<div id="menu1List" class="menuList"> <!-- menu list for title tab #1 -->
			<ul>
				<li class="listItem"><a href="#">The Empty House</a></li> 
				<li class="listItem"><a href="#">The Norwood Builder</a></li> 
				<li class="listItem"><a href="#">The Dancing Men</a></li> 
				<li class="listItem"><a href="#">The Solitary Cyclist</a></li> 
				<li class="listItem"><a href="#">The Priory School</a></li> 
				<li class="listItem"><a href="#">Black Peter</a></li>
			</ul>
		</div>
		
		<div id="menu2" class="menu">
			<a href="#">The Return of Sherlock Holmes</a> <!-- menu title tab #2 -->
		</div>
		<div id="menu2List" class="menuList"> <!-- menu list for title tab #2 -->
			<ul>
				<li class="listItem"><a href="#">The Empty House</a></li> 
				<li class="listItem"><a href="#">The Norwood Builder</a></li> 
				<li class="listItem"><a href="#">The Dancing Men</a></li> 
				<li class="listItem"><a href="#">The Solitary Cyclist</a></li> 
				<li class="listItem"><a href="#">The Priory School</a></li> 
			</ul>
		</div>
		
		<div id="menu3" class="menu">
			<a href="#">The Return of Sherlock Holmes</a> <!-- menu title tab #3 -->
		</div>
		<div id="menu3List" class="menuList"> <!-- menu list for title tab #3 -->
			<ul>
				<li class="listItem"><a href="#">The Empty House</a></li> 
				<li class="listItem"><a href="#">The Norwood Builder</a></li> 
				<li class="listItem"><a href="#">The Dancing Men</a></li> 
				<li class="listItem"><a href="#">The Solitary Cyclist</a></li> 
				<li class="listItem"><a href="#">The Priory School</a></li> 
			</ul>
		</div>		
	</div>

</body>
</html>

JavaScript Code

// script done by "http://www.dynamicdrive.com/ 
// 04-14-2010, 11:35 AM
// author: vwphillips  "Senior Coder"

window.onload = init;

var activeMenu = null;
var clipHgt = 0;
var timeID,timeID2;


function init() {
	var menus = new Array();
	var allElems = document.getElementsByTagName("*");
	
   for (var i = 0; i < allElems.length; i++) {
      if (allElems[i].className == "menu") menus.push(allElems[i]);
   }

   for (var obj,i = 0; i < menus.length; i++) {
      menus[i].onmouseover = changeMenu;
      menus[i].onmouseout = function(){ MseOut(); } 		// script done by "http://www.dynamicdrive.com/ author 04-14-2010, 11:35 AM vwphillips  Senior Coders
	  menus[i].onclick = closeOldMenu;
      obj=document.getElementById(menus[i].id+'List');		// script done by "http://www.dynamicdrive.com/"
      obj.onmouseout = function(){ MseOut(); }				// script done by "http://www.dynamicdrive.com/"
      obj.onmouseover = function(){ clearTimeout(timeID2);} // script done by "http://www.dynamicdrive.com/"
   }
}

function MseOut() {	// script done by "http://www.dynamicdrive.com/"
 if (activeMenu) {	// script done by "http://www.dynamicdrive.com/"
  timeID2 = setTimeout(function(){activeMenu.style.display = "none"; }, 200)  // script done by "http://www.dynamicdrive.com/"
 }
}


function changeMenu() {
   // this function changes the pull-down menu displayed in the document, and to change the color of the title
   
	clearInterval(timeID);	// script done by "http://www.dynamicdrive.com/"
	clearInterval(timeID2);	// script done by "http://www.dynamicdrive.com/"
	closeOldMenu();
	
	//finds the menu#list and send the list info to function rollDown()
    menuID = this.id + "List";
	colorID = this;	//getting the current "menu" that is being hovered
    activeMenu = document.getElementById(menuID);
    activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
    activeMenu.style.display = "block";
    timeID = setInterval("rollDown()", 1);

	var colorMenu = new Array(); //making a new array for the colors
	var allElems = document.getElementsByTagName("*");
	
    for (var i = 0; i < allElems.length; i++) {	//putting all the class names with menu "aka all my title tabs" in the colorMenu Array 
      if (allElems[i].className == "menu") colorMenu.push(allElems[i]);
    }
	
	if (colorID == colorMenu[0] && timeID > 0) { //if colorID "aka Menu" equals number in the colorMenu Array, it turns red
		colorMenu[1].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[2].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[0].style.backgroundColor = "red";
	}
	if (colorID == colorMenu[1] && timeID > 0) { //if colorID "aka Menu" equals number in the colorMenu Array, it turns yellow
		colorMenu[0].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[2].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[1].style.backgroundColor = "yellow";
	}
	if (colorID == colorMenu[2] && timeID > 0) { //if colorID "aka Menu" equals number in the colorMenu Array, it turns blue
		colorMenu[0].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[1].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[2].style.backgroundColor = "blue";
	}
	
	
}

// to simple close the any menu that's active
function closeOldMenu() {
   if (activeMenu) {
      clearInterval(timeID);
      activeMenu.style.display = "none";
      activeMenu = null;
   }
}

// controls the speed of the rolldown effect of the selected menu#List
function rollDown() {
   clipHgt = clipHgt + 10;
   if (clipHgt < 400) {
      activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
   } else {
      clearInterval(timeID);
      clipHgt = 0;
   }
}

CSS Code:

*                   	{padding: 0px; margin: 0px; line-height: 1.2}

body                {background-color: white; font-family: 'Trebuchet MS', Arial, Verdana, sans-serif; font-size: 12px;
			cursor:url(".cur");}

ul                  	{list-style-type: none}

ul a             	{color: black; text-decoration: none}

#page		{width: 1000px}



.menu               	{position:absolute; top: 0px; width: 140px; height: 35px; z-index: 3;
                     border: 1px solid black; color: black; background-color: rgb(212, 212, 212);
                     text-align: center}
				
.menu a             	{display: block; width: 140px; height: 35px; color: black; text-decoration: none}

.menu a:hover       {color: white; text-decoration: none}

#menu1	{left: 0px}
#menu2	{left: 141px}
#menu3	{left: 282px}


.menuList           {position: absolute; top: 36px; width: 140px; z-index: 2;
                     border: 1px solid black; display: none}
.listItem		{text-align: center}
.menuList a         {display: block; width: 132px}
.menuList a:hover   {color: white}

#menu1List  {left: 0px; background-color: red}
#menu2List  {left: 141px; background-color: yellow}
#menu3List  {left: 282px; background-color: blue}

**vwphillips** · 04-18-2010, 11:34 AM

Code:

window.onload = init;
var lst;
var activeMenu = null;
var clipHgt = 0;
var timeID,timeID2;


function init() {
	var menus = new Array();
	var allElems = document.getElementsByTagName("*");

   for (var i = 0; i < allElems.length; i++) {
      if (allElems[i].className == "menu") menus.push(allElems[i]);
   }

   for (var obj,i = 0; i < menus.length; i++) {
      menus[i].onmouseover = changeMenu;
      menus[i].onmouseout = function(){ MseOut(); } 		// script done by "http://www.dynamicdrive.com/ author 04-14-2010, 11:35 AM vwphillips  Senior Coders
	  menus[i].onclick = closeOldMenu;
      obj=document.getElementById(menus[i].id+'List');		// script done by "http://www.dynamicdrive.com/"
      obj.onmouseout = function(){ MseOut(); }				// script done by "http://www.dynamicdrive.com/"
      obj.onmouseover = function(){ clearTimeout(timeID2);} // script done by "http://www.dynamicdrive.com/"
   }
}

function MseOut() {	// script done by "http://www.dynamicdrive.com/"
 if (activeMenu) {	// script done by "http://www.dynamicdrive.com/"
  timeID2 = setTimeout(function(){
  activeMenu.style.display = "none";
  lst.style.color='black';
  lst.style.backgroundColor='rgb(212, 212, 212)';
  }, 200);  // script done by "http://www.dynamicdrive.com/"
 }
}


function changeMenu() {
   // this function changes the pull-down menu displayed in the document, and to change the color of the title

	clearInterval(timeID);	// script done by "http://www.dynamicdrive.com/"
	clearInterval(timeID2);	// script done by "http://www.dynamicdrive.com/"
	closeOldMenu();
    lst=this;
	//finds the menu#list and send the list info to function rollDown()
    menuID = this.id + "List";
	colorID = this;	//getting the current "menu" that is being hovered
    activeMenu = document.getElementById(menuID);
    activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
    activeMenu.style.display = "block";
    timeID = setInterval("rollDown()", 1);

	var colorMenu = new Array(); //making a new array for the colors
	var allElems = document.getElementsByTagName("*");

    for (var i = 0; i < allElems.length; i++) {	//putting all the class names with menu "aka all my title tabs" in the colorMenu Array
      if (allElems[i].className == "menu") colorMenu.push(allElems[i]);
    }

	if (colorID == colorMenu[0] && timeID > 0) { //if colorID "aka Menu" equals number in the colorMenu Array, it turns red
		colorMenu[1].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[2].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[0].style.backgroundColor = "red";
	}
	if (colorID == colorMenu[1] && timeID > 0) { //if colorID "aka Menu" equals number in the colorMenu Array, it turns yellow
		colorMenu[0].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[2].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[1].style.backgroundColor = "yellow";
	}
	if (colorID == colorMenu[2] && timeID > 0) { //if colorID "aka Menu" equals number in the colorMenu Array, it turns blue
		colorMenu[0].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[1].style.backgroundColor = "rgb(212, 212, 212)";
		colorMenu[2].style.backgroundColor = "blue";
	}


}

// to simple close the any menu that's active
function closeOldMenu() {
   if (activeMenu) {
      clearInterval(timeID);
      activeMenu.style.display = "none";
      activeMenu = null;
   }
}

// controls the speed of the rolldown effect of the selected menu#List
function rollDown() {
   clipHgt = clipHgt + 10;
   if (clipHgt < 400) {
      activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
   } else {
      clearInterval(timeID);
      clipHgt = 0;
   }
}

Thread: Clearing color on Mouse Out

Thread Tools

Search Thread

Clearing color on Mouse Out

Bookmarks

Bookmarks

Posting Permissions