www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need some advice for making a map

  1. #1
    Join Date
    Feb 2012
    Posts
    12

    Need some advice for making a map

    Hey Im making an interactive map. I am also very new to this stuff

    I am using South America. 12 countries. I have used html image maps to make the different countries links. So when I click on where Argentina is it takes me to the relevant page.

    There are 2 more things I am after with this map.

    1) I would like to make it so that when you move your mouse over a paticular country it changes in someway. Whether that be by lighting up or down or the border lighting up or the area changing colour.

    This tutorial has the right kind of idea

    http://www.w3schools.com/css/tryit.a...e_transparency

    how would I incorporate that into the map? Would I incorporate it into the html map code?

    EDIT: I can make the whole map do this hover transparent thing but not the sections



    2) I would also like small popup boxes to appear with the countries name in them. So when you put your mouse over Argentina a small box or label appears saying "Argentina". When your mouse is not over argentina the label is hidden. The label can be on the map, as a label, underneath the map. It doesnt matter too much.

    Would I use CSS for this?


    Thanks for any help/guidance/advice
    Last edited by muddy51; 02-15-2012 at 12:05 PM.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there muddy51,

    1. You would need to make twelve "effect" images and use javascript to swap them on mouse over.

    2. Use the title attribute for this.

    coothead

  3. #3
    Join Date
    Feb 2012
    Posts
    12
    Quote Originally Posted by coothead View Post
    Hi there muddy51,

    1. You would need to make twelve "effect" images and use javascript to swap them on mouse over.

    2. Use the title attribute for this.

    coothead

    Ok so if I have a red map for example I could make a blue image of argentina. I would insert the correct code to change to the blue image of argentina when a mouse moves over it?


    thanks for your input I appreciate it

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there muddy51,

    if you need help coding the image changing then give me the thirteen images,
    and your map code, and I will code the javascript for you.

    coothead

  5. #5
    Join Date
    Feb 2012
    Posts
    12
    Quote Originally Posted by coothead View Post
    Hi there muddy51,

    if you need help coding the image changing then give me the thirteen images,
    and your map code, and I will code the javascript for you.

    coothead
    I hugely appreciate that you would do something so kind for me however I believe I need to do this myself. I am trying my best to learn as much as possible and in my opinion the best way to learn is by doing it. It might take me ages to do and Ill probably make a lot of mistakes but I will learn along the way.

    I just wanted to know if it was possible to do and a general idea of what I have to do. You have given me a little bit of direction so I will try myself.

    I do appreciate your offer though. Thanks

  6. #6
    Join Date
    Jan 2009
    Posts
    88
    If you have the image in JPG / PNG format, then you can use iMapBuilder to convert it into an interactive flash map. This custom mapping software has a windows version (which you can download for using on your own PC) as well as an online version which runs in browser.

    Once you imported the image, you can add all those interactive functions you need, including small popup boxes on mouseover, clickable 'hotspots' which link to a web page or email address, and lines, curves, etc. No any coding, actionscript, or javascript required. So it can work well for you if you prefer not to touch any coding.

    The map can then be embed to your own website, or share via email.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles