Imagemaps and collabs

An [imagemap] is a picture with clickable areas. Collab banners use them: one image with every artist or mapper on it, where clicking a face opens that person's profile.

The format

The tag holds lines, not text:

1. [imagemap] on its own line.
2. The image's address, starting with http:// or https://.
3. One line per clickable area: x y width height link title.
4. [/imagemap] on its own line.

Positions are percentages

x and y are where the area starts, and width and height its size, all in percent of the image. 0 0 50 100 is the left half; 50 0 50 100 the right half. Because they're percentages, the areas stay in place however wide the page shows the image.

Links and titles

• The link is # for an area that goes nowhere, an http:// or https:// address, or a mailto: address.
• The title is the rest of the line. It shows when someone hovers the area.

When osu! refuses one

If any line is wrong (a missing number, a link that isn't one, a first line that isn't an image address), osu! shows the whole block as plain text. bb's lint points at the line with the problem.

Making a collab banner

1. Make the banner and host it somewhere that serves images over https. bb doesn't host images and never will.
2. Open the collab maker and paste the banner's address. It loads straight from its host in your browser.
3. Drag over each person to draw their area. Drag an area to move it, or its corners to resize it; arrow keys nudge the one you picked.
4. Give each area a link and a title. "Link players to regions" fills them from a list of osu! names or ids, in the order you drew the areas.
5. Copy the [imagemap], or open it in the editor.

Already have an imagemap? Paste it into "Edit an imagemap you already have" and change it there. You can also measure the areas yourself, as percentages of the banner's width and height, and write the lines by hand.