- #Create a custom map with clickable links install
- #Create a custom map with clickable links software
- #Create a custom map with clickable links free
This map is mostly similar to the previous one, except that you have defined five rectangle shapes ( shape="rect") and provided a link back to the main site plan ( printer-map.html). Using a similar process to the existing page, add floor-plan.png and create an image map for it: Hovering the mouse over each building displays the link cursor, and indicates a link to the respective pages.Ĭreate the building-a.html page.
Open printer-map.html in a web browser to display the site plan image. "x1,y1,x2,y2.xn,yn"), so you enter the coordinates in the coords attributes as follows: The definition for the area tag when using a poly type shape, tells you that the coordinates are specified in a list of x,y coordinates (i.e. Now that you have the clickable area coordinates, you can define them in the image map. Pixels are counted from the top-left corner of an image, so the coordinate (60,190) means "60 pixels from the top, 190 pixels from the left". Using the image editor, find the following points for Building A (the lefthand building), starting from the top left corner, in (x,y) format: (0,48), (84,0), (143,34), (143,142), (60,190), (0,155). Most image editors, including MS Paint, display pixel coordinates when hovering the mouse over the image. Using an image editor, you can find coordinates for the outline of the two areas. This is done using the coords attribute of the two area tags. You have defined two areas and the pages they link to, but you have not yet defined the coordinates for these areas. The alt and title tags provide information about the link, and display a tooltip when the user hovers over the area. the area inside the points is clickable).Ĭlicking the first area loads the page building-a.html. These areas are polygon shapes ( shape="poly"), which means you can specify a list of points that form the outline of the clickable area (i.e. This defines a new image map called buildings, with two clickable areas. For more information about the HTML element see 's map element reference. Image maps allow you to make parts of an image "clickable". The usemap="#buildings" attribute tells the image to look for an image map with the name buildings. This file is loaded as an HTML page in an iframe in place of the default printer selection list, and can contain any content you choose including links to further pages.
If the content is larger than this, then scrollbars are visible (the area will not expand to fit the content).Įxample 1: Creating a printer map using an HTML image mapĬreate a file named printer-map.html at /server/custom/web/. The custom printer map is displayed in an iframe with dimensions 776px x 400px. For example, if a file named floor-plan.png is placed in /server/custom/web/ it is accessed via the URL /custom/floor-plan.png. You can access any custom content placed in /server/custom/web/, such as additional images, a URL beginning with /custom/. Inkscape, and is a convenient way of displaying a map or
#Create a custom map with clickable links software
Software such as Microsoft Visio or the free/open source The SVG can contain links to other pages or other SVGs. If this file exists, it is loaded as an SVG page, and displayed in an iframe in place of the printer (which are also loaded in the iframe by default). The HTML can contain any content or images, including links to other pages If this file exists, it is loaded as an HTML page and displayed in an in-line frame (iframe), in place of the
#Create a custom map with clickable links free
Using printer maps or other types of custom printer lists in PaperCut NG/MF does not require any special or proprietary software - they can easily be implemented using open standards and free software.Ĭustom content is loaded in place of the printer list, by placing the appropriate file at /server/custom/web/ as described in the following table: Files used for custom printer selection in the Web Print wizard File Name A map allows a user to select a printer by location, rather than guessing the printer's location based on its name. Using a graphical map can assist users to find the most convenient printer. This is great for most environments, but organizations with many printers or large sites might prefer something that provides users with more context about the printer they are selecting. wizard involves selecting the target printer from a list.
#Create a custom map with clickable links install
Part of the Web Print Web Print enables printing from user-owned devices without the need to install printer drivers and manage server authentication.