Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Rollover map of the USA


  • Please log in to reply
23 replies to this topic

#1 whelanska

whelanska

    Mach 1 Member

  • Members
  • 286 posts

Posted 27 April 2006 - 10:49 PM

Hi-

I've been tasked with creating a map of the USA where all the individual states will turn a different color when you roll over them (they'll also be links). What's the best way to do this? There are obviously lots of curves and edges and whatnot on all the states, so I'm wondering is there some javascript solution to this kind of thing?

Macromedia has one on their site: http://www.macromedi...ord=dreamweaver

It's pretty nice. Does anyone know how they do this? Are there any good tutorials out there for this sort of thing?

Thanks,

Matt

#2 whelanska

whelanska

    Mach 1 Member

  • Members
  • 286 posts

Posted 28 April 2006 - 06:26 AM

Ok, I've been doing a little research. Here's what I've found so far, and maybe someone can guide me from here. I downloaded this bit of software: http://www.mmaus.com/imagination.html, which allows me to easily create polygon image maps.

So, I've got the polygons in the image map taken care of. Now, I want to be able to have only the polygons (the states) change color when I roll over them. I found the following code at this website: http://lists.evolt.o...723/053968.html I think it may be what I need. I think it involves having transparent gif layers appear when you rollover the polygon sections of the map. I'm not very familiar with JS. Is there anyone out there who can break down the 'if' statements for me? Then we can all make rollover US maps together! Thanks, Matt


<script language="JavaScript">
<!--
// Pre-load images
if (Array && document.images)
{
dx = new Image(361,289);
dx.src = "mask/none.gif";
d0 = new Image(361,289);
d0.src = "mask/0.gif";
d1 = new Image(361,289);
d1.src = "mask/1.gif";
d2 = new Image(361,289);
d2.src = "mask/2.gif";
d3 = new Image(361,289);
d3.src = "mask/3.gif";
d4 = new Image(361,289);
d4.src = "mask/4.gif";
d5 = new Image(361,289);
d5.src = "mask/5.gif";
d6 = new Image(361,289);
d6.src = "mask/6.gif";
ix = new Image(90,184);
ix.src = "info/none.gif";
i0 = new Image(90,184);
i0.src = "info/0.gif";
i1 = new Image(90,184);
i1.src = "info/1.gif";
i2 = new Image(90,184);
i2.src = "info/2.gif";
i3 = new Image(90,184);
i3.src = "info/3.gif";
i4 = new Image(90,184);
i4.src = "info/4.gif";
i5 = new Image(90,184);
i5.src = "info/5.gif";
i6 = new Image(90,184);
i6.src = "info/6.gif";
}

function highlight(detail)
{
if (document.images)
{
document.images[0].src=eval("d"+detail+".src");
parent.frames[2].document.images[2].src=eval("i"+detail+".src");
}
}

function setback()
{
if (document.images)
{
parent.frames[2].document.images[0].src="photos/icon.jpg"
parent.frames[2].document.images[1].src="info/return.gif"
}
}
// -->
</script>
</head>
<body bgcolor="#000000" background="photos/full.jpg"
topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>

<img src="mask/none.gif" width=361 height=289 border=0
alt="" usemap="#details"><br><img
src="images/banner.gif" width=400 height=100 border=0 alt="">

<map name="details">
<area shape=poly

coords="146,113,152,101,166,93,184,90,203,94,217,104,221,113,218,126,210,135
,196,141,183,143,178,143,163,139,151,130,146,120,146,121,146,113"
href="0.html"
onMouseOver="highlight('0');" onClick="setback();">
<area shape=poly
coords="115,38,148,30,186,26,221,30,255,39,204,95,183,90,162,94,115,38"
href="1.html"
onMouseOver="highlight('1');" onClick="setback();">
<area shape=poly

coords="339,118,220,116,216,103,204,94,254,40,281,51,307,70,325,90,334,104,3
39,118"
href="2.html"
onMouseOver="highlight('2');" onClick="setback();">
<area shape=poly

