The first step is to create a file named printer-map.html at [app-path]/server/custom/web/. This file will be loaded as an HTML page in an iframe in place of the default printer selection list, and may contain any content you choose; including links to further pages. Open this file in a text editor.

We then add the site plan image:

<img src="site-plan.png" usemap="#buildings"
       style="width: 422px; height: 190px; border: none;" />

The usemap="#buildings" attribute tells the image to look for an image map with the name buildings. Image maps allow you to make parts of an image "clickable". For more information about the HTML <map> element see xhtml.com's map element reference.

Now we define the image map.

<map name="buildings">
    <area shape="poly" coords="" href="building-a.html"
          alt="Building A" title="Building A" />
    <area shape="poly" coords="" href="building-b.html"
          alt="Building B" title="Building B" />
  </map>

Here we have defined a new image map called buildings, with two clickable areas. These areas are polygon shapes (shape="poly"), which means we can specify a list of points that will form the outline of the clickable area (i.e. the area inside the points will be clickable).

Clicking the first area will load the page building-a.html. The alt and title tags provide information about the link, and display a tooltip when the user hovers over the area.

We have defined two areas and the pages they will link to, but we have not yet defined the coordinates for these areas. This is done using the coords attribute of the two area tags. Using an image editor, we can find coordinates for the outline of the two areas. Most image editors, including MS Paint, display pixel coordinates when hovering the mouse over the image.

Using the image editor, we 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). 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".

We repeat the previous step for the second building to get coordinates similar to: (242,50), (320,4), (422,63), (422,135), (332,190), (226,131).

Now that we have the clickable area coordinates, we can define them in our image map.

The definition for the area tag when using a poly type shape, tells us that the coordinates are specified in a list of x,y coordinates (i.e. "x1,y1,x2,y2...xn,yn"), so we enter the coordinates in the coords attributes as follows:

<map name="buildings">
    <area shape="poly"
          coords="0,48,84,0,143,34,143,142,60,190,0,155"
          href="building-a.html" alt="Building A"
          title="Building A" />
    <area shape="poly"
          coords="242,50,320,4,422,63,422,135,332,190,226,131"
          href="building-b.html" alt="Building B"
          title="Building B" />
  </map>

Opening printer-map.html in a web browser should now display the site plan image. Hovering the mouse over each building should display the link cursor, and indicate a link to the respective pages.

The next step is to create the building-a.html page. Using a similar process to the existing page, we add floor-plan.png and create an image map for it:

<img src="floor-plan.png" usemap="#printers"
       style="width: 600px; height: 362px; border: none;" />

  <map name="printers">
    <area shape="rect" coords="4,289,22,307" href=""
          alt="building-a\Printer 1"
          title="building-a\Printer 1" />
    <area shape="rect" coords="33,342,51,360" href=""
          alt="building-a\Printer 2"
          title="building-a\Printer 2" />
    <area shape="rect" coords="58,342,76,360" href=""
          alt="building-a\Printer 3"
          title="building-a\Printer 3" />
    <area shape="rect" coords="521,7,566,23" href=""
          alt="building-a\Plotter 1"
          title="building-a\Plotter 1" />
    <area shape="rect" coords="571,88,592,129" href=""
          alt="building-a\MFP 1"
          title="building-a\MFP 1" />
  </map>

  <div>Building A (<a href="printer-map.html">back</a>)</div>

This map is mostly similar to the previous one, except that we have defined five rectangle shapes (shape="rect") and provided a link back to the main site plan (printer-map.html).

Rectangle shapes in an <area> element are defined with the coordinates of top-left and bottom-right corners ("x1,y1,x2,y2").

Now we have the images and shapes in place for the site plan and one building's floor plan. To finish off this building, we now need to define what happens when each printer is clicked. This is done using a JavaScript function selectPrinter. Calling selectPrinter('my-server', 'Library Printer') will submit the form on this step of the Web Print wizard, selecting the printer called Library Printer, hosted on the print server called my-server.

We can call this JavaScript function when one of the defined areas is clicked by setting the href attribute as follows:

<area shape="rect" coords="4,289,22,307"
        href="javascript:parent.selectPrinter('building-a',
                                              'Printer 1');"
        alt="building-a\Printer 1"
        title="building-a\Printer 1" />

Repeat the previous step for the remaining printers, taking care that the server and printer names are entered correctly. Note that the printer name is the printer's unique name on the print server, and may be different to the printer's "share name".

Repeat the steps for creating building-a.html to create building-b.html (or simply copy the file and modify to suit).

Test the Web Print wizard to ensure that clicking on a building takes you to that building's floor plan, and clicking on a printer submits the form to select that printer. Note that if the names you've used for the printers don't actually exist in your PaperCut NG server, then you'll see an error message about the printer not being available. You may like to modify the details for one of the printers to match a real printer so that the wizard can be tested end-to-end.

The source for this example contains some additional tweaks to improve browser consistency, such as removing the border and white background of the iframe in Internet Explorer.

Download and install Inkscape, the free/open source vector graphics editor, and use it to open your SVG.

Select the object that should be made "clickable". You should see a dotted background around the object.

Right-click the object and select Create Link.

Right-click the object and select Link Properties.

In the Link Properties dialog that appears, enter a value for the Href field like: javascript:parent.selectPrinter('server', 'printer');, where server is the name of the print server, and printer is the name of the print queue.

Repeat to create links for each printer in the image.

Select File → Save As... and choose a file type of Plain SVG (*.svg). Save the image to [app-path]/server/custom/web/printer-map.svg on the PaperCut NG server.

Try testing with the Web Print wizard. The SVG should be visible on the first step of the Web Print wizard, in place of the printer list. Clicking a printer should move on to the next step.