Practical Cases

 Why and how to create an Image MAP and what are the advantages?

Image MAP is a technology that is used to make an image interactive. This technique can be very useful for creating the menus in the custom design of your site. Consult this comparative study for more information:
http://www.oxatis.com/Help/ImageMAP/ImageMAP-EN.html

Let's take the horizontal menu, for example. This example is easily interchangeable with the vertical menu.

The goal is to directly integrate the graphic design of the menu into the background image that makes up the horizontal panel. The advantage of this technique is that it speeds up the display of the site.

Indeed, if you have 10 or 15 images for your menu elements, you will end up with a much larger number of images that will be assembled to make up your menu (because you have to take into account the dicing to the left, to the right, etc. of each element). This is directly visible in example #2 on the following page: http://www.oxatis.com/Help/ImageMAP/ImageMAP-EN.html

By integrating everything into the background image, your visitors will only request the server for a single image instead of several dozen. The browser has less work to do in order to "produce" the composition and the visual result is much better for the visitor. This is the case of example #1 on this page:
http://www.oxatis.com/Help/ImageMAP/ImageMAP-EN.html

Once the background image is created (using a program such as Adobe Photoshop), you must create the corresponding Image MAP. To do so, you can use a program allowing you to create an HTML compatible Image MAP.

Create a new project (which is actually just a simple html page!), and associate your background image to it. Next, create the interactive zones by delineating these zones with the cursor. Lastly, select each zone and attach the corresponding hyperlink. And that's it, you're done!

To find the hyperlinks, NEVER copy and paste the addresses coming from your site. To generate these hyperlinks, ALWAYS use the hyperlink wizard that is available in the [Help/Hyperlink Wizard] menu of your administration site. In addition, systematically use the relative hyperlink that is proposed in the hyperlink wizard (and not the absolute hyperlink!).

Note that if you have already created your menus with the Actinic system ([Site\Menus] menu in your administration space), you can directly retrieve the hyperlinks by using our Image Map generation wizard, that can be found in the management page of your custom site design.

By combining the data from your HTML program and the hyperlinks (href in HTML), you will get a code that looks like this:

<MAP NAME="HMENU">
<AREA SHAPE="RECT" HREF="PBCPPlayer.asp?ID=65432" COORDS="848,112, 930,130">
<AREA SHAPE="RECT" HREF="PBCPPlayer.asp?ID=65425" COORDS="801,108, 836,132">
<AREA SHAPE="RECT" HREF="PBContactUS.asp" COORDS="722,112, 788,130">
<AREA SHAPE="RECT" HREF="PBCPPlayer.asp?ID=77606" COORDS="649,111, 708,130">
<AREA SHAPE="RECT" HREF="Default.asp" COORDS="28,29, 196,89">
<AREA SHAPE="RECT" HREF="PBCPPlayer.asp?ID=112683" COORDS="563,134, 620,187">
<AREA SHAPE="RECT" HREF="PBHotLinks.asp" COORDS="507,111, 548,161">
<AREA SHAPE="RECT" HREF="PBSubscribe.asp" COORDS="443,88, 490,140">
<AREA SHAPE="RECT" HREF="PBShoppingCart.asp" COORDS="378,62, 430,119">
<AREA SHAPE="RECT" HREF="PBUserAccount.asp" COORDS="308,46, 358,99">
</MAP>

Warning: The Image MAP name (<MAP NAME="HMENU">) must be HMENU for a horizontal menu and VMENU for a vertical menu! If you don't use these names, the image will not be associated to these interactive zones and clicking on these zones will have no effect whatsoever.

1) Adjust the site width and the background image width: 980 pixels in our example.
2) Set the height of the header to 0.
3) Adjust the horizontal menu height to the height of the background image: 206 pixels in our example.
4) Associate the background image in the "Horizontal panel background" section.
5) In the "Horizontal menu properties" section, define a transparent GIF image for the menu image. For this purpose, simply use a GIF image composed of several pixels. (You can download this image at http://www.oxatis.com/Images/Transparent.gif by right-clicking on the link and choosing "Save Target As...").
6) Next, fill in the Width and Height of the menu image by using the dimensions of your background image. In concrete terms, it is not possible to associate an Image MAP to a background image in a browser. Therefore, to get around this problem, we place a transparent image over top of the background that will be associated to the Image MAP! The transparent image must, therefore, be adjusted to fit the background. To avoid possible conflicting dimensions, it is wise to slightly reduce the width and height imposed on the transparent image. In our example, we are going to use 978 pixels for the width and 200 for the height.
7) To finish, copy your Image MAP code in the "Associated HTML (Image MAP)" edit zone of the "Horizontal menu properties" section.
8) Save your modifications and test the design.
 
 Example -Technique used to create a dynamic vertical menu using JavaScript code

Go to the menu management page in your administration space ("Site\Menus") menu. Add a "Text" type menu element that contains the following code in the "Name" zone:
<script src="Files/12345/menu.js" type="text/javascript"></script>

(Replace the 12345 with your Actinic account number).
This will display the text [SCRIPT] in your administration menu.

Create a text file and rename it menu.js on your computer.
In your [Gallery\Files] menu, upload the menu.js file that will contain a JavaScript code, such as the example below:

document.write('<DIV ID=mv2></DIV>');
document.write('<STYLE TYPE="text/css">\na.mv2style {color:#FFFFFF;text-decoration:none;}\na:hover.mv2style {color:#000000;text- decoration:underlined;}\n</STYLE>');

mv2_menu = new Array();
mv2_lien = new Array();

