70 users online (0 members and 70 guests)  

> > > > image map to text

  Results 1 to 3 of 3

Related

  1. Text vs image of text for logo - best practices    Forum: HTML Forum
    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. 11-14-2003, 04:53 PM #1
    STL
    STL is offline
    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?
    Reply With Quote Reply With Quote
  2. 11-15-2003, 09:27 AM #2
    Nuzz.Net
    Nuzz.Net is offline
    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.
    Reply With Quote Reply With Quote
  3. 11-17-2003, 05:12 PM #3
    coothead
    coothead is offline
    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


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread