Results 1 to 6 of 6

Thread: Image map FROM a drop down menu

  1. #1
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image map FROM a drop down menu

    I have searched high and low for a tutorial, lesson or even an example of a horizontal menu that when a mouse hovers over a menu item such as a category, say likes States, in the menu, a drop down of a map of the US with each state being a link to the individual state page and also have effects such as changing color. I have accomplished the project in a page using both css and javascript but applying that into a drop down menu have proven unsuccesful. I was hoping someone here could show the errors of my way, or just a link to example of a site that does this because at this point, I do not fully convinced it is possible but again, nothing is impossible if they have the right motivation, mine being just such a case, my boss wants it done. If anyone can help, please do, I would really appreciate the assistance.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    You need an image in your drop down with an image map
    To link to the state each map area can have a link

    to change the color(image) on mouseover the image src can be swapped or you could use something like

    http://www.vicsjavascripts.org.uk/Ma...MapHiLight.htm
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks Vic, swapping the image is how I have the map working now, it is in how I implement the image map in the drop down that has befudled me. I can explain, on my page I have taken a map of the United States with each state outlined, flipped that into an image map that changes the state color, an alt tag displays state name and if they click on the state, of course they are taken to that particular state detail page. This a commerce site by the way. I have accomplished this with a combination of jquery, js and css files. The problem if I can call it that is that now the boss wants that to be in the horizontal navigation menu on our site. We have other style sheets managing the cosmetic aspects of things but as I introduce this all into the menu, I have been met with nothing but failure. I can't even find an example where anyone else has done this to their site but the boss says that's what he wants, I just can't figure out to do it. I hope I can atriculate my question correctly, sometimes that is as hard as the code. Thanks for your reply.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,963
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    Did I read your post correctly? Do you want to use state outlines/shapes as navigation?

    Is that really wise? It just seems to be a really bad idea from a usability perspective. What if somebody doesnt recognise their state shape? That might sound silly when you know the shape of yours, but not everybody is as intelligent as you are. Or what if a person wanted to get info for another state? Would they need to consult Google maps first? Even with otherwise very intelligent people, visual representations can cause problems - take me for example - Im far from stupid but I cant read a map or give directions to save my life, and the UK is a lot smaller than the US

    Words are generally more concise and less open to wrongful interpretation than images - and better for search engines too.

    Please use words upfront on your map at least. You mention use of the alt tag, but the hover tooltip it produces is only a side-effect of hinky interpretation in IE. Other web browsers won't provide that important navigational cue on hover - using the title tag will though, so even if you only take one pointer from my reply, please let it be that you use title="" as well as alt="".

    Maybe I got your intentions all skewed though so feel free to correct me. I just got a bit flustered by the usability alarm in my head.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    All your concerns are well warranted, it simply is a matter of who calls the shots, believe me, we have had this conversation with him many times, he is a VP, I, a mere programmer and though it would probably seem beneficial to assume I would know what, how and why I would want something on the site, it isn't always his same line of thinking. You are correct in that we will use a map of the USA with each state outlined and the state abbreviation on the state, i.e. CA, IN or WA. The map is white, the outline is teal and the text is also bolded teal, arial font, quite readable. When moused over, the state displays the alt tag with the entire state name, the state shape changes to a solid teal color, of that state naturally, and he wants it to be a dropdown when the category in the nav menu is moused overed. Again, I can't even find an example of anything like that. The map, well, that is accomplished, dropping it from a "call to action" is entirely more difficult than I imagined, honestly, I haven't decided if it is even possible but again, we have to look at what motivates us and in this case, it is my job. Thanks for your reply, I do hope someone has ideas, this has been a challenge.

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Anylink drop down menu for image map
    By paranoidandroid in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-20-2009, 04:58 AM
  2. Pls Help on drop down menu with image map
    By loveandhatred in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 02-19-2009, 03:02 PM
  3. CSS image drop down menu..
    By 4gotten in forum CSS
    Replies: 3
    Last Post: 09-17-2008, 09:11 AM
  4. Drop Down Image Link Menu
    By Guaca in forum Looking for such a script or service
    Replies: 2
    Last Post: 07-08-2008, 06:01 PM
  5. drop down menu w/ IMAGE description
    By devinodaniel in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 05-03-2008, 12:33 AM

Bookmarks

Posting Permissions

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