Forum Moderators: open
.. Have used js rollovers before but only for regular objects like buttons....
Not sure about layers .... no experience
Want clean x browser & back compatability ...
Any tips or links to tutorial pages gratefully received..
I guess thats what you are hinting at with the "layering". I imagine it wouldnt be easy, but definetely a last resort if needs be.
there is an example of what I want to do at
url: cummins.com
which is pretty sweetly done imho ...
Could I use image map, irregular style action areas within flash? ...
(only a swish flash user at the moment)
- am trying to limit the number of new topics I have to learn
- no one pays my training bill sulk :-)
Could I use image map, irregular style action areas within flash?
I'm not a huge fan or user of Flash, but there are places where it is useful. I'm a Flash novice (exactly one Flash project to date), but even I could do what we are talking about here.
url: (snipped)
Oh, I see how they are doing it. Pretty cool. They create the imagemap, define event triggers on each hotspot, and then use some out-of-the-box Dreamweaver rollover scripting to show/hide some absolutely-positioned layers onmouseover/onmouseoff (each containing a transparent gif).
Pity the rollovers don't work in Mozilla, but at least the links still work.
Not quite constrained to the borders of the countries, but close enough. The only slight drawback being that when a layer is shown it hides the imagemap below, making transition zones between areas a little rough (i.e., if the Middle East is highlighted, you have to go way into Africa before the onmouseout event fires since it is tied to the square div that bounds the Middle East image).
Boy, I really am slow.
Me too then moonbiter ...
so when you talk about layers how does one set that up?
I suppose their might be other ways of doing it assuming the whole map image was small enough, I could swop the whole map in response to a mouseover to colour in each area ..
Shame I cannot use that colour table cells back colour thing somehow to make a quick acting solution ..
Your action areas can be any shape you want them to be.
Yes, and that factor alone makes Flash a good tool here. The huge pile of rollover code required in standard HTML/JavaScript would be a detriment to the page on search engines.
I think this functionality is very basic in Flash, too -- so you can be backward compatible to a high degree, using for instance Flash 3 files.
so when you talk about layers how does one set that up?
Hmm. This is probably how they did it:
1) Make two versions of your map, one for the image map and one for the rollovers.
2) Then slice the rollover map up into a bunch of smaller images that highlight the appropriate areas (you will be limited to boxes, but that's okay). Make sure the background of the slices is transparent to the basic background color of the image map. Also make sure you get the x and y coordinates of the image slices when you make them, so when you position them later they fall onto the map correctly. Also note the height and width of these sliced images.
3) Next, create an absolutely-positioned div to contain your image map. It should be the same size as your image. Note the top (x) and left (y) coordinates you give it.
4) Now, define the areas of your imagemap normally. The onmouseover event trigger should be placed here (i.e., onmouseover="showLayer();").
5) Then make some absolutely-positioned divs for each rollover. Dreamweaver can do this right out of the box. If you are coding by hand, it's not too hard either (example):
<div id="usa" style="position: absolute; top: 100px; left: 100px; height: 100px; width: 200px; z-index: 100;"></div>Top should be equal to the top value of the div containing the image map plus the x value of the slice you noted earlier. Left, of course, should be equal to the left value of the image map div plus the y coordinate of the slice. Height and width should be the height and width of the image.
You would also define the same onmouseover event trigger on this div as you would on the imagemap area it overlays, as well as an onmouseout trigger (i.e. onmouseout="hideLayer();").
6) Next, put your images into these layers. Easy.
7) Finally, you would put in your showLayer() and hideLayer() code (i'm not gonna write that here -- you can find that kind of stuff in many places on the Net ;)).
It's a lot of code, and a lot of markup (especially if you wanted it to be cross-browser, including [spit] Netscape 4.x). Flash would be waaay easier, is downloadable as a plugin, and like tedster said, this functionality is really basic in Flash.
Have been off doing more normal html stuff etc .. looks like I do need to understand layers as I would much rather make this functionality in html than flash.
I like flash but not as part of basic website functionality which I think should be as cross compatible and "simple html" as possible.