coords="290,234,207,136,215,130,219,122,220,116,338,118,343,148,336,178,320,
210,290,234"
href="3.html"
onMouseOver="highlight('3');" onClick="setback();">
<area shape=poly

coords="72,229,158,136,171,141,182,144,193,142,207,136,289,233,258,249,217,2
60,189,263,151,260,120,252,72,229"
href="4.html"
onMouseOver="highlight('4');" onClick="setback();">
<area shape=poly

coords="27,113,145,113,145,121,151,131,158,136,72,229,45,205,32,187,25,170,2
1,142,27,113"
href="5.html"
onMouseOver="highlight('5');" onClick="setback();">
<area shape=poly

coords="28,112,42,87,55,71,66,63,87,49,113,37,161,94,151,102,145,113,28,112"

href="6.html"
onMouseOver="highlight('6');" onClick="setback();">
<area shape=default href="#"
onMouseOver="highlight('x');">
</map>



#3 whelanska

whelanska

    Mach 1 Member

  • Members
  • 286 posts

Posted 28 April 2006 - 01:20 PM

Sorry to be a pain... anybody have an idea as to how they do this? They use an image map, but how do they isolate the country rollovers?

http://www.macromedi...ord=dreamweaver

Thanks, Matt

#4 Scratch

Scratch

    Light Speed Member

  • Members
  • 964 posts

Posted 18 May 2006 - 03:43 PM

Whelenska, I'm actually doing exactly this at the moment for a client.. But it won't be ready for a couple of weeks. (Unfinished preview here: http://www.scratchmedia.co.uk/preview/1031cp/)

And I will be using JavaScript, together with an image map and a bunch of extra images.

I might write it up into a tutorial on my web site. Sorry I can't be more help right now.

#5 manager

manager

    Time Traveler Member

  • 1000 Post Club
  • 1331 posts

Posted 20 May 2006 - 01:14 PM

Flash might be option for you Matt, it did these ones of Northern Ireland in flash they’re scalable and they are less than 8kbs each. I just got a map and traced the counties. Fortunately for me there’s only six. The USA would take a little longer but not much, it depends how much time you are allowed for your project.

NI Clickable map in flash
NI Clickable map in flash, with a hint of smiley madness :)

TreV

#6 whelanska

whelanska

    Mach 1 Member

  • Members
  • 286 posts

Posted 20 May 2006 - 01:34 PM

that's a really nice map trev, very clean. scratch: your link isn't working for me...

#7 manager

manager

    Time Traveler Member

  • 1000 Post Club
  • 1331 posts

Posted 22 May 2006 - 07:03 AM

He He, I'm doing one of the good ole US of A in Fash. It's only eight Kbs, scalable, and with some basic actionscript It will do many tricks. I'm fine tuning the accuracy of the state boudaries. The North East states are a right pain in the neck to do. :)

Unfinished Clickable USA

TreV

#8 Black_Phoenix

Black_Phoenix

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1269 posts

Posted 22 May 2006 - 01:32 PM

Looks good Trev, boundaries look well placed

nice work

bp

#9 Black_Phoenix

Black_Phoenix

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1269 posts

Posted 31 May 2006 - 06:50 PM

I'll add this one as an alternative solution

http://www.tradedoub....jsp?reset=true

quite slick :)

bp

#10 Rich Pasco

Rich Pasco

    Unlurked Energy

  • Members
  • 7 posts

Posted 31 August 2006 - 11:00 AM

The task of making AREAs of an image MAP light up when the mouse hovers over them is a difficult one.

My working client-side image map has several hundred AREAs defining a MAP on a multi-megapixel image. Now, I would like to modify my code so that each AREA gets highlighted when the mouse hovers over it.

Most of the solutions I've seen involve swapping the entire image with another (one for each area) that is identical except for the highlighting. This is practical for a small image and just a few areas. However it is impractical to pre-store and download several hundred slightly-differing copies of my multi-megapixel image.

