Results 1 to 11 of 11

Thread: [RESOLVED] HTML Map page

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Resolved [RESOLVED] HTML Map page

    Code:
    <html>
    <body>
    
    <img src="http://www.mywebsite.com/map21.gif" width="400" height="400" usemap="#map21">
    
    <map name="map21">
    
    <area shape="poly" data-region-id="1" alt="Galigaria" title="Galigaria" 
    href="http://www.maywebsite.com/Galigaria" coords="65,55,64,55,64,56,60,55,61,58,62,59,62,61,63,63,66,63,66,68,70,72,70,72,71,71,72 />
    
    <area shape="poly" data-region-id="2" alt="Ranulagasta" title="Ranulagasta" 
    href="http://www.maywebsite.com/Ranulagasta" coords="101,33,103,33,103,35,103,38,103,39,103,41,104,42,105,42,105,43,104,43,108,46,108 />
    
        '
        '
        '
        '
        '
    </map>
    
    </body>
    </html>
    Above is a sample portion of the HTML I am working on. As you can see it is nothing more than a simple map page. As you drag mouse over a region the name of that region will display. What I am wanting is in addition to the name being displayed I want that region to highlight in some color of my choice. What do I need to do to accomplish this

  2. #2
    Fanatic Member Spooman's Avatar
    Join Date
    Mar 2017
    Posts
    868

    Re: HTML Map page

    CD

    Out of my league here, but I'm interested.
    And, if it's not a pain, could you post a screenshot.

    Spoo

  3. #3

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: HTML Map page

    Better than a screenshot. Here's a link to a web site where you can see for yourself. Just move the mouse over the map of Italy and you will see what I am talking about. Also, if you move the mouse over the menu list on the right it will also make that region on the map highlight. I would also like to know how that is done.

    https://www.subito.it/

  4. #4
    Fanatic Member Spooman's Avatar
    Join Date
    Mar 2017
    Posts
    868

    Re: HTML Map page

    CD

    Wow, you're right. That is better .. and cool, too.

    Not an answer, but rather, a question ..
    What do the coordinate numbers here represent?
    Code:
     coords="65,55,64,55,64,56,60,55,61,58,62,59,62,61,63,63,66,63,66,68,70,72,70,72,71,71,72 />
    My first reaction was that they were pairs, but there is an odd number of them, so that can't be right.

    Spoo

  5. #5

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: HTML Map page

    Yes, they are pairs of coords. Don't go by my code as I didn't post all the cords for the shapes as there were too many of them. Each pair is a point on the area.

    The <map> and <area> tags are really simple to do and you can get some really cool displays. You don't have to use maps of countries; I've seen things like our Solar System, games, etc.

  6. #6
    Fanatic Member Spooman's Avatar
    Join Date
    Mar 2017
    Posts
    868

    Re: HTML Map page

    CD

    OK, got it.

    As for your shading issue:

    1. I take it that you are able to draw the polygon
    2. Could you then issue a ton of "horizontal line" calls?
    3. You could start at the top y-coord, and work your way down to the bottom y-coord.
    4, Are the coords in pixels, twips, other?
    5. Granted, this would be rather complex, especially interpolating between diagonal border lines.

    Just a wild thought.

    Spoo

  7. #7

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: HTML Map page

    I'm starting to get the idea of how it's done but it's still a puzzle and I'm a long way from getting all the pieces. Apparently there are 20 small transparent gif images (see note below) where each image represents one of the regions of the larger map and is already colored. These smaller images overlay the area where the mouse is currently hovering. In the css code there are statements that tell where the region is to be overlayed (some offset into the larger image) and which piece is to be selected for overlaying.

    Note: Actually, there are not 20 different images but one large image strip that is divided into 20 sections each section is one of the regions of the large map. So the css code must point out which portion of the strip (an offset into the strip) is to be used and where it is to be placed.

    One of the things I don't know is how it is determined that the mouse is hovering over a region of the large map and then using this info
    Last edited by Code Dummy; Sep 2nd, 2017 at 03:33 PM.

  8. #8

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: HTML Map page

    I can see that this is not a very popular Forum as this thread is still on top of the list and I'm also pretty sure that what I am asking is above most programmers heads so I don't expect anyone to pop in and say here's one way to do it. Anyway, as I search more and more into this I believe I'm getting closer to the answer as I can now at least make a page where you move the mouse over an image I can display it as a different color and when the mouse moves off the image it goes back to it's original color which is very close to the original task but still there are a few things not yet worked out

  9. #9
    Fanatic Member Spooman's Avatar
    Join Date
    Mar 2017
    Posts
    868

    Re: HTML Map page

    CD

    That's progress .. color changes.
    I, for one, am interested (though not much help)
    Keep us posted

    Spoo

  10. #10

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: HTML Map page

    Go to this site. It will give you an idea of how it works. Although there are still some missing pieces to the overall puzzle it's a big step in knowing how to do it. Read on the other pages as well there are many things you can learn at this site

    https://www.w3schools.com/css/css_image_sprites.asp

  11. #11

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: HTML Map page

    OK, got it to work just like the sample in post 3. It's quite involved

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width