mv2_menu[0] = 'Menu Principal 1';
mv2_menu[1] = 'Menu Principal 2';
mv2_menu[2] = 'Menu Principal 3';

mv2_lien[0] = '<A HREF="PBSCCatalog.asp?CatID=1111" CLASS=mv2style>Sous Menu 1-1</A><BR>';
mv2_lien[0] += '<A HREF="PBSCCatalog.asp?CatID=2222" CLASS=mv2style>Sous Menu 1-2</A><BR>';
mv2_lien[0] += '<A HREF="PBSCCatalog.asp?CatID=3333" CLASS=mv2style>Sous Menu 1-3</A><BR>';

mv2_lien[1] = '<A HREF="PBSCCatalog.asp?CatID=1111" CLASS=mv2style>Sous Menu 2-1</A><BR>';
mv2_lien[1] += '<A HREF="PBSCCatalog.asp?CatID=2222" CLASS=mv2style>Sous Menu 2-2</A><BR>';
mv2_lien[1] += '<A HREF="PBSCCatalog.asp?CatID=3333" CLASS=mv2style>Sous Menu 2-3</A><BR>';

mv2_lien[2] = '<A HREF="PBSCCatalog.asp?CatID=1111" CLASS=mv2style>Sous Menu 3-1</A><BR>';
mv2_lien[2] += '<A HREF="PBSCCatalog.asp?CatID=2222" CLASS=mv2style>Sous Menu 3-2</A><BR>';
mv2_lien[2] += '<A HREF="PBSCCatalog.asp?CatID=3333" CLASS=mv2style>Sous Menu 3-3</A><BR>';

mv2_pos = -1;

function mv2_menu_draw()
{
mv2_aff = "<TABLE BORDER=0 BGCOLOR=#000000 CELLPADDING=0 CELLSPACING=0 WIDTH=160><TR><TD><TABLE BORDER=0 CELLPADDING=03 CELLSPACING=1 WIDTH=100%>";

for(a=0;a<mv2_menu.length;a++)
{
if(mv2_pos == a || !document.getElementById)
bgcolor = "#6699CC";
else
bgcolor = "#006699";
if(document.getElementById)
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><A HREF=\"#\" onMouseOver=\"mv2_pos="+a+";mv2_menu_draw()\" CLASS=mv2style><FONT FACE=\"Arial\" SIZE=2><B>"+mv2_menu [a]+"</B></FONT></A></TD></TR>";
else
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Arial\" SIZE=2 COLOR=#FFFFFF><B>"+mv2_menu[a]+"</B></FONT></TD></TR>"
if(mv2_pos == a || !document.getElementById)
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Arial\" SIZE=1><B>"+mv2_lien[a]+"</B></FONT></TD></TR>";
}

mv2_aff += "</TABLE></TD></TR></TABLE>";
if(document.getElementById)
document.getElementById("mv2").innerHTML = mv2_aff;
else
document.write(mv2_aff);
}

mv2_menu_draw();
 
 Example - Insertion of a FLASH menu

To insert a horizontal or vertical menu in FLASH, these are the main steps to follow:

First of all, create your flash. Be careful in regards to the size of your flash which must strictly respect the available space on the site.

To find the hyperlinks, NEVER copy and paste the addresses coming from your site. To generate these hyperlinks, ALWAYS use the hyperlink wizard that is available in the [Help/Hyperlink Wizard] menu of your administration site. In addition, systematically use the relative hyperlink that is proposed in the hyperlink wizard (and not the absolute hyperlink!).

Upload the flash file to your site's file gallery.

Next, go to the page accessible through the menu [Site/Properties by Language] and add the following code in the "Free text block inserted in the HTML header (<HEAD/>)":
<script src="Javascript/FlashActiveContent/AC_RunActiveContent.js" type="text/javascript"></script>

Then complete the site design: (these values are given as a rough guide, just make sure they are homogeneous).

Dimensions and Positioning:
Site Alignment: Centered on the screen
Site Width: 980 pixels
Vertical Panel Width: 180 pixels
Header Height: 0 pixels
Horizontal Menu Height: 130 pixels

Horizontal Menu Properties:
X-axis Offset: 0 pixels
Y-axis Offset: 0 pixels
Horizontal Alignment: Center
Vertical Alignment: Bottom

Image:
Image Width: 0 pixels
Image Height: 0 pixels

Associated HTML (Image MAP):
<script type="text/javascript">
AC_FL_RunContent(
'codebase','http://active.macromedia.com/flash2/cabs/swflash.cab#version=6,0,0,0',
'id','banner',
'width','845',
'height','181',
'src','Files/12345/MyMenu',
'quality','autohigh',
'pluginspage','http://www.macromedia.com/go/getflashplayer',
'movie','Files/12345/MyMenu' ); //end AC code
</script>
<noscript>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=6,0,0,0"
ID=banner WIDTH=845 HEIGHT=181>
<PARAM NAME=movie VALUE="Files/12345/MyMenu.swf">
<PARAM NAME=quality VALUE=autohigh>
<EMBED SRC="Files/12345/MyMenu.swf" swLiveConnect=FALSE WIDTH=845 HEIGHT=181 QUALITY=autohigh TYPE="application/x-shockwave- flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</noscript>

Cell Padding: 0
Element Padding: 0
Left separator:
Right separator:

Note that using flash requires that the customer has installed flash on their machine (otherwise it will automatically be proposed) and that certain computers with Internet safety tools require the user to click on the zone containing the flash to activate it.
 

Add to favorites: http://www.actinic.co.uk/Help/HelpCenterContent.asp?ActionID=512&TID=55026&MID=4000&LangID=1
© 2001-2018 Oxatis. All rights reserved.