Turn.js图片点击跳转页面实现求助（含问题代码）

Hey there! No worries about your English—let's get this sorted out for you. It looks like you want to add clickable regions on a main image (for brands A, B, C) that jump to specific pages in your flipbook. Your current code has a small syntax error, and it only handles a single click action for the whole image, so let's fix that and implement the proper image map solution.

First, Fix Your Original Syntax Error #

Before diving into image maps, let's correct the mistake in your HTML:
You have an extra quote after onclick="gotopage()" which breaks the src attribute. It should look like this:

<li class="i"> 
 <img onclick="gotopage()" src="pages/1.jpg" width="76" height="100" class="page-1"> 
 <span>1</span> 
</li>

But this only makes the entire image clickable. Since you need multiple clickable areas on one image, we'll use an image map instead.

Step-by-Step Image Map Implementation #

An image map lets you define multiple clickable regions on a single image. Here's how to set it up:

1. HTML Structure

Use the <map> and <area> tags alongside your main image. The image uses the usemap attribute to link to the map:

<!-- Your main brand image -->
<img 
  src="path/to/your-main-brand-image.jpg" 
  usemap="#brandNavigationMap" 
  alt="Main Brand Image with Clickable Areas"
  width="800" <!-- Set your actual image width -->
  height="600" <!-- Set your actual image height -->
>

<!-- Define the image map -->
<map name="brandNavigationMap">
  <!-- Brand A: Rectangular area (adjust coords to match your image) -->
  <area 
    shape="rect" 
    coords="50, 50, 150, 150" <!-- x1, y1, x2, y2 (top-left to bottom-right) -->
    onclick="navigateToFlipbookPage(1)" 
    alt="Brand A"
  >

  <!-- Brand B: Rectangular area -->
  <area 
    shape="rect" 
    coords="200, 50, 300, 150"
    onclick="navigateToFlipbookPage(2)" 
    alt="Brand B"
  >

  <!-- Brand C: Circular area (coords = center-x, center-y, radius) -->
  <area 
    shape="circle" 
    coords="400, 100, 50"
    onclick="navigateToFlipbookPage(3)" 
    alt="Brand C"
  >
</map>

2. JavaScript Function

Update your JS function to accept a page number parameter, and add a check to ensure the flipbook is initialized:

function navigateToFlipbookPage(pageNumber) {
  // Check if the flipbook is properly initialized with turn.js
  const flipbook = $("#flipbook");
  if (flipbook.turn("is")) {
    flipbook.turn("page", pageNumber);
  } else {
    console.error("Error: Flipbook is not initialized correctly!");
  }
}

How to Get Correct Coordinates for Clickable Areas #

To find the coords values for each brand's region:

• Open your image in a photo editor (like Photoshop, GIMP, or even Paint)
• Hover over the corners of the brand's area to get the X/Y coordinates
• For rectangles: Use the top-left (x1,y1) and bottom-right (x2,y2) coordinates
• For circles: Use the center point (x,y) and the radius of the circle

Notes #

• Make sure your turn.js flipbook is fully initialized before calling navigateToFlipbookPage (wait for the turning or initialized event if needed)
• Test the click areas in your browser to adjust coordinates if they're not hitting the right spots

内容的提问来源于stack exchange，提问作者Emre Birinci