How to add hotspots to image

I have an image that represents what step you are on in a process:



I need to add links to each step ( hotspots) over the image to bring them to that particular page. And we dont want them moving ahead, meaning if they are on the first step, the links to the next steps would be disabled.They can only go backwards in the process.

Can anyone help me add the hotspots? I am at a loss how to do this.
John S.Web DeveloperAsked:
Who is Participating?
 
Juana VillaFront-end DeveloperCommented:
Hi,

If the user can jump from step to step, I will make the steps <a> tags. However, if the user cannot click on the nav I will make them <span> tags:
Since you will be using different pages, you will know which step needs to have the "current" class.
<p class="stepWrapper">
<a href="/linkGoeshere.com" class="step current">First step</a>
<a href="/linkGoeshere.com" class="step">Second step</a>
<a href="/linkGoeshere.com" class="step">Third step</a>
</p>

Open in new window


OPTION A
Then the easiest way is to get 5 images  (one for each step) then you can swap the background image depending on their state OR you could use css.

.step {
  padding: 50px 0;
  width: 30%;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: orange;
  text-transform: uppercase;
  position: relative;
  margin: 0 -5px;
  font-weight: 700;
}
.step:before{
  content:"";
  width: 100%;
  height: 5px;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  background: #222;
  top: 15px;
}
.step:first-child:before{
  width: 50%;
  right: 0;
  left: inherit;
}
.step:last-child:before{
  width: 50%;
  right: inherit;
  left: 0;
}
.step:after{
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 3px;
  background: orange;
}
.step.current{
  color: #222;
}
.step.current:after{
  background: blue;
}

Open in new window


This is  my example on how to do this using only css.

OPTION B
Also, you can use svg paths; which is slightly harder. Here is a link on how to use svg paths.
0
 
Julian HansenCommented:
Does each step represent a different page or is it one page and the links just show / hide different sections?
0
 
John S.Web DeveloperAuthor Commented:
Each step is a different page, yes.
0
 
John S.Web DeveloperAuthor Commented:
Thanks. Can you show me how to make the circles bigger?
1
 
Juana VillaFront-end DeveloperCommented:
You can make the circles bigger by changing the height and width of ".step:after". You will need to change the top position too in order to make them centered.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.