|
|
Posted by mscir on 05/29/05 05:30
Guy Doucet wrote:
> I have a large image of a map, approx 2000 x 2000 pixels.
> The map background is white, the roads are black.
> The map alsp contains approx 50 small red square indicating certain office
> locations.
>
> I have divided this image into smaller transparent GIF images of 200 x 200
> pixels each.
> I then placed these images in a table of 10 rows x 10 columns.
> Each cell contains one of these small GIFs.
>
> I would like to highlight a specific part of the map on an event.
> Basically, a customer would select an office from a list, I would then
> display the map with the correct part of the map highlighted - perhaps
> setting the bgcolor of that cell to yellow.
>
> The map doesn't need to be in a table like I have done, but this is what I
> tried without success.
> Also, the highlighted section doesn't have to be square.
>
> Thanks for all,
> G Doucet
How about something like this?
I didn't use a table, since the images are all the same size, if you set
margin, border and padding to 0 for the images and float them left they
will line up in a container div nicely. You can reset the .src for each
image with javascript, letting the user select which image to change (to
show the highlighted version), resetting all of the non-selected images
to the default non-highlighted versions, using a loop.
For this example, default non-highlighted images are named:
img1.jpg, img2.jpg, etc.
Highlighted versions are named:
img1_highlight.jpg, img2_highlight.jpg, etc.
This will break if the browser doesn't support javascript and
document.getElementById.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image Swap in Loop</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
* {
padding:0;
margin:0;
border: 0;
}
body{
width: 100%;
height: 100%;
text-align: center;
}
#imagediv{
border: 1px solid red;
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
..imagepiece{
float: left;
width: 100px;
height: 100px;
}
#reportdiv{
text-align: left;
border: 1px solid brown;
margin-left: auto;
margin-right: auto;
width: 200px;
}
</style>
<script type="text/javascript">
function changeimage(selimg){
var targetimage, currentimage, reportstring;
reportstring='';
// get name of image to highlight from selected option
targetimage=selimg.value;
// exit function if no image was selected
if (targetimage==''){ return false; }
// loop through all images
for (var n=1;n<=4;n++){
currentimage='img'+n;
if (currentimage==targetimage){
// this is the image the user selected
// display highlighted version of image
document[currentimage].src=currentimage+'_highlight.jpg';
}else{
// reset non-selected image to default non-highlighted version
document[currentimage].src=currentimage+'.jpg';
}
//record results so we can see if the code worked
reportstring+='img'+n+'.src='+document[currentimage].src+'<br>';
}
//display resultstring in report div
document.getElementById('reportdiv').innerHTML=reportstring;
}
</script>
</head>
<body>
<h3>Image Swap Example</h3>
<br>
<div id='imagediv'>
<image name='img1' class='imagepiece' src='img1.jpg' alt='img1.jpg'>
<image name='img2' class='imagepiece' src='img2.jpg' alt='img2.jpg'>
<image name='img3' class='imagepiece' src='img3.jpg' alt='img3.jpg'>
<image name='img4' class='imagepiece' src='img4.jpg' alt='img4.jpg'>
</div><!-- imagediv -->
<br>
<select onchange='changeimage(this)'>
<option value=''>Select Image to Highlight</option>
<option value='img1'>img1</option>
<option value='img2'>img2</option>
<option value='img3'>img3</option>
<option value='img4'>img4</option>
</select>
<br>
<br>
Image List<br>
<div id='reportdiv'>
</div>
</body>
</html>
[Back to original message]
|