[chrisbaker4937]

??

I have a website for my in laws villa in Florida which I will shortly be updating, I have seen whilst browsing the net another site: -

www.users.waitrose.com/~elainenicol

When you click on 'the cottage' you are presented with a floor plan, by clicking on the room you then move to the page with a picture and brief description. I would like to have something similar on my site I do have a copy of the architects floor plan at: -

http://floridavillarental0.tripod.com/id_27.html

I would like to reproduce this floor plan on the updated website but cannot view the text on the elainenicol site to see how its done... can anyone help with this please??

Thanks

[coreybryant]

They are using a map reference. This might help you: http://www.users.waitrose.com/~elainenicol/cottage.htm

What do you use to create your HTML? If you use DW:
Choose File > Open, and in the dialog box that appears, navigate to the GettingStarted folder you created, then navigate to Tutorials/Completed and open the file named imagemap_comp.htm. (C:\Program Files\Macromedia\Dreamweaver MX\Samples\GettingStarted\Tutorials)

In FP:
Click the graphic.
On the Pictures toolbar, click the Hotspot button corresponding to the shape you want:.
*Note: To display the Pictures toolbar, point to Toolbars on the View menu, and then click Pictures.

[chrisbaker4937]

Hi Corey,

Thanks for the info - I originally used a trellix wizard to write my site and then over time have self taught all the additions to the html. I tend to view source on sites and then modify the html to my own ends.

Therefore I was really looking to see how they created the original floor plans and then the code that goes into the page to send the click to the relevant room. Is the plan created using a 'program' ?

Sorry - as I said I am self taught and have no specialist programs as you can probably tell from the web site.

[coreybryant]

Well they are just images. They created the images & then used the map area (hot spots) to make areas on that image clickable. The image is created using an image program like Photoshop or PaintShop. And then you use HTML code to make the areas clickable, like they did here (it seems using FrontPage):
<map name="FPMap1">
<area target="main" href="groundfl.htm#Hall" shape="rect" coords="86, 147, 182, 262">
<area target="main" href="groundfl.htm#Bathroom" shape="rect" coords="7, 148, 87, 262">
<area target="main" href="groundfl.htm#Lounge" shape="rect" coords="181, 149, 286, 263">
<area target="main" href="groundfl.htm#Bedroom 5" shape="rect" coords="7, 77, 87, 149">
<area target="main" href="groundfl.htm#Kitchen" shape="rect" coords="86, 78, 197, 148">
<area target="main" href="groundfl.htm#Dining Room" shape="rect" coords="196, 76, 287, 148">
<area target="main" href="groundfl.htm#Terrace" shape="rect" coords="6, 18, 287, 75">
<area target="main" href="groundfl.htm" shape="default">
<area target="main" href="groundfl.htm" coords="0, 0, 10000, 10000" shape="rect">
</map>

[theguyfromoz]

Actually, the easiest way to do it is with a program like Photoshop 7 or PhotoImpact that has image mapping built right in. You just load the floorplan into the program and create "hotspots" for each of the rooms by dragging a box around them, then inputting the URL of the page you want to link to. These programs (and some others) will then generate a HTML page for you with the image in it and all the map coordinates properly coded. You can either use that page directly or cut and paste the HTML from the page.

TONY

[chrisbaker4937]

Re the help above - thanks Guys - have been neglecting this for a bit but recently purchased Photo Shop 7 and Paintshop to get going again.

Especially thanks to theguyfromoz - will try as you suggested tonight !

LiQuiD8ToRoK - thanks for the link - this used to be a very good site with quick informative responses but will check out your link asap.

;)