31 users online (1 members and 30 guests)  


  Results 1 to 3 of 3

Related

  1. Replies: 1
  2. Align text with an image link?    Forum: HTML Forum
    Replies: 2
  3. Image to Text Rollover    Forum: Website Scripts Forum
    Replies: 0
  4. thumbnail to image and text rollover    Forum: Javascript Forum
    Replies: 0
  5. Aligning Text to an image ...    Forum: CSS Forum
    Replies: 4
  1. #1
    STL's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2003
    Location
    St. Louis/Toronto
    Posts
    1

    image map to text

    I have an image map of the US and Canada. When a user clicks on a state or province I want the name of the state or province they clicked on to appear in a text box.

    How do I do this?

  2. #2
    Nuzz.Net's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2003
    Posts
    9
    Quote Originally Posted by STL
    I have an image map of the US and Canada. When a user clicks on a state or province I want the name of the state or province they clicked on to appear in a text box.

    How do I do this?
    This can be done with javascript. Over the years I've used http://www.dynamicdrive.com as a resource for such scripts. Browse around there, maybe you will find what you need. Hope I helped.

  3. #3
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there STL,

    I have put this together using a table,
    rather than a text area. I hope that it
    may prove of assistance to your cause
    Code:
    <html>
    <head>
    <title>U.S.A. States</title>
    
    <style type="text/css">
    <!--
     table
        {
         position:absolute;
         top:50px;
         left:380px;
         border: double 6px #ff0000;
         width:200px;
         height:100px;
       }
    td#one
        {
         font-family:arial;
         font-size:18px;
         color:#ffffff;
         text-align:center;
         background-color:#000080;
        }
    //-->     
    </style>
    <script type="text/javascript">
    <!--
    function display_states(n)
         {
          states=new Array('Alabama','Arizona','Arkansas','California','Carolina','Colorado');
          document.getElementById('one').innerHTML=states[n];
        }
    //-->
    </script>
    </head>
    <body>
    
    <img  src="USA.gif"width="300"height="200"border="0" alt="United States of America" usemap="#us_states">
    <map name="us_states">
    <area shape="rect" coords="0,   0, 49,   200" href="#"onclick="display_states(0);" alt="Alabama">
    <area shape="rect" coords="50,   0, 99, 200" href="#"onclick="display_states(1);" alt="Arizona">
    <area shape="rect" coords="100, 0, 149, 200" href="#"onclick="display_states(2);" alt="Arkansas">
    <area shape="rect" coords="150, 0, 199, 200" href="#"onclick="display_states(3);" alt="California">
    <area shape="rect" coords="200, 0, 249, 200" href="#"onclick="display_states(4);" alt="Carolina">
    <area shape="rect" coords="250, 0, 299, 200" href="#"onclick="display_states(5);" alt="Colorado">
    </map>
    
    <table ><tr><td id="one" ></td ></tr></table>
    
    </body>
    </html>
    This has been tested in I.E. 6.0, Netscape 7.1 and Mozilla 1.4.
    Of course, I have left you the task of inserting the rest of the states

    cthead



Tags for this Thread