Community Plugin

gatsby-plugin-react-image-map

^{GatsbyJS Plugin · React}

This GatsbyJS plugin is creating a multi-layered react component with changing background images on mouse or touch moves. The images are in full width and cover the whole wrapper element. It’s showen one image at a time. While moving the mouse in any direction the images are beeing iterated and exchanged. On touch devices only the x-axis is beeing tracked for iterating the images.

Dependencies

To use this plugin correctly you should have installed gatsby-transformer-sharp and an source processor for your images, which will be in most cases gatsby-source-filesystem.

Install gatsby-transformer-sharp and gatsby-source-filesystem

yarn add gatsby-transformer-sharp gatsby-source-filesystem
# or
npm install --save gatsby-transformer-sharp gatsby-source-filesystem

Configure gatsby-config.js

module.exports = {
  plugins: [
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `image-map`,
         path: `${__dirname}/src/images/image-map/`,
       },
     },
    `gatsby-transformer-sharp`,
    // ...
  ]
  // ...
}

Install

Install gatsby-plugin-image-map

yarn add gatsby-plugin-react-image-map
# or
npm i --save-dev gatsby-plugin-react-image-map

Configure gatsby-config.js

module.exports = {
  plugins: [
   `gatsby-transformer-sharp`,
   {
     resolve: `gatsby-source-filesystem`,
     options: {
       name: `images`,
       path: `${__dirname}/src/images/`,
     },
   },
   `gatsby-plugin-react-image-map`,
   // ...
  ],
  // ...
}

Available options

These are the default options and can/should be modified. nodes is the only required property. All the rest is optional.

activeClass: ``,          // (optional) class of an active image wrapper
activeStyle: {            // (optional) active styles for active image wrapper
  opacity: 1,
},
imageStyle: {             // (optional) custom styles for image element
  maxWidth: `100%`,
  maxHeight: `100vh`,
},
itemClass: ``,            // (optional) class of an active image wrapper
itemStyle: {              // (optional) custom styles for image wrapper
  position: `absolute`,
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  display: `block`,
  opacity: 0,
  width: `100%`,
  height: `100%`,
},
nodes: [],                // list of your images
threshold: 100            // (optional) the bigger the threshold, the longer
                          // the mouse movement has to be to change an image

When do I use this plugin?

This plugin is perfect to have an interactive first impression of your website. The images are in the background so you can easily put content in front of them. It is a kind of interactice slide show.

Examples of usage

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import ImageMap from "gatsby-plugin-react-image-map" // import the image-map plugin

const ImageMapContainer = () => {
  /**
   * Query the images you'd like to be visible inside the image map.
   * In this case the regular expression is looking for images inside
   * the `image-map` folder inside your `src`
   */
  const data = useStaticQuery(graphql`
    query ImageMapQuery {
      allFile(filter: {sourceInstanceName: {eq: "image-map"}}) {
        nodes {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid_noBase64
            }
          }
          relativePath
        }
      }
    }
  `)
   
  return (
    <ImageMap nodes={data.allFile.nodes}/>
  )
}

export default ImageMapContainer