Need help with writing Javascript code for enlarging and image by using Keyboard Comm

Risikio

07-12-2007, 08:28 PM

Hello everyone,

I am a Javascript newbie. I have been given the task of putting an art gallery on our website. I have successfully used CSS to enlarge the images (and provide a caption with additional information) in the gallery when the user hovers over it with their mouse. The problem is that many (75% or more) of our website visitors are individuals with disabilities. Some are not able to use a mouse. I have not found a way to code a keyboard command in CSS, so I am thinking I may have to write a Javascript to enlarge the images for our users that do not utilize a mouse.

Our previous webmaster used the following code to allow users with visual impairments to change the text size. I was hoping to somehow edit that script to do the same with the images, but as a newbie, I don't know if this is possible. It also appears to me that the script still requires a mouse.

Change Text Size:
<br>
- <a href="javascript:void(0);" onclick="ndeSetTextSize('decr'); return false;" title="Reduce text">Reduce</a><br>

- <a href="javascript:void(0);" onclick="ndeSetTextSize('incr'); return false;" title="Enlarge text">Enlarge</a><br>

- <a href="javascript:void(0);" onclick="ndeSetTextSize('reset'); return false;" title="Reset text">Reset</a>

Any help would be greatly appreciated.

Thanks.

vwphillips

07-12-2007, 11:36 PM

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var zxcSpd=10,zxcMin=100,zxcMax=500;
// both must be alpha or numeric
var zxcKeyUp=38;
var zxcKeyDown=40

function zxcKeyPress(zxce){
var zxckc;
if (zxce.which){ zxckc=zxce.which; }
else { zxckc=event.keyCode; }
var zxcchar=String.fromCharCode(zxckc);
var zxcimg=document.getElementById('Test')
clearTimeout(zxcTO);
zxcdir=(isNaN(zxcKeyUp))?zxcchar:zxckc;
zxcImgZoom(zxcimg,(isNaN(zxcKeyUp))?zxcchar:zxckc);
}
var zxcTO;

function zxcImgZoom(zxcimg,zxckc){
if (zxcimg.width>zxcMin&&zxcimg.width<zxcMax){
if (zxckc==zxcKeyUp) zxcimg.width++;
if (zxckc==zxcKeyDown) zxcimg.width--;
zxcTO=setTimeout(function(){ zxcImgZoom(zxcimg,zxckc); },zxcSpd)
}
}

function zxcImgZoomCancel(){
clearTimeout(zxcTO);
}
var zxcEvt=0;

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

zxcAddEvt(document,'zxcKeyPress','keydown');
zxcAddEvt(document,'zxcImgZoomCancel','keyup');

/*]]>*/
</script></head>

<body>
<img id="Test" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" />

</body>

</html>

Risikio

07-13-2007, 01:46 PM

Wow! That was a lot more than what I was expecting in an answer. Thank you so much for the code. I figured I would get some advice on how to write it, but I never expected the entire code. This is awesome!:thumbsup:

vwphillips

07-13-2007, 03:42 PM

Tis much easier to code than to explain/