[thelist] Mouseover map for div

[Lise LaTorre]

I did something similar recently:

http://www.altaatkstation.com/residences.php

I used a combo of image maps and layered sprites. I am only mediocre at 
JS so I'm sure that could have been a lot more elegant but it works. I 
really resisted the idea of using image maps because they are so 'Old 
School' but really, this is what they are for. We really don't need to 
re-invent the wheel just because that wheel has been around for awhile.

Anyway, hope this helps!

Lise

On 1/9/10 10:00 AM, thelist-request at lists.evolt.org wrote:
> Message: 2
> Date: Fri, 8 Jan 2010 14:22:38 -0500
> From: Daniel Kessler<danielk at umd.edu>
> To:thelist at lists.evolt.org
> Subject: [thelist] Mouseover map for div
> Message-ID:<D0F3C6AA-71F1-425B-8C6F-FEF5F478127F at umd.edu>
> Content-Type: text/plain; charset=US-ASCII; format=flowed; delsp=yes
>
> I have a floor plan (see floor plan below) and I'd like to make it so
> that when an office is moused-over, a div shows displaying a pict of
> the office and under that, the person's name and contact information.
> I found something that allows me to do this on a link (see tool tip
> below), but it's not working off of an image.  Do I make my image a
> background image and place divs all over it?  I'd like to try and
> implement an already existing library if possible, if you could
> reference one.  I have jquery already loaded on the page.  Can you
> suggest some pre-existing libraries that I could use?  If not, can you
> suggest an approach?
>
> floor plan
> http://sph.umd.edu/about/building_renovations/plans/CHF.pdf
>
> tool tip
> http://www.dhtmlgoodies.com/scripts/tooltip_shadow/tooltip_shadow.html
>
>
> thank for any assistance.
>
> -- Daniel Kessler University of Maryland College Park School of Public 
> Health 3302E SPH Building College Park, MD 20742-2611 Phone: 
> 301-405-2545 http://sph.umd.edu