Clicking Image Map Highlights Row

**mscir** · Jul 23 '05, 05:45 PM

Re: Clicking Image Map Highlights Row

sling blade wrote:[color=blue]
> Hello,
>
> I have an image map of a subdivision and each section of land in the
> subdivision has a lot number on it. Below the image map I have a table
> with details about each lot (eg Lot Number, Lot Size, Lot Price
> ect...)
> I would really like a way so the user can click on the image map and
> the corresponding row below the image will be highlighted.
> The user clicks on a new row and the previous row goes back to its
> original color and the new row is highlighted.
> Is the possible? If it is and can someone please point me in the right
> direction on how you would do this?[/color]

Will something like this work for you? Try this example by clicking
around on the nonexistent image. You'll find the sensitive areas pretty
quickly.

- Each table row that will be highlighted needs a unique ID.
- Imagemap areas are clickable, call the row highlight function with the
correct row number in the imagemap click event.
- The buttons demonstrate the function calls.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Untitled </title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

<script type="text/javascript">
function change(n){
clearallrows()
document.getEle mentById('row'+ n).style.backgr oundColor='#FFA ABB';
}
function clearallrows(){
for (var n=1;n<5;n++){
document.getEle mentById('row'+ n).style.backgr oundColor='#FFF FFF';
}
}
</script>
</head>
<body>
<input type="button" onclick="change (1)" value="1">
<input type="button" onclick="change (2)" value="2">
<input type="button" onclick="change (3)" value="3">
<input type="button" onclick="change (4)" value="4">
<input type="button" onclick="cleara llrows()" value="no highlights">
<p>Click on one of the planets:</p>
<img src ="planets.gi f" width ="245" height ="226" alt="test" usemap
="#imagemap" >
<map NAME="imagemap" >
<area shape="rect" coords="20,25,8 4,113" onclick="change (1)" href ="#">
<area shape="polygon" coords="90,25,1 62,26,163,96,89 ,25,90,24"
onclick="change (2)" href ="#">
<area shape="circle" coords="130,114 ,29" onclick="change (3)" href ="#">
<area shape="rect" coords="19,156, 170,211" onclick="change (4)" href ="#">
</map
</MAP>
<table border=1 align=center>
<caption>Statis tics</caption>
<th>Year</th>
<th>Team</th>
<tr id='row1'>
<td align=right>193 0</td>
<td align=right>Det roit</td>
</tr>
<tr id='row2'>
<td align=right>193 3</td>
<td align=right>Det roit</td>
</tr>
<tr id='row3'>
<td align=right>193 4</td>
<td align=right>Det roit</td>
</tr>
<tr id='row4'>
<td align=right>193 5</td>
<td align=right>Det roit</td>
</tr>
</table>
</body>
</html>

Mike

**RobG** · Jul 23 '05, 05:45 PM

Re: Clicking Image Map Highlights Row

mscir wrote:
[...][color=blue]
> <map NAME="imagemap" >
> <area shape="rect" coords="20,25,8 4,113" onclick="change (1)" href ="#">[/color]

Using an empty anchor causes the page to scroll to the top when
the anchor is clicked. To stop this happening, have the onclick
return false:

<area ... onclick="change (1);return false;" href="#">

--
Rob

**scottf35@hotmail.com** · Jul 23 '05, 05:45 PM

Re: Clicking Image Map Highlights Row

Great! Thanks that is exacty what I needed.

Thank you Mike and Rob!

**scottf35@hotmail.com** · Jul 23 '05, 05:45 PM

Re: Clicking Image Map Highlights Row

One other thing, in the clearallrows function is there a way to have it
loop through each row dynamically rather than a fix number?
eg in VB
For Each Row in Table
change backcolor...
Next Row

The reason is that the table will lilely be generated from a database.
As the lots are sold then the information for that lot will not be
generated in the table any more.

So the total number of rows is likely to change over time.

Any ideas on this?

**Randy Webb** · Jul 23 '05, 05:45 PM

Re: Clicking Image Map Highlights Row

scottf35@hotmai l.com wrote:[color=blue]
> One other thing, in the clearallrows function is there a way to have it
> loop through each row dynamically rather than a fix number?
> eg in VB
> For Each Row in Table
> change backcolor...
> Next Row
>
> The reason is that the table will lilely be generated from a database.
> As the lots are sold then the information for that lot will not be
> generated in the table any more.
>
> So the total number of rows is likely to change over time.
>
> Any ideas on this?
>[/color]

for (var i=0;i<tableLeng th;i++){
......
}

Where tableLength is a variable that is dynamically inserted by the same
language/script that dynamically generates the table.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

**scottf35@hotmail.com** · Jul 23 '05, 05:46 PM

Re: Clicking Image Map Highlights Row

The language that will generate the table is asp.net.

The first idea I can think of to do this is to have a count function in
the SQL statement count the number of rows returned and then place this
amount in a session variable.

Do you know how you assign a javascript variable to a asp.net session
variable or any other dynamic variable?

Thanks for your help.

**mscir** · Jul 23 '05, 05:46 PM

Re: Clicking Image Map Highlights Row

RobG wrote:
[color=blue]
> mscir wrote:
> [...]
>[color=green]
>> <map NAME="imagemap" >
>> <area shape="rect" coords="20,25,8 4,113" onclick="change (1)" href ="#">[/color]
>
> Using an empty anchor causes the page to scroll to the top when
> the anchor is clicked. To stop this happening, have the onclick
> return false:
>
> <area ... onclick="change (1);return false;" href="#">[/color]

Nice fix, thanks!
Mike

**Evertjan.** · Jul 23 '05, 05:46 PM

Re: Clicking Image Map Highlights Row

RobG wrote on 13 feb 2005 in comp.lang.javas cript:
[color=blue]
> <area ... onclick="change (1);return false;" href="#">
>[/color]

<area ... onclick="change (1);" nohref>

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

**RobG** · Jul 23 '05, 05:46 PM

Re: Clicking Image Map Highlights Row

scottf35@hotmai l.com wrote:[color=blue]
> One other thing, in the clearallrows function is there a way to have it
> loop through each row dynamically rather than a fix number?[/color]

Yes

If you give the table an id, the rows collection is returned
by:

var theRows = document.getEle mentById('table ID').rows;

To keep the users of older IE happy, do some feature testing and
add a document.all method (untested):

if (document.getEl ementById) {
var theRows = document.getEle mentById('table ID').rows;
} else if (document.all) {
var theRows = document.all('t ableID').rows;
}

You can loop through the rows thusly:

for (var i=0; i<theRows.lengt h; i++) {
theRows[i] ....
}

--
Rob

**scottf35@hotmail.com** · Jul 23 '05, 05:46 PM

Re: Clicking Image Map Highlights Row

Awesome!

Thanks for all your help!

Clicking Image Map Highlights Row

Clicking Image Map Highlights Row

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment