Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Location
    Morgantown, West Virginia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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>
    -&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.

    Thanks.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!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>
    Last edited by vwphillips; 07-12-2007 at 11:38 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Location
    Morgantown, West Virginia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Many Thanks!

    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!

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Tis much easier to code than to explain/
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •