www.webdeveloper.com
Results 1 to 11 of 11

Thread: keyboard event

  1. #1
    Join Date
    Feb 2009
    Posts
    8

    keyboard event

    Hi,everybody. Now i having a problem on keyboard event. I'm using table(3 * 3) in my website. I want to use keyboard arrow key to control the table. Inside of the tables is difference html. when i press arrow the next col/row. I had half of the coding correct. Can some1 help to solve.. Sorry to trouble u guys. Thank alot. here is my code..
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>~Welcome to our WebPage~</title>

    <style type="text/css">
    body {
    background-image: url("g6lt01.gif");
    }
    .style1 {
    font-family: "Monotype Corsiva";
    font-weight: bold;
    font-size: 24px;
    }
    </style>

    </head>

    <body>
    <div align="center" class="style1">
    <p><marquee>Welcome to our WebPage </marquee></p>
    <p>&nbsp;</p>
    </div>

    <table width="586" height="367" border="1" align="center">
    <SCRIPT>
    function checkArrows (field, evt) {
    var keyCode =
    document.layers ? evt.which :
    document.all ? event.keyCode :
    document.getElementById ? evt.keyCode : 0;
    if (keyCode == 39)
    document.onkeypress (MoveRight);
    else if (keyCode == 40)
    document.onkeypress (MoveDown);
    else if (keyCode == 38)
    document.onkeypress (MoveUp);
    else if (keyCode == 37)
    document.onkeypress (MoveLeft);
    return true;

    }
    </SCRIPT>

    <tr>
    <td><a href="Rates.jsp" target="_blank"><img src="Rates.JPG" width="311" height="316" alt="Rates"/></a></td>
    <td><a href="Acc.jsp" target="_blank"><img src="Acc.JPG" width="311" height="316" alt="homepage"/></a></td>
    <td><a href="Layout.jsp" target="_blank"><img src="Layout.JPG" width="311" height="316" alt="Layout"/></a></td>
    </tr>
    <tr>
    <td><a href="Events.jsp" target="_blank"><img src="Events.JPG" width="311" height="316" alt="Events"/></a></td>
    <td><a href="homepage.jsp" target="_blank"><img src="homepage.JPG" width="311" height="316" alt="homepage"/></a></td>
    <td><a href="Enqires.jsp" target="_blank"><img src="Enqires.JPG" width="311" height="316" alt="Enqires"/></a></td>
    </tr>
    <tr>
    <td><a href="Bars.jsp" target="_blank"><img src="Bars.JPG" width="311" height="316" alt="Bars"/></a></td>
    <td><a href="Facilities.jsp" target="_blank"><img src="Facilities.JPG" width="311" height="316" alt="Facilities"/></a></td>
    <td><a href="Time.jsp" target="_blank"><img src="Time.JPG" width="311" height="316" alt="Time"/></a></td>
    </tr>

    <tr>
    <td><a href="alarms.jsp" target="_blank"><img src="alarms.JPG" width="311" height="316" alt="Bars"/></a></td>
    <td></td>
    <td></td>
    </tr>
    </table>

    <embed src="kiss_the_rain.mp3" autostart=true hidden=true></embed>
    <a href="lol.jsp">lo</a>
    </body>
    </html>

  2. #2
    Join Date
    Oct 2008
    Posts
    349
    You are missing the following code, all of which must be created in order for what you said to work:

    * Mechanism to translate keystroke information to "cursor" position
    * Mechanism to track the "cursor" position
    * Mechanism to activate content of the current cell
    * Mechanism to indicate to user where the cursor is

    If all those are to be coded from scratch, then your request is way too complicated for a forum such as this.

    There may be libraries/sample code somewhere that would do what you requested, but I don't know of it. You should try google it.

  3. #3
    Join Date
    Dec 2008
    Posts
    488
    You can't use onkeypress with the arrow keys. You must use onkeydown. Also, you can't watch for an event within the condition you want to check. But do remember that people often use the arrow keys to make corrections and it might become frustrating for someone who doesn't use the mouse to move around in forms. You might just try using the Tab Indexes. There is no programming involved and is easy to use. Regardless, I wrote up a quick snippet for you.

    Javasript:

    Code:
    <script type="text/javascript">
    /* Compliments of James.  Have fun. */
    
    //set the Min and Max numbers on the cell IDs, for example,
    //if your table is 2 columns wide and 3 rows tall, you could
    //use these numbers: X for columns, Y for rows.
    //BE SURE to use name the cells accordingly, for example,
    //column-row, where the first column, first row would be
    //cell "1-1" and set that in the id="1-1" property in the
    //HTML
    
    var minX=1;
    var maxX=3;
    var minY=1;
    var maxY=3;
    
    //Declare variables
    
    var newCell_X;
    var newCell_Y;
    var newCell;
    var currCell_X;
    var currCell_Y;
    
    //These functions use the "1-2" or "2-3" naming convention
    //to change the position of the cells.  It uses parseInt()
    //to change the numbers from a string to an Integer.  Then
    //it names the new cell and sends it to the focus() function
    //below.
    
    function moveUp(currCell){
        currCell_X=parseInt(currCell.charAt(0));
        currCell_Y=parseInt(currCell.charAt(2));
        newCell_Y=currCell_Y-1;
        if(newCell_Y<minY) newCell_Y=minY;
        newCell=currCell_X+"-"+newCell_Y;
        CellFocus(newCell);
    }
    
    function moveDown(currCell){
        currCell_X=parseInt(currCell.charAt(0));
        currCell_Y=parseInt(currCell.charAt(2));
        newCell_Y=currCell_Y+1;
        if(newCell_Y>maxY) newCell_Y=maxY;
        newCell=currCell_X+"-"+newCell_Y;
        CellFocus(newCell);
    }
    
    function moveLeft(currCell){
        currCell_X=parseInt(currCell.charAt(0));
        currCell_Y=parseInt(currCell.charAt(2));
        newCell_X=currCell_X-1;
        if(newCell_X<minX) newCell_X=minX;
        newCell=newCell_X+"-"+currCell_Y;
        CellFocus(newCell);
    }
    
    function moveRight(currCell){
        currCell_X=parseInt(currCell.charAt(0));
        currCell_Y=parseInt(currCell.charAt(2));
        newCell_X=currCell_X+1;
        if(newCell_X>maxX) newCell_X=maxX;
        newCell=newCell_X+"-"+currCell_Y;
        CellFocus(newCell);
    }
    
    //This function receives the new cell ID from the move
    //function and focuses on that cell depending on the browser.
    //Almost all browsers use the document.getElementById() method,
    //but some older browsers will not.
    
    function CellFocus(cell){
           if(document.getElementById){
            document.getElementById(cell).focus();
        }else if(document.all){
            document.all[cell].focus();
        }else if(document.layers){
            document.layers[cell].focus();
        }
    }
    
    //Check the arrow that is pressed and take the
    //appropriate action:
    
    function checkArrow(e,elementId){
        if(e.keyCode==38){
            moveUp(elementId);
        }else if(e.keyCode==40){
            moveDown(elementId);
        }else if(e.keyCode==37){
            moveLeft(elementId);
        }else if(e.keyCode==39){
            moveRight(elementId);
        }
    }
    </script>
    HTML:
    Code:
    <!-- You can enter as many input cells as you want, but be sure to change your min an max at the top of the javascript.
    If you name your first cell with "0-0", make your minX and minY both 0, or if you use "1-1", do the same.  You can do the
    same thing in a table or whatever. -->
    
    <input type="text" id="1-1" name="1-1" onkeydown="checkArrow(event,this.id)" /><input type="text" id="2-1" name="2-1" onkeydown="checkArrow(event,this.id)" /><input type="text" id="3-1" name="3-1" onkeydown="checkArrow(event,this.id)" /><br />
    <input type="text" id="1-2" name="1-2" onkeydown="checkArrow(event,this.id)" /><input type="text" id="2-2" name="2-2" onkeydown="checkArrow(event,this.id)" /><input type="text" id="3-2" name="3-2" onkeydown="checkArrow(event,this.id)" /><br />
    <input type="text" id="1-3" name="1-3" onkeydown="checkArrow(event,this.id)" /><input type="text" id="2-3" name="2-3" onkeydown="checkArrow(event,this.id)" /><input type="text" id="3-3" name="3-3" onkeydown="checkArrow(event,this.id)" />
    There you go. If you have any questions, let me know!
    Last edited by jamesbcox1980; 02-04-2009 at 04:37 PM. Reason: Sorry, I edited again. I made it work for 3 *3 so you don't have to change much.

  4. #4
    Join Date
    Feb 2009
    Posts
    8

    Smile

    omg , u r awesome ...thx for for being so nice to help me with the coding, and i manage to edit it with image pic rather than cursor...


    i really appreciated your help and may god bless you...
    once again , thx u very much

  5. #5
    Join Date
    Dec 2008
    Posts
    488

    Update

    No problem at all! I remember when I was learning javascript and how much trouble I had finding answers that fit my specific problems. I'm always glad to help!

    PS, I forgot to add one little thing: Some older browsers may not like the event.keyCode object, so I wanted to update the checkArrow() function. So, where it was:

    Code:
    function checkArrow(e,elementId){
        if(e.keyCode==38){
            moveUp(elementId);
        }else if(e.keyCode==40){
            moveDown(elementId);
        }else if(e.keyCode==37){
            moveLeft(elementId);
        }else if(e.keyCode==39){
            moveRight(elementId);
        }
    }
    Replace it with:

    Code:
    function checkArrow(e,elementId){
        if(e.keyCode){
            if(e.keyCode==38){
                moveUp(elementId);
            }else if(e.keyCode==40){
                moveDown(elementId);
            }else if(e.keyCode==37){
                moveLeft(elementId);
            }else if(e.keyCode==39){
                moveRight(elementId);
            }
        }else if(e.which){
            if(e.which==38){
                moveUp(elementId);
            }else if(e.whiche==40){
                moveDown(elementId);
            }else if(e.which==37){
                moveLeft(elementId);
            }else if(e.which==39){
                moveRight(elementId);
            }
        }
    }

    Sorry for all the updates... It was a new thing, which requires some testing and debugging, and I want to make sure we get good cross browser support and strict standards compliance, which may not matter for your application, but will matter for some people who might read this.
    Last edited by jamesbcox1980; 02-05-2009 at 12:33 AM.

  6. #6
    Join Date
    Feb 2009
    Posts
    8
    hmm, i have 2 encounter problems
    1) it happen that i am using firefox and IE and it happen that with firefox my codes can works, but when we use IE it's say error on
    <BODY onLoad="init()">
    we try the lastest code u gave us, and its had the same problem.
    but if i remove this phase [onLoad="init()"] it can works on both IE and firefox.


    2) all the image can be put nicely with my tables but when i tried to open one of the pages it came out 2 to 3 windows of the same pages.


    Code:
      
        
        <a href="Rates.jsp" target="_blank"><input type="image" src="Rates.JPG" border="2" width="250" height="250" id="1-1" onkeydown="checkArrow(event,this.id)"/></a>
        
        <a href="Acc.jsp" target="_blank"><input type="image" src="Acc.JPG" border="2" width="250" height="250" id="2-1" onkeydown="checkArrow(event,this.id)"/></a>
        <a href="Layout.jsp" target="_blank"><input type="image" src="Layout.JPG" border="2" width="250" height="250" id="3-1" onkeydown="checkArrow(event,this.id)"/></a><br>
    
        
        <a href="Events.jsp" target="_blank"><input type="image" src="Events.JPG" border="2" width="250" height="250" id="1-2" onkeydown="checkArrow(event,this.id)"/></a>
        <a href="homepage.jsp" target="_blank"><input type="image" src="homepage.JPG" border="2" width="250" height="250" id="2-2" onkeydown="checkArrow(event,this.id)"/></a>
        <a href="Enqires.jsp" target="_blank"><input type="image" src="Enqires.JPG" border="2" width="250" height="250" id="3-2" onkeydown="checkArrow(event,this.id)"/></a><br>
        
        <a href="Bars.jsp" target="_blank"><input type="image" src="Bars.JPG" border="2" width="250" height="250" id="1-3" onkeydown="checkArrow(event,this.id)"/></a>
        <a href="Facilities.jsp" target="_blank"><input type="image" src="Facilities.JPG" border="2" width="250" height="250" id="2-3" onkeydown="checkArrow(event,this.id)"/></a>
        <a href="Time.jsp" target="_blank"><input type="image" src="Time.JPG" border="2" width="250" height="250" id="3-3" onkeydown="checkArrow(event,this.id)"/></a><br>
        
    <embed src="kiss_the_rain.mp3" autostart=true hidden=true></embed>
    </body>
    sorry to bother u again>.<
    Last edited by missyanyan; 02-05-2009 at 01:40 AM.

  7. #7
    Join Date
    Dec 2008
    Posts
    488
    Try removing the onLoad="init()" phrase from the HTML and putting
    Code:
    window.onload=init;
    in the bottom of the javascript. Be sure not to put the () on it when you do. If you still can't get it to work, sometimes there are conflicting functions, so try
    Code:
    window.onload=function(){
        ...some statements...
    }
    For more information on that, read this. What exactly are you using the init() object for?

    For your second problem, I'm not sure what you're trying to do here. You've got an anchor (<a href="...) around an input. You need to put the anchor around an <img src="...

    Code:
    <a href="Rates.jsp" target="_blank"><img src="Rates.jpg" border="2" width="250" height="250" id="1-1" onkeydown="checkArrow(event,this.id)" />
    I'm not sure what your page looks like, so I don't know how you're focusing on the first input, but you can document.getElementById('...').focus() in your onload event.

  8. #8
    Join Date
    Feb 2009
    Posts
    8
    sorry for late reply. i had not idea to solve the problem on the init part. here is my website look like. Sorry to give u trouble again.

    http://s18.photobucket.com/albums/b1...rent=mpsip.jpg


    Code:
    <%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>~Welcome to our WebPage~</title>
    <script type="text/javascript">
    //set the Min and Max numbers on the cell IDs, for example,
    //if your table is 2 columns wide and 3 rows tall, you could
    //use these numbers: X for columns, Y for rows.
    //BE SURE to use name the cells accordingly, for example,
    //column-row, where the first column, first row would be
    //cell "1-1" and set that in the id="1-1" property in the
    //HTML
    
    var minX=1;
    var maxX=3;
    var minY=1;
    var maxY=3;
    
    //Declare variables
    
    var newCell_X;
    var newCell_Y;
    var newCell;
    var currCell_X;
    var currCell_Y;
    
    //These functions use the "1-2" or "2-3" naming convention
    //to change the position of t   he cells.  It uses parseInt()
    //to change the numbers from a string to an Integer.  Then
    //it names the new cell and sends it to the focus() function
    //below.
    
    function moveUp(currCell){
        currCell_X=parseInt(currCell.charAt(0));
        currCell_Y=parseInt(currCell.charAt(2));
        newCell_Y=currCell_Y-1;
        if(newCell_Y<minY) newCell_Y=minY;
        newCell=currCell_X+"-"+newCell_Y;
        CellFocus(newCell);
    }
    
    function moveDown(currCell){
        currCell_X=parseInt(currCell.charAt(0));
        currCell_Y=parseInt(currCell.charAt(2));
        newCell_Y=currCell_Y+1;
        if(newCell_Y>maxY) newCell_Y=maxY;
        newCell=currCell_X+"-"+newCell_Y;
        CellFocus(newCell);
    }
    
    function moveLeft(currCell){
        currCell_X=parseInt(currCell.charAt(0));
        currCell_Y=parseInt(currCell.charAt(2));
        newCell_X=currCell_X-1;
        if(newCell_X<minX) newCell_X=minX;
        newCell=newCell_X+"-"+currCell_Y;
        CellFocus(newCell);
    }
    
    function moveRight(currCell){
        currCell_X=parseInt(currCell.charAt(0));
        currCell_Y=parseInt(currCell.charAt(2));
        newCell_X=currCell_X+1;
        if(newCell_X>maxX) newCell_X=maxX;
        newCell=newCell_X+"-"+currCell_Y;
        CellFocus(newCell);
    }
    
    //This function receives the new cell ID from the move
    //function and focuses on that cell depending on the browser.
    //Almost all browsers use the document.getElementById() method,
    //but some older browsers will not.
    
    function CellFocus(cell){
           if(document.getElementById){
            document.getElementById(cell).focus();
        }else if(document.all){
            document.all[cell].focus();
        }else if(document.layers){
            document.layers[cell].focus();
        }
    }
    
    //Check the arrow that is pressed and take the
    //appropriate action:
    
    function checkArrow(e,elementId){
        if(e.keyCode){
            if(e.keyCode==38){
                moveUp(elementId);
            }else if(e.keyCode==40){
                moveDown(elementId);
            }else if(e.keyCode==37){
                moveLeft(elementId);
            }else if(e.keyCode==39){
                moveRight(elementId);
            }
        }else if(e.which){
            if(e.which==38){
                moveUp(elementId);
            }else if(e.whiche==40){
                moveDown(elementId);
            }else if(e.which==37){
                moveLeft(elementId);
            }else if(e.which==39){
                moveRight(elementId);
            }
        }
        
    }
    </script>
    <style type="text/css">
    body {
    	background-image: url("g6lt01.gif");
    }
    .style1 {
    	font-family: "Monotype Corsiva";
    	font-weight: bold;
    	font-size: 24px;
    }
    </style>
    </head>
      <body onLoad="inti()">
        
        <a href="Rates.jsp" target="_blank"><input type="image" src="Rates.JPG" border="2" width="250" height="250" id="1-1" onkeydown="checkArrow(event,this.id)"/></a>
        <a hrefv="Acc.jsp" target="_blank"><input type="image" src="Acc.JPG" border="2" width="250" height="250" id="2-1" onkeydown="checkArrow(event,this.id)"/></a>
        <a href="alarms.jsp" target="_blank"><input type="image" src="alarms.JPG" border="2" width="250" height="250" id="3-1" onkeydown="checkArrow(event,this.id)"/></a><br>
    
        
        <a href="Events.jsp" target="_blank"><input type="image" src="Events.JPG" border="2" width="250" height="250" id="1-2" onkeydown="checkArrow(event,this.id)"/></a>
        <a href="homepage.jsp" target="_blank"><input type="image" src="homepage.JPG" border="2" width="250" height="250" id="2-2" onkeydown="checkArrow(event,this.id)"/></a>
        <a href="Enqires.jsp" target="_blank"><input type="image" src="Enqires.JPG" border="2" width="250" height="250" id="3-2" onkeydown="checkArrow(event,this.id)"/></a><br>
        
        <a href="Bars.jsp" target="_blank"><input type="image" src="Bars.JPG" border="2" width="250" height="250" id="1-3" onkeydown="checkArrow(event,this.id)"/></a>
        <a href="Facilities.jsp" target="_blank"><input type="image" src="Facilities.JPG" border="2" width="250" height="250" id="2-3" onkeydown="checkArrow(event,this.id)"/></a>
        <a href="Time.jsp" target="_blank"><input type="image" src="Time.JPG" border="2" width="250" height="250" id="3-3" onkeydown="checkArrow(event,this.id)"/></a><br>
        
    <!--<embed src="kiss_the_rain.mp3" autostart=true hidden=true></embed>-->
    </body>
    </html>
    Last edited by missyanyan; 02-08-2009 at 08:34 AM.

  9. #9
    Join Date
    Dec 2008
    Posts
    488
    I noticed right off the bat that your init() function is spelled wrong. You spelled it "inti()". But again, your init() function doesn't exist. You're not initializing anything, so, why do you need the init() function? In order to have an init() function fire when loaded, you need to define it in your script. There's no need to have an onLoad event to fire it. Anyway, you don't seem to need it in this case anyway, since you don't have any functions listed above that need to be initialized.

  10. #10
    Join Date
    Feb 2009
    Posts
    8
    sorry for super late reply. Ok ok... thank alot. I found that Opera can work at all. Don't have any error at all. Thank jamesbcox1980.

  11. #11
    Join Date
    Feb 2009
    Posts
    8
    Sorry all... there is another problem on keyboard event.which i need user to use to click on the hidden link using keyboard control.currently they are operated on onclick
    and i try to modify from the code that was previously given by you, but its cant
    work. Thank alot and sorry to trouble you again.
    Here is the code:

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Traveler guide</title>
    
    <style type="text/css">
    <!--
    .style2 {
    	font-size: xx-large;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-weight: bold;
    	color: #000000;
    }
    -->
    
      a#move_demo { background:#fa0000; color:#fff; padding:5px; border:1px solid #000; }
    
    body{
    background-repeat: no-repeat;
    background-position: 600px 400px;
    
    }
    </style>
    
    
    </head>
    <body onload="runBGSlideShow()">
    
    <h6 align="center"><span class="style2">Traveler guide</span></h6>
    <div id="p-toc">
      <div>
        <h2><strong>Place of interest: </strong></h2>
        
    <script type="text/javascript">
    function toggleShow(item) {
    var obj = document.getElementById(item);
    
    if (obj.style.display == 'none') {
    obj.style.display = 'block';
    }
    
    else if (obj.style.display == 'block') {
    obj.style.display = 'none';
    }
    }
    
    function checkArrow(e,elementId){
        
    
        if(e.keyCode){
            if(e.keyCode==38){
                moveUp(elementId);
            }else if(e.keyCode==40){
                moveDown(elementId);
            }else if(e.keyCode==37){
                moveLeft(elementId);
            }else if(e.keyCode==39){
                moveRight(elementId);
            }
        }else if(e.which){
            if(e.which==38){
                moveUp(elementId);
            }else if(e.whiche==40){
                moveDown(elementId);
            }else if(e.which==37){
                moveLeft(elementId);
            }else if(e.which==39){
                moveRight(elementId);
            }
        }
        
    }
    
    
    </script>
    
    
    <a href="#" onclick="toggleShow('hidethis'); return false;">-Hilltribe Research Institute Museum</a>
    
    <div id="hidethis" style="display: none;">Established in 1383, this magnificent temple overlooks the city from its 1,073m elevation on the slopes of Doi (Mount) Suthep, which peaks at 1,685m. It is famous for its large gold-plated chedi, visible from the city on a good clear day. 
    
     </div>
     <br>
           <br>
      <a href="#" onclick="toggleShow('hidethis2'); return false;">-Chiang Mai National Museum</a>
    
    <div id="hidethis2" style="display: none;">Located along the SuperHighway, within walking distance of Wat Chet Yotwhich may usefully be visited on the same trip) Offers an interesting insight into the history of Chiangmai. Tel. (053) 221308 09.00 a.m. - 04.00 p.m. </div>
      <br>
           <br>
       <a href="#" onclick="toggleShow('hidethis3'); return false;">-Wat Phrathat Doi Suthep temple</a>
    
    <div id="hidethis3" style="display: none;">Established in 1383, this magnificent temple overlooks the city from its 1,073m elevation on the slopes of Doi (Mount) Suthep, which peaks at 1,685m. It is famous for its large gold-plated chedi, visible from the city on a good clear day.   </div>
     <br>
          <br>
         
         
        <a href="#" onclick="toggleShow('hidethis4'); return false;">-Wat Phra Jao Mengrai temple</a>
    
    <div id="hidethis4" style="display: none;">off Ratchamankha Road (near Heuan Phen). An atmospheric wooden temple away from the beaten track, quiet and gently crumbling in the absence of tourist hordes.   </div>
        <br>
             <br>
         <a href="#" onclick="toggleShow('hidethis5'); return false;">-Elephant Nature Park</a>
    
    <div id="hidethis5" style="display: none;">Approximately 60km north of Chiang Mai. This is a sanctuary for rescued and distressed elephants. They are not here to perform or do tricks but people visiting here will leave with a whole new understanding of these magnificent creatures.  </div>
        <br>
             <br>
       <a href="#" onclick="toggleShow('hidethis6'); return false;">-Dokmai Garden</a>
    
    <div id="hidethis6" style="display: none;">This garden displays 120 different edible fruit plants, 115 different vegetables, in total more than 640 vascular plants. Of these, 500 have been selected for pesentations on aluminium signs (English, Japanese and Thai). The plants have scientific names. The area is compact (4 ha or 10 acres) and surrounded by plantations of teak, bananas, longan and dry dipterocarp savannah. It is very near Opkhan National Park, and between the famous Doi Inthanon and Doi Suthep national parks. The garden also hosts natural populations of the Atlas moth and the Golden Birdwing butterfly. The garden collaborates with Chiangmai University (mushrooms), Maejo University (fish), Queen Sirikit Botanical Garden (plants), Tourism Authority of Thailand and Opkhan National Park.  </div>
        <br>
           <br>  
          <a href="#" onclick="toggleShow('hidethis7'); return false;">-Chiang Mai Foreign Cemetery</a>
    
    <div id="hidethis7" style="display: none;">is a serene place of history and remembrance. It's on Thanon Chiang Mai-Lamphun about 800m north of the Holiday Inn (formerly the Sheraton). It's on the east side of the Ping River to the southeast of the old city.   </div>
        
     
     
    </div>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles