[thelist] Mouseover map for div

Will willthemoor at gmail.com
Fri Jan 8 13:59:29 CST 2010


that's a big map!

I'd (after trying to avoid it or getting some one else to do it) would
probably go with a series of <li> elements set to display block with
absolute positioning and fixed width and height, essentially
recreating image maps of years gone by. Put the photo and description
in each li and hide it with a technique that works for accessibility
and your chosen tooltip plugin (there are lots of jquery tool tip
plugins). It would be pretty straight forward to hand roll the plugin
if nothing fits the bill.

create a tooltip container with an image, header and paragraph element
(or whatever will be contained in the roll overs)
hide it.

on mouseover,
  show the tooltip container at the position of the cursor
  grab the content of the <li> hovered
  dump into the tooltip container

on mouseout,
  hide the tooltip

on the next mouseover, the content of the container will be updated
with the currently hovered li so there's no need to clean as you go.

Will

On Fri, Jan 8, 2010 at 11:22 AM, Daniel Kessler <danielk at umd.edu> wrote:
> 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
>
>
>
>
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>


More information about the thelist mailing list