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

Discussion in 'HTML' started by Guy Doucet, May 29, 2005.

  1. Guy Doucet

    Guy Doucet Guest

    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
    Guy Doucet, May 29, 2005
    #1
    1. Advertising

  2. Guy Doucet

    mscir Guest

    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>
    mscir, May 29, 2005
    #2
    1. Advertising

  3. Guy Doucet

    John Smith Guest

    .... broke on my windows xp with IE 6.0...

    John
    "mscir" <> wrote in message news:...
    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>
    John Smith, May 29, 2005
    #3
  4. Guy Doucet

    dorayme Guest

    > From: "Guy Doucet" <>

    > 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
    dorayme, May 29, 2005
    #4
  5. Guy Doucet

    Guy Doucet Guest

    "dorayme" <> wrote in message
    news:BEBFB364.12148%...
    > > From: "Guy Doucet" <>

    >
    > > 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
    Guy Doucet, May 29, 2005
    #5
  6. Guy Doucet

    Guy Doucet Guest

    >
    > 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.
    Guy Doucet, May 29, 2005
    #6
  7. Guy Doucet

    Toby Inkster Guest

    Toby Inkster, May 29, 2005
    #7
  8. Guy Doucet

    Guy Doucet Guest

    "Toby Inkster" <> wrote in message
    news:p...
    > 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
    Guy Doucet, May 29, 2005
    #8
  9. Guy Doucet

    dorayme Guest

    > From: "Guy Doucet" <>
    > 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" <> 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
    dorayme, May 30, 2005
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Robert M
    Replies:
    1
    Views:
    666
    Curt_C [MVP]
    Jan 5, 2004
  2. =?Utf-8?B?Q2hyaXMgRmluaw==?=

    Highlight datalist row on itemDataBound event

    =?Utf-8?B?Q2hyaXMgRmluaw==?=, Dec 17, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    5,071
    rcbalbo
    Aug 9, 2006
  3. Neal
    Replies:
    25
    Views:
    11,220
    Charles Angelich
    Aug 2, 2004
  4. Jack
    Replies:
    8
    Views:
    264
  5. Replies:
    4
    Views:
    228
    Thomas 'PointedEars' Lahn
    May 9, 2005
Loading...

Share This Page