Photoshop Question posted in
The official user guide can be found here.

Slice building map for clickable rooms – Photoshop

I’m currently working on a website for a rental company of practice rooms. (Music)

For the website they had in their mind to show their building map and click the room you want to book. Unfortunately I don’t much practice in this kind of programming so I need someone’s help.

This is the building map:

https://www.dropbox.com/s/qlee8hjtmje1ljm/Bouwplan-Definitief-Public.jpg?dl=0

You can see that the building consist of 7 rooms, a studio and a relax room. Each has to be clickable separately.

The website is developed in ASP.Net, Vb and I use the zurb foundation framework.

Is it possible to slice the image in the rooms and make them clickable? Of course have the rooms to be in the same position on the website as on the building map.

Thnx in advance and I’m looking forward to your responses!

Kind regards,

Kevin

Tags:

2

Answers


  1. 0

    Sadly I don’t know how you can cut the rooms out with C#, but you could use a js library like leafletjs to display the floorplan. With the library you can draw layers on top of the image which is clickable..

    Login or Signup to reply.
  2. 0

    Use a map and area shapes

    <img src="https://www.dropbox.com/s/qlee8hjtmje1ljm/Bouwplan-Definitief-Public.jpg?dl=1" width="500" height="500" border="0" alt="Karte" usemap="#mapex" />
<map name="mapex">
     <area shape="rect" coords="35,20,140,150" href="#room1" alt="Room 1"  />
     <area shape="rect" coords="145,20,250,150" href="#room2" alt="Room 2"/>
 </map>

    Example: jsfiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search