Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Thanked 0 Times in 0 Posts

    Rollover highlighting with CSS image map?

    I'm working on a project to create an interactive organizational chart, and decided that a CSS rollover image would be the best way to accomplish this. Below is the relevant bit of code with the first three links in place:

    <style type="text/css">
    	.map_image { display: block; width: 675px; height: 2798px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
    	.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
    	.map_image #map_link_0 { width: 179px; height: 86px; top: 226px; left: 5px; }
    	.map_image #map_link_1 { width: 238px; height: 86px; top: 226px; left: 219px; }
    	.map_image #map_link_2 { width: 178px; height: 86px; top: 227px; left: 490px; }
    <div class="map_image" style="background-image: url('Org-Chart.png');">
    	<a class="map_link" id="map_link_0" title="" href=""></a>
    	<a class="map_link" id="map_link_1" title="" href=""></a>
    	<a class="map_link" id="map_link_2" title="" href=""></a>
    This has worked perfectly, but I would also like for the relevant section of the image to highlight on rollover. Either through a change in opacity or some other method. Is this possible? Rollovers are easy enough, but I've never tried to highlight only a portion of the image.

  2. #2
    Senior Coder
    Join Date
    Sep 2010
    Thanked 275 Times in 275 Posts
    I don't think that will work for you. Two things you can do is just make a bunch of little divs to fill the 'box' and float them all into place, or just an old fashioned table, and use one of those choices instead of a map. Then you can set the td or div to some opacity on rollover.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts