By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,678 Members | 2,439 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,678 IT Pros & Developers. It's quick & easy.

Clicking Image Map Highlights Row

P: n/a
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?
Jul 23 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
sling blade wrote:
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?


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.getElementById('row'+n).style.backgroundC olor='#FFAABB';
}
function clearallrows(){
for (var n=1;n<5;n++){
document.getElementById('row'+n).style.backgroundC olor='#FFFFFF';
}
}
</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="clearallrows()" value="no highlights">
<p>Click on one of the planets:</p>
<img src ="planets.gif" width ="245" height ="226" alt="test" usemap
="#imagemap">
<map NAME="imagemap">
<area shape="rect" coords="20,25,84,113" onclick="change(1)" href ="#">
<area shape="polygon" coords="90,25,162,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>Statistics</caption>
<th>Year</th>
<th>Team</th>
<tr id='row1'>
<td align=right>1930</td>
<td align=right>Detroit</td>
</tr>
<tr id='row2'>
<td align=right>1933</td>
<td align=right>Detroit</td>
</tr>
<tr id='row3'>
<td align=right>1934</td>
<td align=right>Detroit</td>
</tr>
<tr id='row4'>
<td align=right>1935</td>
<td align=right>Detroit</td>
</tr>
</table>
</body>
</html>

Mike
Jul 23 '05 #2

P: n/a
mscir wrote:
[...]
<map NAME="imagemap">
<area shape="rect" coords="20,25,84,113" onclick="change(1)" href ="#">


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
Jul 23 '05 #3

P: n/a
Great! Thanks that is exacty what I needed.

Thank you Mike and Rob!

Jul 23 '05 #4

P: n/a
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?

Jul 23 '05 #5

P: n/a
sc******@hotmail.com wrote:
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?


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

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

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #6

P: n/a
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.

Jul 23 '05 #7

P: n/a
RobG wrote:
mscir wrote:
[...]
<map NAME="imagemap">
<area shape="rect" coords="20,25,84,113" onclick="change(1)" href ="#">


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="#">


Nice fix, thanks!
Mike
Jul 23 '05 #8

P: n/a
RobG wrote on 13 feb 2005 in comp.lang.javascript:
<area ... onclick="change(1);return false;" href="#">


<area ... onclick="change(1);" nohref>
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Jul 23 '05 #9

P: n/a
sc******@hotmail.com wrote:
One other thing, in the clearallrows function is there a way to have it
loop through each row dynamically rather than a fix number?


Yes

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

var theRows = document.getElementById('tableID').rows;

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

if (document.getElementById) {
var theRows = document.getElementById('tableID').rows;
} else if (document.all) {
var theRows = document.all('tableID').rows;
}

You can loop through the rows thusly:

for (var i=0; i<theRows.length; i++) {
theRows[i] ....
}
--
Rob
Jul 23 '05 #10

P: n/a
Awesome!

Thanks for all your help!

Jul 23 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.