• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

HTML Area Maps

A

Alex

Diamond Member
im working on a simple page that will show a map and when the user clicks on a state it will open up information regarding that state.

problem is the links aren't really obvious... i was wondering whether there's a way, using javascript (jquery better) to highlight individual portions of an image map, or whether i'd have to break down the images by state and make a big puzzle image on my website... in that case i know how to do it, but just the thought of piecing all those puzzle pieces together and making them fit in a html page gives me the shudders...

thanks! 🙂
 
When I've done this in the past, I created a quick little Flash app that highlighted the different areas (counties in my case) on mouseover (all counties, of course, were also colored).

This would be what I recommend, rather than an image map...that would be a gigantic image map with really rough polygons...
 
Originally posted by: drebo
When I've done this in the past, I created a quick little Flash app that highlighted the different areas (counties in my case) on mouseover (all counties, of course, were also colored).

This would be what I recommend, rather than an image map...that would be a gigantic image map with really rough polygons...
Click to expand...

i hate flash 🙁

but i guess you're right its the easiest way to do it.... thing is i suck at flash and am pretty proficient with jquery to create flash-like effects 🙂
 
To do this in flash is easy...you just create each different area as a button. No special actionscript or anything.
 
Is this what you're refering to? http://www.cssplay.co.uk/artic...emap/examples/ten.html

You can do it, but it takes a bit of css and extra images. Basically, you make images that have transparent backgrounds and just the borders of the areas you want to map and using css make the border image appear over the image when is hovering over. You have to do it for each area. It's a big pain. Worse if you have odd shaped areas.

 
it is a lot like Flash Actionscript. do they call that an array ?
<dd id="picp"> that is

i don't care about Jesus coming back, but I would like it if Elvis
& the Beatles came back.

h4>Styling the first line of the text</h4>
<dl id="imap">
<dt><a id="title" href="#nogo" title="The Beatles">The Beatles</a></dt>
<dd id="picp"><a id="paul" title="Paul McCartney" href="#nogo"><span>Paul McCartney - Bass Guitar and Vocals<br /><br />Paul McCartney's song, Yesterday, recently voted the most popular song of the century by a BBC poll, was initially composed without lyrics. Paul used the working title 'scrambled eggs' before coming up with the final words.</span></a></dd>
<dd id="picr"><a id="ringo" title="Ringo Starr" href="#nogo"><span>Ringo Starr - Drums<br /><br />Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, when she wouldn't come out and play with Mia and the Beatles at a religious retreat in India.</span></a></dd>
<dd id="picj"><a id="john" title="John Lennon" href="#nogo"><span>John Lennon - Guitar and Vocals<br /><br />In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool contest principally because they called in posing as different people and voted for themselves numerous times.</span></a></dd>
<dd id="picg"><a id="george" title="George Harrison" href="#nogo"><span>George Harrison - Lead Guitar and Vocals<br /><br />The Beatles' last public concert was held in San Francisco's Candlestick Park on August 29, 1966.</span></a></dd>
 
Originally posted by: aceO07
Is this what you're refering to? http://www.cssplay.co.uk/artic...emap/examples/ten.html

You can do it, but it takes a bit of css and extra images. Basically, you make images that have transparent backgrounds and just the borders of the areas you want to map and using css make the border image appear over the image when is hovering over. You have to do it for each area. It's a big pain. Worse if you have odd shaped areas.
Click to expand...

thanks thats kinda exactly what im looking for! 🙂

its a map of brazil so plenty of weird shapes so itll be a pain but im pretty XHTML + CSS proficient so hopefully ill nail this in a few hours!

thx!! 🙂
 
I'm highly against using flash for any major features on a webpage. If it can't be done via javascript/xhtml/css then it should be rethought imho.

Nothing is more annoying then flash sites. Perfect example, the diablo 3 site. I want to watch a video. It's loading slow because my work connection sucks, so I want to read the story on another link while I wait. So I need to open in a new window or tab. I right click, oh I can't right click because the navigation interface is flash. Very annoying.

Flash is fine for little things, small applications (I've made a few of those) and games. Major web site functionality is just annoying when it is in flash. Not to mention all the accessibility things that get lost with flash. I can't grow the text size on my own, tweak how it looks to make it easier for me to read color wise, etc.
 
Originally posted by: sourceninja
I'm highly against using flash for any major features on a webpage. If it can't be done via javascript/xhtml/css then it should be rethought imho.

Nothing is more annoying then flash sites. Perfect example, the diablo 3 site. I want to watch a video. It's loading slow because my work connection sucks, so I want to read the story on another link while I wait. So I need to open in a new window or tab. I right click, oh I can't right click because the navigation interface is flash. Very annoying.

Flash is fine for little things, small applications (I've made a few of those) and games. Major web site functionality is just annoying when it is in flash. Not to mention all the accessibility things that get lost with flash. I can't grow the text size on my own, tweak how it looks to make it easier for me to read color wise, etc.
Click to expand...

None of your concerns are at all Flash specific. A poorly designed website is a poorly designed website, regardless of the language used to write it or the method used to display it.

Categorizing an entire technology as worthless just because you don't know how to properly use it is just plain stupid.

Everything you've said can be applied to Javascript, AJAX, and CSS, just as much as it can be applied to Flash or Java. The usefulness of a site is up to its designer, not the technologies he's chosen to implement.
 
Originally posted by: drebo
Originally posted by: sourceninja
I'm highly against using flash for any major features on a webpage. If it can't be done via javascript/xhtml/css then it should be rethought imho.

Nothing is more annoying then flash sites. Perfect example, the diablo 3 site. I want to watch a video. It's loading slow because my work connection sucks, so I want to read the story on another link while I wait. So I need to open in a new window or tab. I right click, oh I can't right click because the navigation interface is flash. Very annoying.

Flash is fine for little things, small applications (I've made a few of those) and games. Major web site functionality is just annoying when it is in flash. Not to mention all the accessibility things that get lost with flash. I can't grow the text size on my own, tweak how it looks to make it easier for me to read color wise, etc.
Click to expand...

None of your concerns are at all Flash specific. A poorly designed website is a poorly designed website, regardless of the language used to write it or the method used to display it.

Categorizing an entire technology as worthless just because you don't know how to properly use it is just plain stupid.

Everything you've said can be applied to Javascript, AJAX, and CSS, just as much as it can be applied to Flash or Java. The usefulness of a site is up to its designer, not the technologies he's chosen to implement.
Click to expand...

i agree partly with both of you...

this isn't meant to be a flash debate but i agree with sourceninja in that i avoid flash at all costs...

there was once a time when certain styles and types of websites were great as 100% flash endeavors but nowadays, specially with the rising popularity of jQuery, i've seen websites that possess a lot of the flash "catchyness" with the practicality of regular HTML + CSS...
so basically i wouldn't touch flash unless i absolutely HAD to... 🙂
 
I take back my statements, and submit this. I highly recommend you avoid flash until your web design skills with flash are better then the following:

Blizzard.com
Every car manufactures website on the planet.
Every single website I've ever used that has flash on it.

Once you have done that, I'm all for flash.
 
Originally posted by: sourceninja
I take back my statements, and submit this. I highly recommend you avoid flash until your web design skills with flash are better then the following:

Blizzard.com
Every car manufactures website on the planet.
Every single website I've ever used that has flash on it.

Once you have done that, I'm all for flash.
Click to expand...

lol 😛
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top