How to create a clickable game map?

Question

I want a world map (it must be made up of images, as the font size can be customized and so ASCII would not work). Each location must be clickable, and must return values to the story itself, as there will be a "Navigate" button that sends you to that location. It must be a passage, as I want to include it as a popup.

Answer 1

You could use an image map. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

In SugarCube, to pipe your area elements (and anchor elements) to passages, you can use the data-passage html attribute. 

Tutorial, with optional highlight effect: https://github.com/mikewesthad/twine-resources/blob/master/demos/html-maps/readme.md

Comments

@Chapel

Based on the original question I believe they want to select one of the areas of the map and then use a Navigate button to send them to the selected location (Passage), separating the selection from the passage change could allow them to show details about the selected location.

---

Good point. Reading closer, this line also sticks out: 

It must be a passage, as I want to include it as a popup.

I think we'll need a bit more info on how you plan to do this, and what kind of code you're using. Assuming the "popup" refers to the built-in dialog system in SugarCube, a passage should not be required. 

---

By a popup I mean the sort that you can get with the <<popup>> and <<autopopup>> macros defined by the following code:

/* Usage: <<autopopup "Pasage Name">> */
Macro.add('autopopup', {
	handler : function () {
		if (this.args.length === 0) {
			return this.error('no passage name specified');
		}

		var passage = this.args[0];

		Dialog.setup(passage, 'popup');
		Dialog.wiki(Story.get(passage).processText().trim());
		Dialog.open();
	}
});
/*Usage: <<popup "Link Name" "Passage Name">> */
Macro.add("popup", {
	version : { major: 1, minor: 0, revision: 0 },
	handler : function () {
		if (this.args.length < 2) {
			var errors = [];
			if (this.args.length < 1) { errors.push("link text"); }
			if (this.args.length < 2) { errors.push("passage name"); }
			return this.error("no " + errors.join(" or ") + " specified");
		}

		var	el      = document.createElement("a"),
			passage = this.args[1],
			title;
		el.innerHTML = this.args[0];
		el.className = "link-internal macro-popup";
		el.setAttribute("data-passage", passage);
		title = el.textContent;
		UI.addClickHandler(el, null, function (evt) {
			var	dialog = UI.setup(title, "popup");
			new Wikifier(dialog, tale.get(passage).processText().trim());
		});
		this.output.appendChild(el);
	}
});

Edit: I tried the image maps suggestion, and it works fine. There is no "Navigate" button or anything, if anybody can show me how to do this please do. If not, at least it works.