PDA

Click to See Complete Forum and Search --> : rollover image map

nsumner88
10-30-2008, 08:26 AM
Hey - I'm in the middle of making a website for our family villa, and was wanting to put on a picture of the floor plan. I thought it'd be a good idea if when you mouse over a room, a big picture of the room shows up - kind of like an image map, only you wouldn't on the room, and the photo would show up over the floor plan (if that makes sense!) Can anyone tell me how to do this please?

Thanks!!:)
gil davis
10-30-2008, 09:49 AM
<img ... usemap="#map">
...
<map name="map">
<area shape="..." coords="..." onmouseover="showtheblowup()" onmouseout="hidetheblowup()" href="#" onclick="return false">
...
</map>
Fang
10-30-2008, 10:00 AM
http://www.cssplay.co.uk/menu/old_master
nsumner88
10-30-2008, 11:10 AM
thanks very much for your replies - with that code, will that only enlarge part of the floor plan, or will that allow a different photo to appear on mouseover?
nsumner88
11-18-2008, 07:19 AM
Hey,

I've tried the coding that Gil_david suggested but it just says there's an error on the page.

I've only done it for one of the rooms so far and this is the code I've used.

<MAP NAME="upstairs001_map">
<AREA SHAPE="RECT" HREF="" ID="Master Bed" ALT="Master Bed" COORDS="144, 92, 0, 0" onmouseover="showtheblowup()" onmouseout="hidetheblowup()" href="DSC00540.JPG" onclick="return false">
</MAP>

Is there something I'm doing wrong?
gil davis
11-19-2008, 11:35 AM
Is there something I'm doing wrong?If this is all the "code" in the page, yes. Where are the functions?
nsumner88
11-19-2008, 12:00 PM
ok, this is everything I have on the page.

<HTML>

<BODY BGCOLOR="#ffffff" TEXT="#0000ff" link="#0000ff" vlink="#0000ff" alink="ff0000">



<FONT FACE="arial" SIZE="3">

<center><img src="villa.jpg" height="40" width="325"></center>
<p><blockquote><blockquote><blockquote><blockquote><blockquote><b>Upstairs</b></blockquote></blockquote></blockquote></blockquote></blockquote>
<blockquote><blockquote><MAP NAME="upstairs001_map">
<AREA SHAPE="RECT" HREF="" ID="Master Bed" ALT="Master Bed" COORDS="144, 92, 0, 0" onmouseover="showtheblowup()" onmouseout="hidetheblowup()" href="DSC00540.JPG" onclick="return false">
<AREA SHAPE="RECT" HREF="" ID="Master Bed 2" ALT="Master Bed 2" COORDS="140, 163, 39, 267">
<AREA SHAPE="RECT" HREF="" ID="Bed 5" ALT="Bed 5" COORDS="297, 81, 202, 0">
<AREA SHAPE="RECT" HREF="" ID="Bed 4" ALT="Bed 4" COORDS="200, 115, 299, 201">
<AREA SHAPE="RECT" HREF="" ID="Bed 3" ALT="Bed 3" COORDS="172, 241, 299, 329">
<AREA SHAPE="RECT" HREF="" ID="Bed 2" ALT="Bed 2" COORDS="138, 330, 299, 414">
<AREA SHAPE="RECT" HREF="" ID="Master Bath" ALT="Master Bath" COORDS="86, 159, 1, 96">
</MAP>
<TABLE BORDER=0 BORDERCOLOR="#000000" CELLSPACING=0 CELLPADDING=0 WIDTH=300 HEIGHT=416>
<TR>
<TD><IMG SRC="1x1.gif" HEIGHT=1 WIDTH=300></TD>
<td><img src="1x1.gif" height=1 width=1></td>
</TR>
<TR>
<TD><IMG SRC="upstairs.jpg" WIDTH=300 HEIGHT=416 ALT="" NAME="upstairs001" USEMAP="#upstairs001_map" BORDER=0></TD>
<TD><IMG SRC="1x1.gif" WIDTH=1 HEIGHT=416></TD>
</TR>
</TABLE>

</BODY>
</HTML>





Please bare in mind i'm a complete newbie! :P
MDS
11-19-2008, 12:16 PM
I think you need to define the functions and link them with the right syntax
nsumner88
11-19-2008, 12:19 PM
thank you for your reply, but i have no idea what that means :P