BlueVoda 8.0: How to use the image maps

Pablo · #1 05-28-2006, 09:50 AM

You can create an (client-side) image map that divides an image into different areas that each link to a different web page.
Creating an image map is useful for images such as a floor, campus map or world map that you want to contain links to different pages.
You can define each clickable area (hotspot) on the map using three shape values: rectangle, circle or polygon (irregular shape).
To add images use the Image map object. Drag the object to the page and a file dialog will popup to select the image.
BlueVoda supports jpg, gif, and bmp files.
Filename: enter the path and filename of the image/picture or select Browse to find an image on your local drive.
Alternate text: this text, usually a short description, appears in place of the object in browser when images are unsupported or have been disabled. In some browsers it appears as a ToolTip when you move the mouse over the image.
Use original size: Select this if you want the image to appear at it's orginal size.
Fit to layout rectangle: Select this if you want to manually specify the image size.
Border thickness: Specifies the thickness of the border around the image. Set this to 0 (zero) for no border.
Border Color: Specifies the color of the border around the image.

Adding Hotspots
There are two ways to add hotspots to an image map:
1. Manually entering the coordinates in the hotspot tab of the image map properties
2. Visually modifying the coordinates using the mouse

Manually entering the coordinates
Open the image map properties and click the Hotspots tab to insert the coordinates of an hotspot.
You can insert 3 types of hotspots:
a) Circle
Here you enter the x and y coordinates of the center and the radius of the circle.
b) Rectangle
Here you enter the x (left) and y (top) coordinates and the width and height of the rectangle.
c) Polygon (Irregular Shape)
Here you enter each point (x, y coordinates) on the polygon.

Visually modifying the coordinates using the mouse
A more efficient way to modify the coordinates of the hotspots is by visually dragging them.
a) Right click the image map to display the context menu
b) Select the hotspot type you want to insert (Add Circle Hotspot, Add Rectangle Hotspot or Add Polygon Hotspot)
c) A window will popup where you can set the initial coordinates, the URL and alternate text of the area. By default BlueVoda will insert the shape in the center of the image map.
d) After you have clicked OK, the shape will be inserted to the image map, you can now select it and drag it around or change it's size using the size handles.
e) To edit or remove the hotspot, right click the area to display the context menu and select Edit Hotpsot or Delete Hotspot.

oceano · #2 05-29-2006, 04:02 AM

Hii :

Thanx for updates ,

Good work

gemini13 · #3 07-23-2006, 01:32 AM

I have a complicated website and I am totally new to this. I have a designed bar with titles (a jpeg image) on the left side of my page. Almost all of these titles will have submenus/dropdown menus.
My questions are:
1) How do I link each individual hotspot to its submenu?
2) Is there a better technique to achieve this?
3) On the right hand side I have individual buttons also with submenus, How do the buttons link to the submenus?

I don't know wether I am making sense. I apologize if I don't. My url is: http://74.52.42.242/~gemilcom/indexpage.html

I would appreciate any help you can give me.
Thank you,
Gemini13

navaldesign · #4 07-23-2006, 07:22 AM

You can't have submenus linked to an image map or to buttons. If you need dropdown / submenus, you will either need to use BV's so called "Menu Bar" feature, or you need to create such a menu system in an appropriate software and then implement it in your pages. Have a look at http://www.amarasoftware.com/flash-menu-builder.htm

Aliens Anonymous · #5 07-23-2006, 09:57 AM

Not sure if this is what you mean Naval Demo but you can replace the button's with images on the script as show on the last one.

navaldesign · #6 07-23-2006, 10:41 AM

Yes Alliens, it's something like that. There are lots of dropdown menu scripts on the net. However, if i was to need one, i'd go for a software like that of Amara, that allows lots of visual tricks and customization. I don't use visual effects on my sites (very severe style, as they are technical information sites).

Aliens Anonymous · #7 07-23-2006, 01:08 PM

Good point naval. for site's that are technical and Business related you need to go down the professional route.

islandcrazy · #8 07-24-2006, 12:30 AM

Oooohhh!! Aliens.....that's the kind of menu system I need. Is that just called "drop down menu bars"? I assume that is in the bv tutorials? Haven't gotten that far yet, but that's what I will need. Thanks!

Edited....oops, re read what Naval wrote and that's what he called it, "Menu bar feature"...sorry, i should pay better attention. just got excited!

Gemini, i really like the painter's pallette (sp) you created for you menu...hope you will be able to make it do what you want. Wish I could help you, but I'm not that far yet.

Aliens Anonymous · #9 07-24-2006, 01:48 AM

Quote:

Originally Posted by islandcrazy

Oooohhh!! Aliens.....that's the kind of menu system I need. Is that just called "drop down menu bars"? I assume that is in the bv tutorials? Haven't gotten that far yet, but that's what I will need. Thanks!

Hi islandcrazy have a look http://aliensanonymous.org/tips_boxs_page.html at the menu bars let me know if you would like any help.

Aliens Anonymous · #10 07-24-2006, 02:39 AM

Quote:

Originally Posted by Aliens Anonymous

Hi islandcrazy have a look http://aliensanonymous.org/tips_boxs_page.html at the menu bars let me know if you would like any help.

Try this one i've had to move the menu pages to a page of there own, they don't like being brought up in a Iframe.
http://www.aliensanonymous.org/menu_pages.html you will have to use the back button as i have not finished the pages. Sorry

nzbr · #11 05-29-2007, 10:43 AM

That's a great tool!

I had to point different cities in the NZ map, and was a bit hard to set up the right coordinates to make the circle go right on the top of the city.
Found out an easier way (and really simple):
- click on shape tool (beside the image map tool)
- double click to edit
- on 'type' select: round rect
- then you can make it really small (it will be close enough to a circle shape)
- then you put it on the top of the city!

Advantages: it's faster and you can even choose the colour and the border of your circle (rectangle, octagon...or any shape you want!)

Cheers,

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)