How to make Ninja slider support image map?

Every <li> element in the image slider markup will be treated as a slide. It can contain any HTML content. So you can add your image map element or any other type of elements.

Eample: Content Slider (the demo 3 in the download package)

Very interesting information!Perfect just what I was searching for!

I am using menu-cool / Ninja Slider (Video slider). I need the image to stay active when I click

cookie clicker

If you want to add image maps to each of the Ninja Slider images and the slider images are not wrapped as <img> elements, you can still achieve this by using HTML and CSS. Here are the general steps to follow:

1. Create an HTML Container: Wrap your Ninja Slider with a container element, such as a <div>. This container will hold both the slider and the image maps.

htmlCopy code
<div class="slider-container">
  <!-- Ninja Slider content goes here -->
</div>

2. Add Image Maps: Create individual image maps for each of your slider images. Image maps typically consist of <map> elements and a series of <area> elements to define clickable regions. Here's an example:

htmlCopy code
<map name="image-map-1">
  <area shape="rect" coords="0,0,50,50" href="link1.html" alt="Link 1">
  <!-- Define more clickable areas for the first image -->
</map>

<map name="image-map-2">
  <area shape="rect" coords="0,0,50,50" href="link2.html" alt="Link 2">
  <!-- Define more clickable areas for the second image -->
</map>

3. Associate Image Maps with Slider Images: For each image in your slider, you can add an usemap attribute that specifies the name of the corresponding image map. This is done within the CSS of your Ninja Slider:

cssCopy code
.ninja-slider img:nth-child(1) {
  /* Styling for the first image in the slider */
  usemap="#image-map-1";
}

.ninja-slider img:nth-child(2) {
  /* Styling for the second image in the slider */
  usemap="#image-map-2";
}

4. Style Image Maps: You can use CSS to style your image maps and control their appearance.

cssCopy code
/* Style image maps */
map {
  display: block;
  position: absolute;
  z-index: 1;
  opacity: 0; /* Hide the image maps initially */
}

/* Adjust the opacity when hovering over the container to make image maps visible */
.slider-container:hover map {pacman full screen javascript:nicTemp();
: 1;
}

5. Testing: Ensure that your image maps are properly aligned with the slider images and that the clickable regions work as expected.

By following these steps, you can add image maps to your Ninja Slider images even if they are not wrapped as <img> elements. Just be sure to customize the HTML, CSS, and image map definitions to match your specific use case and design requirements.