Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > can I highlight part of an image on an event...?

Reply
Thread Tools

can I highlight part of an image on an event...?

 
 
Guy Doucet
Guest
Posts: n/a
 
      05-28-2005
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


 
Reply With Quote
 
 
 
 
mscir
Guest
Posts: n/a
 
      05-29-2005
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=rep ortstring;
}
</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>

 
Reply With Quote
 
 
 
 
John Smith
Guest
Posts: n/a
 
      05-29-2005
.... broke on my windows xp with IE 6.0...

John
"mscir" <(E-Mail Removed)> wrote in message news:(E-Mail Removed)...
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=rep ortstring;
}
</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>

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      05-29-2005
> From: "Guy Doucet" <(E-Mail Removed)>

> I have a large image of a map, approx 2000 x 2000 pixels.


> 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.


What is the question exactly? What does it mean "to highlight a ... part of
a map on an event"? Take the coronation of the Queen of England back in
1952. Would a bit of a map that flashed on and off of the route taken by the
horse and carriage be this map thing you call "on this event"?

You serious about a 2000 by 2000 px image? Hope this is not for dialup
connection all at once? If not all at once, what's the problem of displaying
a part?

Sorry, I am in a bad mood... now I feel guilty. I have a map on a website of
mine to show people how to get to an office. It is about 600 x 600 and has
arrows and text to show the larger context like 'to Sydney', 'north',
'south', etc and detailed street map of the relevant bit of the freeway and
streets to the building concerned. What's this about the big map?

You might have a big map. There's no problem about it sitting on your desk
or in 100 little bits on your computer. Or on your server. When a customer
"selects an office from a list" why not link the list to the *relevant*
specific map. Why the need for the huge one and highlight?

dorayme

 
Reply With Quote
 
Guy Doucet
Guest
Posts: n/a
 
      05-29-2005

"dorayme" <(E-Mail Removed)> wrote in message
news:BEBFB364.12148%(E-Mail Removed)...
> > From: "Guy Doucet" <(E-Mail Removed)>

>
> > I have a large image of a map, approx 2000 x 2000 pixels.

>
> > 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.

>
> What is the question exactly? What does it mean "to highlight a ... part

of
> a map on an event"? Take the coronation of the Queen of England back in
> 1952. Would a bit of a map that flashed on and off of the route taken by

the
> horse and carriage be this map thing you call "on this event"?
>
> You serious about a 2000 by 2000 px image? Hope this is not for dialup
> connection all at once? If not all at once, what's the problem of

displaying
> a part?
>
> Sorry, I am in a bad mood... now I feel guilty. I have a map on a website

of
> mine to show people how to get to an office. It is about 600 x 600 and has
> arrows and text to show the larger context like 'to Sydney', 'north',
> 'south', etc and detailed street map of the relevant bit of the freeway

and
> streets to the building concerned. What's this about the big map?
>
> You might have a big map. There's no problem about it sitting on your desk
> or in 100 little bits on your computer. Or on your server. When a customer
> "selects an office from a list" why not link the list to the *relevant*
> specific map. Why the need for the huge one and highlight?
>
> dorayme
>


I guess I wasn't accurate in my describing the situation. The customers in
this are employees in the office and so speed would not be an issue.

You're right that I could display part of the map as opposed to the entire
map, but displaying the entire map would have other advantages.
It's not a detailed map to begin with, doesn't have street names, and
looking at just a section may not be enough to know where this section fits.

I know I can highlight a section if I make two copies of the map - the
original map with white background and smaller pieces of the map in yellow
background.
At the same time, having two copies of the map doesn't appeal to me.

Thanks for all so far,

G Doucet


 
Reply With Quote
 
Guy Doucet
Guest
Posts: n/a
 
      05-29-2005
>
> I know I can highlight a section if I make two copies of the map - the
> original map with white background and smaller pieces of the map in yellow
> background.
> At the same time, having two copies of the map doesn't appeal to me.
>


