Tutorial

Human Brain Anatomy

The frontal lobe is located at the front of the brain and is associated with reasoning, motor skills, higher level cognition, and expressive language. At the back of the frontal lobe, near the central sulcus, lies the motor cortex. This area of the brain receives information from various lobes of the brain and utilizes this information to carry out body movements.

The temporal lobe is located on the bottom section of the brain. This lobe is also the location of the primary auditory cortex, which is important for interpreting sounds and the language we hear. The hippocampus is also located in the temporal lobe, which is why this portion of the brain is also heavily associated with the formation of memories.

The parietal lobe is located in the middle section of the brain and is associated with processing tactile sensory information such as pressure, touch, and pain. A portion of the brain known as the somatosensory cortex is located in this lobe and is essential to the processing of the body's senses.

The occipital lobe is located at the back portion of the brain and is associated with interpreting visual stimuli and information. The primary visual cortex, which receives and interprets information from the retinas of the eyes, is located in the occipital lobe.

Step 1 Create a new image map

To create a new image map, click New on the top-left of the editor, enter a name and click Create.

You can choose to have a responsive or fixed size of the image map. To change that, click Settings. From the menu on the left, choose General. The Responsive setting is automatically enabled. If you want to set a specific size, you should disable it and enter the desired width and height in pixels.

Keep in mind the real size of the image which you will set as a background in next step. If you set a different width/height ratio you can stretch the image and it will look bad. After setting an image in Step 2, you can always come back and click the Reset Size button.

Step 2 Set a background image

To set the background image click Settings, go to the Image section and click Choose Image to launch the WP Media Library.

If you are using the Standalone version, you have to paste the URL of the image.

Step 3 Draw shapes

Choose the Polygon tool from the toolbar on the left and outline each of the 4 lobes of the cerebral cortex of the human brain. When you start drawing a polygon, press Enter or click the first point to complete the drawing process.

When you are done drawing shapes, choose the Select tool to avoid accidentally creating new shapes.

Additionally, you can rename each shape by clicking Rename.

Step 4 Shape Styles

You can customize the styles of a shape both for its default state and mouseover state.

When you select a shape you can see its settings on the right side of the Editor. Look for the Default Style and Mouseover Style tabs.

In this tutorial we used the following settings (see below). You don’t have to copy them exactly, feel free to experiment!

For each lobe we assigned Background Opacity of 0 for Default Style and 0.5 for Mouseover Style. For the Background Color in Mouseover Style we used these four colors for each lobe:

  • Frontal Lobe: #EAC2CC
  • Parietal Lobe: #E5CCE1
  • Occipital Lobe: #BFBDB0
  • Temporal Lobe: #F6D2B6

Step 5 Tooltip styles

You can customize the tooltips by changing background color, opacity, border radius, you can set fixed width or even place the tooltip exactly where you want it.

Select a shape, click the Tooltip Style button and change the Background Color to match its background color that we set for the mouseover state.

Feel free to experiment with the rest of the settings!

If the Tooltip Style button is not easily accessible, you can click Edit Style from the Tooltip tab on the right.

Step 6 Tooltip position

In our case the polygons have a very irregular shape and we might want to position the tooltips precisely where we want them.

Press the Transform Tooltip button and slightly adjust the position of the tooltips as you like. Press Done to confirm the new position, or Reset to go back to the starting position.

Step 7 Tooltip content

To edit the content of the tooltip, click the Tooltip Content button above it.

When the new window opens, click the text in the tooltip to select it and the Settings tab will open automatically.

Since the default element in a tooltip is the Heading element, in the Heading tab you can edit the text.

Feel free to explore the different options for layout and style.

Step 8 HTML API

In the demo at top of this page you might have noticed that when you mouseover one of the paragraphs, the lobe of the brain corresponding to it gets highlighted. This is really simple to do with the plugin’s HTML API and only requires an HTML element attribute.

For example, to highlight the Temporal Lobe when we mouseover a paragraph of text, we do this:


<p data-imp-highlight-shape-on-mouseover="Temporal Lobe">
    The temporal lobe is located…
</p>

Check out the full documentation of the JavaScript and the HTML APIs.

Step 9 Publish your image map

The final step left is to publish the image map on your site. Again, this process is different on WordPress and in the Standalone versions of the plugin.

For detailed instructions, please check out the Publishing Your Image Map section of the documentation.