[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Highlight Plotted Points On An Image

Posted on 2005-04-09
10
Medium Priority
?
581 Views
Last Modified: 2008-02-26
I want to be able to click on a table entry and then have its corresponding point on an image highlight.

I have a web page with an image and corresponding image map. The image map consists of circles plotted at specific coordinates over the underlying image. On the web page below the image is an XHTML table with information related to the plotted circles (points). Each entry in the table includes a small image of a circle.

Is it possible with JavaScript to be able to click on one of these small circles in the table and then have its corresponding image map circle (or perhaps one layered above it at the same coordinates on the base image) highlight? If so, how? (I could regenerate the whole thing on the server, but I'm trying to do the highlighting just in the client, if possible.)

(I won't be checking for your replies or questions for the next twelve hours.)
0
Comment
Question by:congalab
  • 7
  • 3
10 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13746418
Method 1: replace the image with one that has a dot on it
<td><a href="#" onClick="document.images['imagemapimage'].src='coordinate3.gif'; return false">Coord 3</a></td>

Method 2: show a layer positioned over the image map.

<td><a href="#" onClick="document.getElementById('coordinate3').style.visibility='visible'; return false">Coord 3</a></td>

<div id="coordinate3" style="position:absolute; top:300; left:234; visibility:hidden"><img src="transparentdot.gif" /></div>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13746424
and perhaps
<script>
saveCoord="";
function showImage(coord) {
  document.images['imagemapimage'].src=coord+'.gif';
  return false
}
function showLayer(coord) {
  if (saveCoord)    document.getElementById(saveCoord).style.visibility='hidden'
  document.getElementById(coord).style.visibility='visible';
  saveCoord=coord
  return false;
}
</script>

<td><a href="#" onClick="return showImage('coordinate3')">Coord 3</a></td>

<td><a href="#" onClick="return showLayer('coordinate3')">Coord 3</a></td>

<div id="coordinate3" style="position:absolute; top:300; left:234; visibility:hidden"><img src="transparentdot.gif" /></div>
0
 

Author Comment

by:congalab
ID: 13749426
I'm working with your method 1. When I create the base image with the points plotted on it, I also (successfully) create individual id.png files, each one consisting of a transparent background image of the same size as the base image of the plot, with a yellow dot centered on the coordinates of the corresponding id point in the base image. Then, using the following code, which is partially based on your Method 1 example, I was attempting to make it possible to highlight a plotted point by clicking on an image dot.png. Can you spot why the following code is not working, i.e., it is not overlaying the id.png file on top of the base image?

<td style="border: 0; text-align: center;"><a href="#" onclick="document.images['imagemapimage'].src='id.png'; return false"><img style="border: 0;" src="dot.png" width="17" height="17" alt="click to highlight point" onmouseover="window.status='click to highlight point'; return true" onmouseout="window.status=''; return true" /></a></td>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13751139
To overlay you would need this somewhere

<td style="background-image: url(/images/mainimage.gif)"><img src="/images/spacer.gif"
name="imagemapimage"></td>

Michel
0
 

Author Comment

by:congalab
ID: 13751766
I created a transparent image named transparent.png which is 854 pixels wide and 542 pixels high (the same dimensions as my base image with the plotted points). I'm not sure how to use it and to incorporate your latest comment into my current approach (see simplified example below). Please note that I am not currently displaying the images within a table; I suppose I could put a <div> tag around the <img> and <map> tags.


<img width="854" height="542" src="plot_points_1.php" usemap="#mainmap" style="border:0;" />
<map name="mainmap">
<area shape="circle" coords="559,199,4" href="point_info.php?1"
onclick="return popitup('point_info.php?1')"
alt="alt1" title="title1" />
</map>

<br /><br />

<table style="font-family: Verdana;">
<tr>
<td style="border: 0; text-align: center;">
<a href="#" onclick="document.images['imagemapimage'].src='id1.png'; return false">
<img style="border: 0;" src="dot.png" width="17" height="17"
alt="click to highlight point" title="click to highlight point"
onmouseover="window.status='click to highlight point'; return true"
onmouseout="window.status=''; return true" /></a>
</td>
</tr>
</table>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13751976
The important point is to name the image

<img NAME="imagemapimage"
width="854" height="542" src="plot_points_1.php" usemap="#mainmap" style="border:0;" />

that corresponds to

 onclick="document.images['imagemapimage'].src='id1.png'

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13751988
Ohh, and yes, you need a container to put the image in so yes, a div or a table
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1400 total points
ID: 13752000
<table><tr><td style="background-image: url(plot_points_1.php)"><img width="854" height="542" src="transparent.png" usemap="#mainmap" style="border:0;"
name="imagemapimage" /></td></tr></table>
0
 

Author Comment

by:congalab
ID: 13752298
It works! I had to add  padding: 0; to the cell style in order to get the highlight point to line up correctly.

Thanks very much!!!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13752869
Anytime :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question