Actually, with 100 images, I think I would need 100 different functions...
this is getting hopeless...
I guess I just won't highlight anything!

Thanks again.


 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      05-29-2005
Guy Doucet wrote:

> I have a large image of a map, approx 2000 x 2000 pixels.


Ouch!

http://examples.tobyinkster.co.uk/map/map

Tested and works: IE 5+, Mozilla 1+, Opera 7+. Uses pretty alpha-blended
PNG images in those browsers that support them.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Guy Doucet
Guest
Posts: n/a
 
      05-29-2005

"Toby Inkster" <(E-Mail Removed)> wrote in message
news(E-Mail Removed) .uk...
> Guy Doucet wrote:
>
> > I have a large image of a map, approx 2000 x 2000 pixels.

>
> Ouch!
>
> http://examples.tobyinkster.co.uk/map/map
>
> Tested and works: IE 5+, Mozilla 1+, Opera 7+. Uses pretty alpha-blended
> PNG images in those browsers that support them.
>
> --
> Toby A Inkster BSc (Hons) ARCS
> Contact Me ~ http://tobyinkster.co.uk/contact
>


WOW!!!!!
I'm glad I took another look.
G Doucet


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      05-29-2005
> From: "Guy Doucet" <(E-Mail Removed)>
> Organization: Aliant Internet
> Newsgroups: alt.html
> Date: Sun, 29 May 2005 12:20:48 GMT
> Subject: Re: can I highlight part of an image on an event...?
>
> "dorayme" <(E-Mail Removed)> wrote in message


>> streets to the building concerned. What's this about the big map?
>>
>> You might have a big map. There's no problem about it sitting on your desk
>> or in 100 little bits on your computer. Or on your server. When a customer
>> "selects an office from a list" why not link the list to the *relevant*
>> specific map. Why the need for the huge one and highlight?
>>
>> dorayme
>>

>
> I guess I wasn't accurate in my describing the situation. The customers in
> this are employees in the office and so speed would not be an issue.
>
> You're right that I could display part of the map as opposed to the entire
> map, but displaying the entire map would have other advantages.
> It's not a detailed map to begin with, doesn't have street names, and
> looking at just a section may not be enough to know where this section fits.
>
> I know I can highlight a section if I make two copies of the map - the
> original map with white background and smaller pieces of the map in yellow
> background.
> At the same time, having two copies of the map doesn't appeal to me.
>
> Thanks for all so far,
>
> G Doucet


If speed is not a problem, what about the 2000 pixels? Have the employees
got such big screens?

OK. Lets suppose scrolling is no big deal. You have this big map in a table
all sliced up in a hundred bits. The customer/employees (a captured market
eh?) click on some list you have. Depending on the thing they click, a map
will appear with a particular bit highlighted.

Excuse me if this seems a bit dumb but it is a solution: you have each link
go to a different html page. Each page will be very similar, just one cell
different to a master table (in which no cells are "highlighted" - a table
that you do not necessarily display, it being your working behind-the-scenes
template). How many links are in the list? However many, you will have as
many html pages. It is easy for you to do. Only those are called from the
server that are needed. And, even though speed is not a consideration, it
will also be fast if someone is browsing to see various parts of the map or
offices or whatever because all the images in all the cells will be cached
and appear quickly *the second time* around (at least).

There may be more elegant solutions with javascript and rollovers and stuff.
But by the time you have coded for it all, you might have done the above
which will sure fire work.

I hope this helps.

dorayme

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How can I highlight the current row in a JTextArea? Markus Java 5 07-02-2010 07:03 AM
Ricoh GXR is brilliant way to highlight current P&S image failings Rich Digital Photography 0 11-10-2009 07:38 AM
Select/highlight a specific part of text string inside a form element nboutelier@hotmail.com Javascript 4 05-09-2005 06:17 PM
No highlight on image that is a link Neal HTML 25 08-02-2004 05:23 AM
Can not highlight text in a textbox on a ASP.net Page Robert M ASP .Net 1 01-05-2004 10:04 PM



Advertisments