Javascript Menus: Part 3, mouse control

Imgchange function

Now that all variables, menu bars and image names are retrieved, the function can be written for drawing images in the different mouse states, for example over, clicked and out. The variables "imghold" and "context" are those required for getting the canvas and the drawing methods. We first create Image instances for the three mouse states, img1, img2 and img3. We then create an instance of the Fader function, which executes the animation such as fade in and out of images. Subfunctions of the Fader function are used later. Depending on the type of menu, variables for text and color are called. For the menu, which we presently discuss, the variables are null, since all states have their own images including text. Prior to the Imgchange function there is a getter - setter function "fadspeed" for setting the speed for animation. The variable, which needs to be filled with a value is "speedlog".

// getter - setter for the fade speed
var fadspeed = 
{
  get latest () 
  {
    if (speedlog.length == 0)
    {
     	return undefined;
    }
    else
    {
     	return speedlog;
    }
  }
}

// actual function containing all the mouse events
var Imgchange = function (imgholdname, contextname, imgone, imgtwo, 
imgthree, igwidth, igheight, mep=null, mepcol=null)
{
	var imghold = imgholdname;
	var context = contextname;
	
	// width and height of individual bars
	var imgw = igwidth;
	var imgh = igheight;
	
	// retrieving the value for the fade animation
	if (speedlog == undefined)
	{
		alert("speedlog is undefined");
	}
	else
	{
		var fsp = fadspeed.latest;
	}
	
	// images variables
	var img1 = new Image();
	img1.src = imgone;
	var img2 = new Image();
	img2.src = imgtwo;
	var img3 = new Image();
	img3.src = imgthree;
	var fad = new Fader();
	
	// variables menp and mepcolor are set depending on changes in the text color
	if (mep != null)
	{
		var menp = mep;
		var meporcol = menp.style.color;
		var mepcolor = mepcol;
	}
	else
	{
		menp = null;
		mepcolor = null;
	}
    

The following code deals with the mouse events. The code is within an if statement, where menu bars with the name "idpage" are excluded, since they should stay in the clicked position. The functions encoded within the mousevents are those dealing with canvas drawings. "setvarsclear" sends variables necessary to clear an image, whereas "setvarsdraw" sends variables for the new image. The actual image clearing and drawing in combination with a fading event is coded in the "startfadein" function. In the "onmouseover" function there is a setTimeout built in. This is in order to let the "onmouseout" event of the previous bar finish, when the user moves very fast from one bar to the next. I am not discussing the mouse event functions further. You find the code for these functions in the js library under fading.js.

	// clearing the canvas
	context.clearRect(0, 0, imgw, imgh);
	
	if (imgholdname.getAttribute("name") != "idpage")
	{
		// mouse functions
		imghold.onmouseout = function()
		{
			if (menp != null)
			{
				menp.style.color = meporcol;
			}
		
			// setting variables for clearing canvas
    		fad.setvarsclear (context, 0, 0, imgw, imgh);
    	
    		// setting variables for drawing new image
    		fad.setvarsdraw (img3, 0, 0, imgw, imgh);
    	
    		// executing fading in new image
    		fad.startfadein (context, 1, fsp, true);
		}
	
		imghold.onmouseup = function()
		{
    		fad.setvarsclear (context, 0, 0, imgw, imgh);
    		fad.setvarsdraw (img3, 0, 0, imgw, imgh);
    		fad.startfadein (context, 1, fsp, true);
		}
	
		imghold.onmouseover = function()
		{
			// delaying the mouse over effect, so mouse up and out can finish
    		function delay()
    		{
    			if (menp != null)
				{
    				menp.style.color = mepcolor;
    			}
    			fad.setvarsclear (context, 0, 0, imgw, imgh);
    			fad.setvarsdraw (img2, 0, 0, imgw, imgh);
    			fad.startfadein (context, 1, fsp, true);
    		}
    		setTimeout(delay, 100);
		}
	
		imghold.onmousedown = function()
		{       	
    		fad.setvarsclear (context, 0, 0, imgw, imgh);
    		fad.setvarsdraw (img1, 0, 0, imgw, imgh);
    		fad.startfadein (context, 1, fsp, true);
		}
	}
}
	

In the next section I will present the second menu type, where text is separate from the bar images.