arrow key navigation?

AliasJaneDoe · #1 11-07-2009, 02:16 AM

I have an image gallery that uses mouseover thumbnails in tables. When rolled over with the pointer, they display a separate large version of the image. What I'm wondering is if it's possible to navigate with the arrow keys as an alternative to moving your mouse pointer?

wbport · #2 11-07-2009, 06:47 PM

The following function from a Sukoku Solver might give you some ideas:

Code:

function gridKey(oInput, evt)
{
	var e = evt ? evt : window.event;
	// check for arrow key
	
	var dx = 0; 
	var dy = 0;
	
	switch ( e.keyCode )
	{
		case 37: dx--; break; // left arrow
		case 38: dy--; break; // up arrow
		case 39: dx++; break; // right arrow
		case 40: dy++; break; // down arrow
		case 13: dy++, dx=100; break; // return key
		default: return;
	}
	var sID = oInput.id.substring(7);
	var a = sID.split('_');
	var y = parseInt(a[0]);
	var x = parseInt(a[1]);
	
	if (dx == 100) x = 0; else x += dx;
	y += dy;
	var oInput2 = document.getElementById('sudoku_' + y + '_' + x);
	if ( oInput2 ) oInput2.focus();
}

AliasJaneDoe · #3 11-07-2009, 08:43 PM

Yes, that's it exactly! Although I can't seem to be able to figure out how to make it work with my gallery. Here's my code. It changes the main image in the above frame. Any suggestions?

Code:

<html><head>


<script language="JavaScript">


if (navigator.appVersion.indexOf("2.") != -1){

        check = false;

        }

if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){

        check = false;

        }

else {

        check = true;

        }

image1= new Image();

image1.src = "thumbs/cell1off.jpg";

image1on = new Image();

image1on.src = "thumbs/cell1.jpg";

image1alt = new Image();

image1alt.src = "images/main1.jpg";

image1alton = new Image();

image1alton.src = "images/main1.jpg";


image2= new Image();

image2.src = "thumbs/cell2off.jpg";

image2on = new Image();

image2on.src = "thumbs/cell2.jpg";

image2alt = new Image();

image2alt.src = "images/main2.jpg";

image2alton = new Image();

image2alton.src = "images/main2.jpg";


image3= new Image();

image3.src = "thumbs/cell3off.jpg";

image3on = new Image();

image3on.src = "thumbs/cell3.jpg";

image3alt = new Image();

image3alt.src = "images/main3.jpg";

image3alton = new Image();

image3alton.src = "images/main3.jpg";


image4= new Image();

image4.src = "thumbs/cell4off.jpg";

image4on = new Image();

image4on.src = "thumbs/cell4.jpg";

image4alt = new Image();

image4alt.src = "images/main4.jpg";

image4alton = new Image();

image4alton.src = "images/main4.jpg";


image5= new Image();

image5.src = "thumbs/cell5off.jpg";

image5on = new Image();

image5on.src = "thumbs/cell5.jpg";

image5alt = new Image();

image5alt.src = "images/main5.jpg";

image5alton = new Image();

image5alton.src = "thumbs/main5.jpg";


image6= new Image();

image6.src = "thumbs/cell6off.jpg";

image6on = new Image();

image6on.src = "thumbs/cell6.jpg";

image6alt = new Image();

image6alt.src = "images/main6.jpg";

image6alton = new Image();

image6alton.src = "images/main6.jpg";


image7= new Image();

image7.src = "thumbs/cell7off.jpg";

image7on = new Image();

image7on.src = "thumbs/cell7.jpg";

image7alt = new Image();

image7alt.src = "images/main7.jpg";

image7alton = new Image();

image7alton.src = "images/main7.jpg";


function imageon(name)   {

	document[name].src = eval(name + "on.src");

	parent.parent.image.document["altimg"].src = eval(name + "alton.src");

}

function imageoff(name)  {

	document[name].src = eval(name + ".src");

	parent.parent.image.document["altimg"].src = eval(name + "alt.src");

}

NN3 = true;



function on(name)  {

	if (check == true){

		imageon(name);}

}

function off(name)  {

	if (check == true){

		imageoff(name);}

}

// -->

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>



<body leftmargin="0" topmargin="0" bgcolor="#FFFFFF" marginheight="0" marginwidth="0">

<HR NOSHADE SIZE=1 width=100%>      



<TABLE cellSpacing=0 cellPadding=0 border=0>
    <TR>


	<TD width=3> <IMG height=25 src="images/white.jpg" width=3> </TD>
<TD> 
<img onclick="doSomething();" style="cursor:pointer;" onmouseover="on('image1');" onmouseout="off('image1')" src="thumbs/cell1off.jpg"  border="0" name="image1"></a>
<BR>

<a target="_blank" href="pages/2.html" onmouseover="on('image2');" onmouseout="off('image2')"><img src="thumbs/cell2off.jpg" target="image" border="0" name="image2"></a>
</TD>


<TD width=3> <IMG height=25 src="images/white.jpg" width=3> </TD>
<TD> 
<img onclick="doSomething();" style="cursor:pointer;" onmouseover="on('image3');" onmouseout="off('image3')" src="thumbs/cell3off.jpg"  border="0" name="image3"></a>
<BR>

<a target="image" href="YOUR LINK" onmouseover="on('image4');" onmouseout="off('image4')"><img src="thumbs/cell4off.jpg"  border="0" name="image4"></a>
</TD>


<TD width=3> <IMG height=25 src="images/white.jpg" width=3> </TD>
<TD>  
<a target="image" href="YOUR LINK" onmouseover="on('image6');" onmouseout="off('image6')"><img src="thumbs/cell6off.jpg"  border="0" name="image6"></a>
<BR>

<a target="image" href="YOUR LINK" onmouseover="on('image7');" onmouseout="off('image7')"><img src="thumbs/cell7off.jpg"  border="0" name="image7"></a>
</TD>

		
<TD width=3> <IMG height=25 src="images/white.jpg" width=3> </TD>

</TR></TABLE>


</body></html>

AliasJaneDoe · #4 11-07-2009, 08:52 PM

I just realized that the arrow key navigation is the least of my problems. My rollovers don't work in IE! They're fine in Firefox and Netscape. Any idea why?

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)