Ninja Slider / Posts /

How to make Ninja slider support image map?

I got a requirement to have image maps on each of the Ninjar slider images. The slider images are not wrapped as <img>. Is there a way to make image map working?

Hello  10 years ago   viewed: 6379    

4 Answers


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)

Milo   10 years ago

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

  4 years ago

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

cookie clicker

  3 years ago

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.
<div class="slider-container"> <!-- Ninja Slider content goes here --> </div>
  1. 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:
<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>
  1. 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:
.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"; }
  1. Style Image Maps: You can use CSS to style your image maps and control their appearance.
/* 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; }
  1. 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.

  9 months ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: