View Full Version : Need help with writing Javascript code for enlarging and image by using Keyboard Comm

07-12-2007, 09: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:
-&nbsp;<a href="javascript:void(0);" onclick="ndeSetTextSize('decr'); return false;" title="Reduce text">Reduce</a><br>

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

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

Any help would be greatly appreciated.


07-13-2007, 12:36 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<script language="JavaScript" type="text/javascript">
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')
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(){
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){



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



07-13-2007, 02: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:

07-13-2007, 04:42 PM
Tis much easier to code than to explain/