THAT IS an html image mapping designed for internet developers.
The software has been advanced the usage of the HTML5 canvas, so its use is proscribed to the browsers that reinforce the canvas, but in addition the Report API’s:
IE10+, FF3.6+, FF14-, FF18+ (the FF15 have issues of some canvas functionalities, Worm 787623, so they can be resolved in FF18), Chrome6+, Safari6+, Opera11.1+
Considering this is a tool for developers, i think that that is not a big problem, as a result of i assume that a web developer has no problem to choose the proper browser.
i have used FF14 to strengthen the tool, so this is the most efficient choise, but the tool has been tested additionally in Chrome22 and Opera12
Note: The model of the device that you simply can see in the Reside Preview hyperlink, is a limited version of the device. With this version you'll be able to simplest load a specific set of pictures, listed on the house page. After loading a picture you'll be able to draw all the shapes, but only the first 6 shapes will be generated within the HTML code. This issue doesn’t save you you to check all the functionalities of the tool.
what is an image map?
an image map is an HTML code that makes person-clickable different areas of an image. The HTML code includes the map HTML tag, in conjunction with the house tag, that permits you to define spaces with oblong, polygonal and round shapes.
As an example, if you happen to have the image1.png image for your HTML web page, you can write the next code:
As you'll be able to see, you have to set the usemap characteristic within the img tag, for you to have the same price of the identify attribute within the map tag. Between the <map> and </map> you can outline as many <area> tags as you need, each one representing a user-clickable space at the associated symbol. Every space should have a shape attribute, that can have one among the 3 values: rect, poly and circle. The rect form is completely defined through 2 issues, a poly shape is defined by way of a chain of points and a circle form is outlined by way of a point, that represents the middle, and a radius. all of the issues are outlined through a couple of coordinates, expressed in pixels, loved ones to the top-left corner of the image. the form attribute can also have the “default” price, that seek advice from the portions of the image no longer mapped with any of the former shapes. Take into account, as an alternative, that the order through which the shapes are defined within the map are very important: in case you define the “default” form as first shape within the map, it's going to override the entire subsequent shapes, for the reason that “default” form refers to the whole symbol. THAT IS real additionally with the shapes that overlap each other: you can outline a little bit form right into a larger form, but you might have to define first the little form and then the larger one. If 2 shapes percentage a section of the image, the form defined first, wins.
If you want to set manually a picture map you've gotten to understand the coordinates of all the points needed to define the various shapes. Most Probably this is not a large drawback in case you have few spaces to map, especially if you have circular or rectangular spaces. But if you have a number of spaces, with a polygonal form, set them manually isn't an effortless activity.
the image mapper tool lets in you to draw shapes equivalent to rect, poly, and circle at the decided on symbol, if you want to be translated routinely within the corresponding HTML code that makes the areas of the picture consumer-clickable.
After drawing the shapes on the given symbol, you'll generate the HTML code merely clicking on a button and the code might be displayied in a textarea. you'll replica the HTML code and use it for your HTML web page(s). You too can do the reverse process: pasting the HTML code in the textarea, you'll be able to load this code merely clicking a button; this will probably be translated within the shapes on the image and you can adjust them, add new shapes and re-generate the HTML code. This opposite mechanism turns out to be useful to allow you to save a partial mapping process and to proceed to map the picture later. it's also useful to refine “manually” the form designing/positioning: after generating the code in the textarea, you'll adjust the coordinates within the textarea at the fly and re-load it.
Main options:
- you'll be able to make a selection a neighborhood or remote symbol
- you'll be able to set the target image sizes: these are the sizes that the image could have on your HTML web page
- you can zoom in and out the image in any second and this will not intrude with the true coordinates so that they can be generated, that depends handiest at the goal sizes of the image. The zoom characteristic is only useful to assist you to attract the shapes.
- you'll set several parameters for each shape, corresponding to the “href” attribute, the “alt” attribute, the “id” and “magnificence” attributes and finally the “aim” characteristic. To set the parameter you have got to select the shape: to choose a form you've to choose the highest-left arrow in the toolbar and then click on at the shape.
- you can set some parameters for the map: the map “title”, the default url and the objective.
- you can draw a form deciding on the shape from a tool bar.
- to draw a shape, after settling on it from the toolbar, you can simply click with the mouse on the symbol, the place you wish to have to start the form.
- If the shape is a circle, the firts point is the center: shifting the mouse (clicked or launched), you'll be able to see a circle that follow the cursor. Clicking once more the mouse will forestall drawing the circle.
- If the form is a rect. the first point is one of the corner. Moving the mouse (clicked or launched) will draw a rect. Clicking again the mouse will forestall drawing.
- If the shape is a poly the method is somewhat different: each click of the mouse will set some extent; the current point is usually connected with the firs one, making the poly at all times a closed form; to forestall to attract the poly (to set the closing point) you could have to double click on the mouse.
- For the entire shapes you can also prevent to attract them clicking on the “prevent” button (the top-left arrow in the toolbar).
- you'll be able to see the mouse coordinates when you move it on the image.
- you'll use the gray-dashed border around the image to determine the edge coordinates of the picture, so you'll use the border as it was part of the picture: so, you'll be able to click on on the border all the way through the form drawing, jus as it was once part of the picture. as an example, if you happen to click on the best-left corner of the border, you are going to set a point at (ZERO, ZERO) coordinates. in the event you click the left-border, in any aspect, you'll set some degree at the (ZERO, y) coordinates, and the like.
- you can select an already drawn form and modify/resize/remove it. to remove it you have got to make use of the “rubber” within the toolbar, so that they can appear as a became down pencil only deciding on a shape.
- you can select the color of the contour of the shapes from a set of five colours (that is now not a layout device, so i've restricted the collection of color and also you can't make a choice a distinct color for every shape).
- you can click on the “map” button, that may be visible most effective when you select the “forestall” button on the toolbar and no shape is chosen: for those who have a few shapes drawn on the symbol you're going to see the HTML code in a textarea, in case you haven't yet drawn a form you are going to see an empty textarea, but you'll be able to prior in it some HTML code and load it.
- Clicking at the “load” button (that you simply can see most effective after clicking on “map” button), the HTML code present within the textarea will likely be translated in shapes at the symbol.
you can seek the advice of all the manual of the software at the next link:On-Line Manual
If you might have any questions, just go away a comment or drop me an e-mail!
FULL DOWNLOAD
No comments:
Post a Comment