Image Rollover Text Change

[krichard]

Hello

I have a javascript that changes an image when u rollover it..

EX. I have a map and each state is an image.. when i rollover it, the state highlights, and i can click on the state and it brings me to a page in coldfusion that lists all the street listings for that state...

what i want to incorporate into the script is this:

when i rollover a state, i want it to change text underneath the map...

Number of Street Directories in MA: 5

so MA and 5 would be the text that changes depending on the state... and the number of streets will come from reading the StreetDirectory table in my database.

Here is my current code:

<!--- Say you have a query to pull the reviews per street --->
<cfquery name=&quot;getStreets&quot; DATASOURCE=&quot;#request.dsn#&quot;>
SELECT StreetID, streetname, NumberOfReviews, City, State, USlocation
FROM StreetDirectory
order by StreetName
</cfquery>

<div align=&quot;center&quot;><img src=&quot;../maps/blankmap-01.jpg&quot; width=&quot;285&quot; height=&quot;198&quot; name=&quot;otherImage&quot; usemap=&quot;#otherImageMap&quot; border=&quot;3&quot; alt=&quot;&quot;><span class=&quot;titles&quot;>
<map name=&quot;otherImageMap&quot;>
<area shape=&quot;poly&quot; coords=&quot;66,133&quot; href=&quot;#&quot;>
<area shape=&quot;poly&quot; coords=&quot;65,132,46,131,31,137,31,145,32,161,36,181,59,170,73,163,96,176,100,171,86,163,72,161,65,133&quot; href=&quot;StateDirectory.cfm?State=AK&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage50')&quot; alt=&quot;Alaska&quot; title=&quot;Alaska&quot;>
<area shape=&quot;poly&quot; coords=&quot;90,146,110,152,115,162,121,158,115,149,92,141,90,146&quot; href=&quot;StateDirectory.cfm?State=HA&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage51')&quot; alt=&quot;Hawaii&quot; title=&quot;Hawaii&quot;>
<area shape=&quot;poly&quot; coords=&quot;51,108,55,98,34,69,39,51,20,46,17,54,22,91,38,107,51,108&quot; href=&quot;StateDirectory.cfm?State=CA&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage10')&quot; alt=&quot;California&quot; title=&quot;California&quot;>
<area shape=&quot;poly&quot; coords=&quot;50,108,66,117,79,118,84,86,59,83,58,89,54,88,51,108&quot; href=&quot;StateDirectory.cfm?State=AZ&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage9')&quot; alt=&quot;Arizona&quot; title=&quot;Arizona&quot;>
<area shape=&quot;poly&quot; coords=&quot;53,92,54,89,57,89,65,56,39,51,34,72,53,93&quot; href=&quot;StateDirectory.cfm?State=NV&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage11')&quot; alt=&quot;Nevada&quot; title=&quot;Nevada&quot;>
<area shape=&quot;poly&quot; coords=&quot;19,46,52,53,55,44,55,40,59,35,32,28,28,23,18,46&quot; href=&quot;StateDirectory.cfm?State=MT&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage22')&quot; alt=&quot;Montanta&quot; title=&quot;Montanta&quot;>
<area shape=&quot;poly&quot; coords=&quot;58,83,82,86,86,65,76,63,78,58,64,56,59,82&quot; href=&quot;StateDirectory.cfm?State=UT&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage12')&quot; alt=&quot;Utah&quot; title=&quot;Utah&quot;>
<area shape=&quot;poly&quot; coords=&quot;106,100&quot; href=&quot;#&quot;>
<area shape=&quot;poly&quot; coords=&quot;78,56,80,43,72,43,62,21,65,15,60,14,57,32,52,51,77,58&quot; href=&quot;StateDirectory.cfm?State=ID&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage21')&quot; alt=&quot;Idaho&quot; title=&quot;Idaho&quot;>
<area shape=&quot;poly&quot; coords=&quot;87,81&quot; href=&quot;#&quot;>
<area shape=&quot;poly&quot; coords=&quot;56,33,33,28,29,22,29,12,37,15,37,11,59,17,56,35&quot; href=&quot;StateDirectory.cfm?State=WA&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage23')&quot; alt=&quot;Washington&quot; title=&quot;Washington&quot;>
<area shape=&quot;poly&quot; coords=&quot;79,44,81,39,109,45,113,24,64,15,60,22,72,44,79,45&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage24')&quot;>
<area shape=&quot;poly&quot; coords=&quot;111,45,109,67,78,63,82,42,112,44&quot; href=&quot;StateDirectory.cfm?State=WY&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage20')&quot; alt=&quot;Wyoming&quot; title=&quot;Wyoming&quot;>
<area shape=&quot;poly&quot; coords=&quot;86,64,118,68,118,91,82,86,87,65&quot; href=&quot;StateDirectory.cfm?State=CO&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage13')&quot; alt=&quot;Colorado&quot; title=&quot;Colorado&quot;>
<area shape=&quot;poly&quot; coords=&quot;80,119,91,116,110,118,111,90,82,87,80,121&quot; href=&quot;StateDirectory.cfm?State=NM&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage8')&quot; alt=&quot;New Mexico&quot; title=&quot;New Mexico&quot;>
<area shape=&quot;poly&quot; coords=&quot;89,116,108,136,114,130,128,150,141,155,137,141,157,130,160,123,155,110,136,108,125,102,128,94,112,92,110,117,88,116&quot; href=&quot;StateDirectory.cfm?State=TX&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage1')&quot; alt=&quot;Texas&quot; title=&quot;Texas&quot;>
<area shape=&quot;poly&quot; coords=&quot;118,89,151,91,153,109,140,109,125,103,128,94,117,93,117,87&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage15')&quot;>
<area shape=&quot;poly&quot; coords=&quot;118,89,153,91,153,83,148,72,118,74,119,89&quot; href=&quot;StateDirectory.cfm?State=KS&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage14')&quot; alt=&quot;Kansas&quot; title=&quot;Kansas&quot;>
<area shape=&quot;poly&quot; coords=&quot;119,74,147,71,143,59,110,55,108,68,120,69,120,76&quot; href=&quot;StateDirectory.cfm?State=NE&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage19')&quot; alt=&quot;Nebraska&quot; title=&quot;Nebraska&quot;>
<area shape=&quot;poly&quot; coords=&quot;143,61,142,41,111,39,111,55,142,60&quot; href=&quot;StateDirectory.cfm?State=SD&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage26')&quot; alt=&quot;South Dakota&quot; title=&quot;South Dakota&quot;>
<area shape=&quot;poly&quot; coords=&quot;143,41,141,25,111,23,110,39,142,41&quot; href=&quot;StateDirectory.cfm?State=ND&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage25')&quot; alt=&quot;North Dakota&quot; title=&quot;North Dakota&quot;>
<area shape=&quot;poly&quot; coords=&quot;142,56,169,53,162,48,161,41,164,34,172,27,142,24,144,56&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage27')&quot;>
<area shape=&quot;poly&quot; coords=&quot;143,56,166,53,174,63,166,70,147,72,142,57&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage18')&quot;>
<area shape=&quot;poly&quot; coords=&quot;147,71,153,82,153,95,177,93,179,91,174,81,168,70,146,71&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage17')&quot;>
<area shape=&quot;poly&quot; coords=&quot;154,95,155,111,173,113,170,111,177,95,154,94&quot; href=&quot;test.htm&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage16')&quot;>
<area shape=&quot;poly&quot; coords=&quot;157,111,173,115,169,125,179,123,184,135,158,133,161,122,155,110&quot; href=&quot;StateDirectory.cfm?State=LA&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage2')&quot; alt=&quot;Louisiana&quot; title=&quot;Louisiana&quot;>
<area shape=&quot;poly&quot; coords=&quot;186,124,184,99,175,101,168,113,169,124,182,130,186,125&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage3')&quot;>
<area shape=&quot;poly&quot; coords=&quot;175,102,202,99,215,88,176,93,176,100&quot; href=&quot;StateDirectory.cfm?State=TN&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage52')&quot; alt=&quot;Tennesee&quot; title=&quot;Tennesee&quot;>
<area shape=&quot;poly&quot; coords=&quot;179,91,184,83,183,59,171,59,176,63,168,72,180,91&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage30')&quot;>
<area shape=&quot;poly&quot; coords=&quot;172,58,184,58,182,41,166,35,160,41,161,49,171,58&quot; href=&quot;StateDirectory.cfm?State=IL&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage28')&quot; alt=&quot;Illinois&quot; title=&quot;Illinois&quot;>
<area shape=&quot;poly&quot; coords=&quot;184,43,185,39,198,38,191,34,179,35,179,30,169,36,184,43&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage29')&quot;>
<area shape=&quot;poly&quot; coords=&quot;189,61,186,45,193,40,202,46,206,55,202,61,186,61&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage32')&quot;>
<area shape=&quot;poly&quot; coords=&quot;198,61,200,73,183,85,183,62,202,63&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage31')&quot;>
<area shape=&quot;poly&quot; coords=&quot;183,85,199,77,209,78,213,85,208,89,177,94,184,85&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage34')&quot;>
<area shape=&quot;poly&quot; coords=&quot;183,101,197,100,204,115,204,123,187,126,182,103&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage4')&quot;>
<area shape=&quot;poly&quot; coords=&quot;202,123,222,119,234,141,233,153,228,151,219,139,218,133,210,125,205,129,198,125,188,128,192,124,204,122&quot; href=&quot;StateDirectory.cfm?State=FL&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage6')&quot; alt=&quot;Florida&quot; title=&quot;Florida&quot;>
<area shape=&quot;poly&quot; coords=&quot;197,99,210,99,224,113,222,121,203,123,203,114,196,100&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage5')&quot;>
<area shape=&quot;poly&quot; coords=&quot;207,98,218,95,226,97,233,102,224,113,207,99&quot; href=&quot;StateDirectory.cfm?State=SC&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage7')&quot; alt=&quot;South Carolina&quot; title=&quot;South Carolina&quot;>
<area shape=&quot;poly&quot; coords=&quot;203,97,215,88,245,85,236,102,219,96,203,99&quot; href=&quot;StateDirectory.cfm?State=NC&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage53')&quot; alt=&quot;North Carolina&quot; title=&quot;North Carolina&quot;>
<area shape=&quot;poly&quot; coords=&quot;212,88,242,85,239,75,235,75,231,70,225,77,212,88&quot; href=&quot;StateDirectory.cfm?State=VA&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage35')&quot; alt=&quot;Virginia&quot; title=&quot;Virginia&quot;>
<area shape=&quot;poly&quot; coords=&quot;213,86,210,80,217,68,223,71,228,69,233,71,214,87&quot; href=&quot;StateDirectory.cfm?State=WV&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage36')&quot; alt=&quot;West Virginia&quot; title=&quot;West Virginia&quot;>
<area shape=&quot;poly&quot; coords=&quot;200,75,210,79,218,69,216,58,200,62,201,75&quot; href=&quot;StateDirectory.cfm?State=OH&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage33')&quot; alt=&quot;Ohio&quot; title=&quot;Ohio&quot;>
<area shape=&quot;poly&quot; coords=&quot;218,69,242,63,242,58,239,54,216,58,217,70&quot; href=&quot;StateDirectory.cfm?State=PA&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage37')&quot; alt=&quot;Pennsylvania&quot; title=&quot;Pennsylvania&quot;>
<area shape=&quot;poly&quot; coords=&quot;227,68,240,64,240,75,228,69&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage39')&quot;>
<area shape=&quot;poly&quot; coords=&quot;240,68,246,70,245,78,240,76,240,69&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage40')&quot;>
<area shape=&quot;poly&quot; coords=&quot;249,60,240,56,241,68,245,71,249,61&quot; href=&quot;StateDirectory.cfm?State=&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage41')&quot;>
<area shape=&quot;poly&quot; coords=&quot;247,57,243,36,234,40,231,47,220,50,216,57,239,54,247,59&quot; href=&quot;StateDirectory.cfm?State=NY&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage42')&quot; alt=&quot;New York&quot; title=&quot;New York&quot;>
<area shape=&quot;poly&quot; coords=&quot;246,52,254,51,254,55,245,57,246,52&quot; href=&quot;StateDirectory.cfm?State=CT&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage44')&quot; alt=&quot;Conneticuit&quot; title=&quot;Conneticuit&quot;>
<area shape=&quot;poly&quot; coords=&quot;247,46,257,46,265,50,258,51,248,51,247,47&quot; href=&quot;StateDirectory.cfm?State=MA&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage46')&quot; alt=&quot;Massachusetts&quot; title=&quot;Massachusetts&quot;>
<area shape=&quot;poly&quot; coords=&quot;245,46,249,47,250,34,243,36,246,48&quot; href=&quot;StateDirectory.cfm?State=VT&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage47')&quot; alt=&quot;Vermont&quot; title=&quot;Vermont&quot;>
<area shape=&quot;poly&quot; coords=&quot;250,45,257,45,252,32,250,35,250,47&quot; href=&quot;StateDirectory.cfm?State=NH&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage48')&quot; alt=&quot;New Hampshire&quot; title=&quot;New Hampshire&quot;>
<area shape=&quot;poly&quot; coords=&quot;258,44,271,32,260,18,257,18,251,33,258,45&quot; href=&quot;StateDirectory.cfm?State=ME&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage49')&quot; alt=&quot;Maine&quot; title=&quot;Maine&quot;>
<area shape=&quot;poly&quot; coords=&quot;253,51,254,55,260,52,252,50&quot; href=&quot;StateDirectory.cfm?State=RI&quot; &quot;#viewer&quot; onMouseOver=&quot;changeImages('otherImage', 'otherImage45')&quot; alt=&quot;Rhode Island&quot; title=&quot;Rhode Island&quot;>
</map>
</span>
<font color=&quot;#CC0000&quot;>Number of Street Directories in MA: 5

 

[spewn]

here is how you change the elements on the page. don't know about the pull from database, but you can figure that out...

***
<script>

function chngstate() {
document.getElementById('st').innerHTML = 'CA';
}

function chngnum() {
document.getElementById('num').innerHTML = '15';
}

</script>

<font color=&quot;#CC0000&quot;>Number of Street Directories in <span id='st'>MA</span>: <span id=num>5</span></font>
<br><br>
<input type=button value=&quot;change state&quot; onclick=chngstate();>
<input type=button value=&quot;change number&quot; onclick=chngnum();>
***

hope that helps...

-g

 

[krichard]

so... instead of having the change state button... can't u just have a rollover affect, or mouseover state that shows the number?

 

[spewn]

<script>

function chngstate() {
document.getElementById('st').innerHTML = 'CA';
}

function chngnum() {
document.getElementById('num').innerHTML = '15';
}

</script>

<font color=&quot;#CC0000&quot;>Number of Street Directories in <span id='st'>MA</span>: <span id=num>5</span></font>
<br><br>
<input type=button value=&quot;change state&quot; onmouseover=chngstate();>
<input type=button value=&quot;change number&quot; onmouseover=chngnum();>

just change to suit your needs.

- g