How do I create hotspots on top of a picture?

  • 1
  • Question
  • Updated 10 years ago
  • Answered
How do I create a link to more than one spot on a picture? For example, if there are several people in a photo, some one could click on a person and find more information about them, such as birthday, address, etc. They could then click on a different person and receive the same type of info on that one.
Photo of Mary

Mary

  • 3 Posts
  • 0 Reply Likes
  • frustrated

Posted 10 years ago

  • 1
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hi Mary

Here is a great site that deals with just such a topic.

http://www.htmlgoodies.com/tutorials/...

That will get you started and I will locate one other for you to look at.

Ed
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
This should also get you started, Mary.
http://www.quackit.com/html/tutorial/...
Photo of Mary

Mary

  • 3 Posts
  • 0 Reply Likes
This looks like something I might try. How do I find the correct coordinates on the picture. I do have Photoshop Elements 6, but couldn't find how to locate them. I am able to overlay a grid, do I just count the boxes?
Photo of Mary

Mary

  • 3 Posts
  • 0 Reply Likes
if I follow the example shown here. how do I find the HTML code to link to another page on my website? Also the code to display the original picture?
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Ha ha ha I was caught up with several others to look for that

Thanks B
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hi Mary

After your last post I spent 3 hours trying program after program for you and after I found this simple to use FREE program I learned how to use it then wrote the step by step tutorial. Take a look at my links page scroll down and click on Santa...

It is sooooo easy...

I listed the tutorial there as well.

Happy site building
Ed

http://honeybearplayhomes.synthasite....
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Thank you, Ed!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
It was too good not to share... ;)

No dealing with finding and then programming coordinates.
No spending half a day to get one image to imagemap when you can spend 20 minutes and be smiling from ear to ear at a great addition to your website.
No thinking you cannot do it when each step is laid out in laymans terms

It is a free download and a simple product... I was truly amazed I was able to find it and I just hope that those who thought that doing an imagemap themselves was too hard can prove themselves wrong within an hour after they download it.

Really it's that easy...

I hope everyone enjoys
Happy site building
Ed
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Mary

To answer your question that you submitted on my site:

"What is the URL for another page on your Synthasite website? For example, I have a page titled Theodore that I would like to link to using an image map"

I think what you are trying to ask is how do you get your created imagemap to link to your page called "Theodore" Simple...

1) Open your browser to your Theodore page
2) In the address bar highlight the entire URL
3) Right on the highlighted text then click "Copy"
4) Paste the saved URL into the URL box in your imagemap editor

That will ensure that your imagemap coordinates will link to your Theodore page.

I hope that helps you
Ed