image map to text

**STL** · 11-14-2003, 04:53 PM

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?

**Nuzz.Net** · 11-15-2003, 09:27 AM

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.

**coothead** · 11-17-2003, 05:12 PM

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

Thread: image map to text

Thread Tools

Related

Text vs image of text for logo - best practices Forum: HTML Forum

Align text with an image link? Forum: HTML Forum

Image to Text Rollover Forum: Website Scripts Forum

thumbnail to image and text rollover Forum: Javascript Forum

Aligning Text to an image ... Forum: CSS Forum

image map to text

Tags for this Thread

Cloudjiffy- PaaS for Developers