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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.