Adobe's store locator has just one copy of thier high-resolution map, and a separate overlay for each region. You can see the complete working site here:
http://store1.adobe....ayStoreSelector
and see one of the overlays here:
http://store1.adobe....r/map/v2/na.gif

I would prefer to draw each area as a polygon directly on the image when the mouse hovers, then restore the original image when the mouse leaves. That way only two images are needed: the unmodified original, and the scratch version onto which each highlighted AREA is drawn. What I'm missing is JavaScript code to highlight an AREA.

I tried Walter Zorn's JSGraphics package
http://www.walterzor...sgraphics_e.htm
but have been unable to make it modify a displayed image.

Surely what I'm trying to do can't be all that unusual. Can anyone point me to a working example?

- Rich

Edited by Rich Pasco, 01 September 2006 - 07:45 AM.


#11 Jozian

Jozian

    Light Speed Member

  • Members
  • 583 posts

Posted 31 August 2006 - 04:24 PM

Another way to do this is with Milonic's javascript menuing.

It gives you a whole lot of flexiblity and I love the program in general.

Popup data, subdata, even multiple links...

See examlpes here:

Euro map

WorldMap

US Map

Combining this with something like the flash examples above that do the graphics and rollover coloration might be really sweet....

-Jeff

#12 Rich Pasco

Rich Pasco

    Unlurked Energy

  • Members
  • 7 posts

Posted 31 August 2006 - 04:31 PM

Thanks, Jeff, for the links to Milonic's javascript menus. However, none of the examples you linked do what I want, which is to highight the region defined by each AREA--instead they pop up a rectangular box whose boundaries are unrelated to boundaries of the AREA being selected. In short: Nice code, but it's not what I was wanting to do.

- Rich

#13 send2paul

send2paul

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 2908 posts

Posted 31 August 2006 - 05:09 PM

