| Hybrid drop-down menu / image-map menus
Dynamic image switching
What's "dynamic image switching"?
You've probably been to a website sometime and seen that when you
move the mouse over certain links or hotspots, an image somewhere
else on the page changes in a context-sensitive manner. Effects like
this are often linked to menu systems. As you mouse-over the menu
options wondering which to click, a picture changes giving you a
visual idea of what you might find at the new location.
Without our applets you would need a whole lot of complicated
javascript to achieve this. And even then you couldn't combine this efficiently
with an imagemap.
With our applets you can do it simply, much more powerfully, and efficiently as well.
How do I do it?
Every hotspot on the iMMap surface has a number already assigned to it. For example,
if you defined 10 hotspots in your MAP file and occupied these hotspots with 10
top-level index items in your index file, then the hotspots would be numbered
from 0 to 9 (zero-basing!).
Now every hotspot can double up as a kind of TV screen for displaying dynamically
loaded images. (In fact you can even de-activate the "hotspot"-behaviour of the
hotspot and just have it serve as a screen to display dynamic images - but more about
that later). If you want a mouse-over action on any menu entry to dynamically display
an image elsewhere, you write the following into your index file:
"TEXT:My Text;IMAGE:picture.gif,3" "2" "" "LINK:myPage1.html,myFrame" "[message]"
The blue bit is what you already know from writing index files. The red bit is
the bit that does the dynamic image load. You write "IMAGE:" followed by the
name of your GIF or JPG, followed by a comma, followed by an integer that references
the hotspot. For example, the above line loads picture.gif into hotspot
number 3 when the mouse moves over this entry. NB: note the semi-colon separating
the IMAGE command from the TEXT command.
What's more, you can do multiple dynamic image switching.
"TEXT:My Text;
IMAGE:picture1.gif,3; IMAGE:picture2.gif,4; IMAGE:picture3.gif,5" "2" "" "LINK:myPage1.html,myFrame" "[message]"
The above line loads three different images into hotspots 3, 4 and 5. There's no
limit to how many of the IMAGE commands you can insert. NB: in the example above, this
web page has wrapped the index file entry over several lines. Remember that when you
write your index file, don't copy and paste the above, because then you'll copy the line-break
characters by accident and that will result in an invalid index file. Write the entry as one line!
Hiding a hotspot
Normally any hotspot on the imagemap will be outlined when the mouse moves
over it, and if a sub-menu is available, the sub-menu will pop-up. However
you may wish to use the hotspot for dynamic images only. Preventing the submenu
popping up is easy - you just don't write any submenu items in the index file.
Stopping the outline from appearing around the hotspot is slightly more diffcult.
"HIDDEN:" "1" "" "" ""
The above line in an index file defines a hidden hotspot. This may be targetted
by dynamic images, but will not react to anything itself.
"HIDDEN:; IMAGE:picture.gif,3" "1" "" "" ""
The above line is a hidden hotspot that nevertheless dynamically loads an image
somewhere else on the imagemap if the mouse happens to wander over it.
Hidden hotspots can also perform any other actions
if you define these (such as linking to pages if clicked). These features may
be of use to imaginative designers (treasure trails?).
Self-targeting a hotspot
Suppose you write the following:
"TEXT:My Text;IMAGE:picture.gif,3" "1" "" "LINK:myPage1.html,myFrame" "[message]"
...where this particular entry is hotspot 3 (note that the IMAGE command targets picture.gif
at hotspot 3). What happens? Well, the hotspot no longer gets the usual highlighted border around it. Instead
picture.gif loads into the hotspot area. You can use this for defining your own hotspot
highlight effects. In addition, if the hotspot spawns a submenu, even when the mouse moves off the hotspot
onto the submenu, picture.gif remains visible. It only disappears when the mouse has
left the hotspot and its submenus. This again creates all sorts of possibilities for imaginative
use.
Image pre-loading
If you are an experienced web-designer, you will already know about this problem. Mouse-over
images only appear quickly if they have already been downloaded from the server before
the mouse moves over the trigger or hotspot. This is known as "pre-loading".
The trouble with traditional pre-loading is that (i) it's complicated, and (ii) it delays
the original page loading.
iMMap Pro features something called "multi-threaded image pre-loading". That
means that these applets automatically preload all the mouse-over images
in a separate thread after they have started. Multi-threading means that the
applet is already fully usable and running while the images are being pre-loaded.
You don't need to do anything about this - it just happens for you.
NB: with the faster image-preloading of version 2.5+ of iMMap Pro, the
new internal applet cache is not able to manage transparent images.
|
| 
CURRENT MENU RANGE
 | 
 | This product range is called iMMap menus. The diverse prices and benefits of these menus offer advantage to all types of designer from home-user to corporate. Their common point is that they are based around the concept of hybrid drop-down menu / image-map menus.
|
 |  |
MENUS IN THIS RANGE
|
|
|
|
|
|
| |
INFO FOR THIS RANGE
|
|
|
|
|
| |
SELECTED DEMOS
|
|
|
|
|
|
| |
|
