Blake O'Hare
Log In     Register     Nerdity Test     Forum
Nerd Paradise
Author: Blake

Fish Eye Menu in JavaScript

When I posted yesterday about how to find mouse coordinates, I was actually working on this and figured the intermediate step could have been useful to many people. So, using the mouse coordinates within a div filled with images, I scale the images based on an equation I created in terms of the x-coordinate of the cursor within the div tag. The div is 700 pixels, has 9 icons in it and has 2 invisible spacer images on the ends that are 50 pixels wide. The code of actual interest is this:

function setScale(xpos)
	var locations = [0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5];
	for (var i = 0; i < 9; ++i)
		// There are a few methods to my madness here, but this is mostly just 
		// calibration of trial and error to get it to "feel right"
		var value = Math.floor(25 * Math.max(0,2 - Math.abs(((xpos - 104) * 1.2445
			+ 37) / 700 * 9 - locations[i])) + 51);
		var image = document.getElementById("icon" + (i + 1)); = value + "px"; = value + "px";

The x-coordinate is, of course, retrieved using the code from yesterday's post. For the full code, simply look at the well-formated source for this page.

What are you doing surfing the internet all alone? You can find some friends in our Forum.
Other Articles
Learn a variety of Shakespearean Insults
Learn ancient world history in 5 minutes
Learn how to solve a Megaminx
Learn how to compile your code in a language that isn't traditionally compiled
Learn how to make switch statements in Python
14 Vigeo 14:5
© 2014 Nerd Paradise