Home/ Questions/Q 8636383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T10:13:12+00:00

Depicted below is a floor plan which is displayed in a regular html file.

  • 0

Depicted below is a floor plan which is displayed in a regular html file. It is just 1 big image which should have the numbered element blocks pixel perfectly placed over it before a style can even be applied.

The numbered boxes need to have a hover status that turns their background color orange and their number white.

I’d like to know if its possible to achieve this without having to resort to flash. Is it?

floorplan

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s entirely possible. Normally elements in HTML are positioned in a ‘flow’, but you can take them out using absolute positioning. This allows you to give percentage- or pixel-based values to any of the top, left, bottom, right properties and the elements will be positioned at that location offset to their nearest ancestor element with position set to relative, absolute or fixed.

    Here’s a reduced example containing a couple of rooms from your image. You should be able to extend it by copy and pasting then adding new rooms into the markup, and changing their shape and position by giving new ID-based #roomXXXX rules in the CSS.

    http://jsfiddle.net/barney/kBvsr/

    EDIT: Amended example to allow hover in IE6 as pointed out by @Marcio.

    • 0