Rich - hi and welcome to the Cre8asite forums and community :(

I'll be honest - I'm always mega-stonkily impressed by anyone who dabbles in the map/graphic mularchy! It takes skill, expertise etc. I hope you find what you're looking for here at Cre8asite. Try using the "search box" at the top right hand corner of the window, you may find some useful info that way.

Paul

p.s. if you want to, come and say a few words about yourself in the Introduce Yourself forum, and maybe have chat in After Hours ?

Edited by send2paul, 31 August 2006 - 05:10 PM.


#14 BillSlawski

BillSlawski

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15644 posts

Posted 01 September 2006 - 02:44 PM

Welcome to the forums, Rich.

Would using CSS instead of java script be ok?

Here's an example of a CSS image map:

http://www.tanfa.co....how.asp?var=289

You need to click through the screen shot to get to an actual working example.

#15 Jozian

Jozian

    Light Speed Member

  • Members
  • 583 posts

Posted 01 September 2006 - 02:54 PM

Wow, Brag.

Really nice work! :applause:

Love the 'flagged' rollovers. I'm going to chack out your css later and see how you did it.

Also, Rich: I should have been more clear - I figured that this wasnt exactly what you needed, but thought it might be helpful to others. Depending on what needs to be accomplished, the Milonic solution is great for displaying information without the need to click and navigate.

-Jeff

#16 Rich Pasco

Rich Pasco

    Unlurked Energy

  • Members
  • 7 posts

Posted 01 September 2006 - 03:02 PM

Nice job on the Euope map, bragadocchio, I like it.
I want to spend some time studying your example.

- Rich

#17 BillSlawski

BillSlawski

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15644 posts

Posted 01 September 2006 - 03:55 PM

As much as I would be proud to take credit for that example, I can't because it's not my work.

I figured that it should be possible, and started looking for an example rather than write the stylesheet myself. It is pretty nice.

#18 Rich Pasco

Rich Pasco

    Unlurked Energy

  • Members
  • 7 posts

Posted 01 September 2006 - 07:18 PM

Looking more cloesly at the CSS approach I see a problem with no obvious way around it: The "hot zone" (area over which the cursor activates the popup) must always be a rectangle. In Brag's example, hovering over the eastern point of Spain causes France to light up!

By contrast, with an HTML MAP, the AREA tags allow precisely specifying an irregular polygon as the "hot zone." Any ideas how to apply this advantage with the CSS architecture?

- Rich

#19 JohnMu

JohnMu

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 3518 posts

Posted 02 September 2006 - 06:49 AM

Perhaps SVG - scalable vector graphics (also here and here) would be something for you, Rich? Looks really slick -- but it also looks like the support is still a bit lacking in "non-extended" browsers. I've been hoping that something like this would finally catch on, there's just so much potential (but I suppose since it's not as simple for "Joe Webmaster" to include in a website-design, it will take a bit of time...).

John

#20 Rich Pasco

Rich Pasco

    Unlurked Energy

  • Members
  • 7 posts

Posted 02 September 2006 - 07:17 AM

Wow, thanks for those links, John! SVG is an impressive technology, but I'm afraid it won't meet my client's need, which is to run on contemporary browsers (MSIE 6.0, Netscape 7.2) without modifications or plugins.

I tried the carto.net examples in MSIE 6.0. The plug-in installed automatically, but I was prompted to accept a license agreement. In Netscape 7.2, I was sent to a "find the plug-in" page--which then couldn't find a plug-in for image/svg+xml after all.

I share your disappointment that "support is lacking in non-extended browsers" and don't want to inflict the job of installing a plug-in on my client's users, most of whom are non-technical and would probably give up.

Well, maybe I speak out of both sides of my mouth because I assume everybody has the Flash player, but then it seems to be much more commonplace.

- Rich

Edited by Rich Pasco, 03 September 2006 - 07:25 PM.


#21 yannis

yannis

    Sonic Boom Member

  • 1000 Post Club
  • 1634 posts

Posted 02 September 2006 - 09:52 AM

The "hot zone" (area over which the cursor activates the popup) must always be a rectangle.

Not really and that is the key. It can also be a polygon and it is easier to define it as accurately as you want it with this.
See shape and poly syntax.

Personally I haven't tried it but it makes sense and the most elegant solution would be CSS and poly. If I get sometime I will try it next weekend on southern Africa which is simpler! If anyone gets it before please post the example.

Yannis

#22 Rich Pasco

Rich Pasco

    Unlurked Energy

  • Members
  • 7 posts

Posted 02 September 2006 - 02:51 PM

Yannis, thank you for the pointer to the syntax for the AREA tag in HTML. Yes, I already know about its SHAPE and COORDS parameters. What I said was that the "hot zone: defined by a CSS style sheet (per Brag's example) must be a rectangle. Perhaps I'm mistaken, but I still don't see how to modify these lines (from Brag's example) to specify polygons for Spain and France. Can you help me?

#sp {left: 26px; top: 187px; width: 127px; height: 108px;}
#fr {left: 81px; top: 116px; width: 134px; height: 133px;}
#sp a {height: 108px;}
#fr a {height: 133px;}

- Rich

#23 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 02 September 2006 - 03:14 PM

Unfortunately, there isn't a way to apply the <map> syntax to a CSS list... The hot zone over an image map can be any shape, but this CSS technique is a bit more complicated - and, unfortunately, doesn't provide any means to create non-rectangular areas.

Boy, I wish it did! I'm making use of this CSS technique right now for a few pages on my site, but I only needed to define rectangular areas - if the technique was more flexible, I'd definitely apply it more extensively.

Alas, not an option, as far as I know. I don't know of any CSS specification which allows you to define a shape other than a rectangle for any element.

CSS2 provides the "clipping" property, which allows you to restrict to a specific shaped area subset - rendering portions of an element invisible. However, it's not expected to be expanded to non-rectangular shapes until CSS3.

This article talks about how to apply the clip property, but it pretty much comes down to it not being very useful, on the whole.

#24 voggers

voggers

    New To Community

  • Members
  • 1 posts

Posted 16 October 2006 - 05:06 AM

Is there any way of adding a mouseover to the links on the bottom of the page of bragadocchio country-example?
(holding the mouse over "France" in the list --> France's flag shows)



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users