Skip navigation
RepulseMonkey
RepulseMonkey Calculating status...
Currently Being Moderated

Image Maps not working

Jul 20, 2012 8:01 AM

Tags: #image #image_map

Hi, here's the url:

http://www.theexperience-exchange.co.uk

 

There are 4 image maps over the word 'Start' at the bottom of the page.

 

I've linked the pages in the properties panel and there appears to be an 'href' piece of coding in the html.

 

The other maps higher on the page seem to be OK. 

 

Any clues anyone?  Any help always appreciated.

 

All the best, RP

755 Views   8 Replies   Latest reply: RepulseMonkey, Jul 23, 2012 6:26 AM
 
Replies
  • Ken Binney
    Currently Being Moderated
    1. Ken Binney,
    Jul 20, 2012 1:13 PM   in reply to RepulseMonkey
    Report

    Hey RP -

     

    May we know why you are using imagemaps when you could just hyperlink each image?

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    2. MurraySummers,
    Jul 21, 2012 5:53 AM   in reply to Ken Binney
    Report

    Ken is certainly correct with his question - explicit links would be much better to use than image maps in my opinion.  Nevertheless, try adding "overflow:hidden;" to the rule for the #footer div and see what happens.

     
    |
    Mark as:
  • RepulseMonkey
    Currently Being Moderated
    3. RepulseMonkey,
    Jul 23, 2012 1:09 AM   in reply to Ken Binney
    Report

    Hi Ken.... the somewhat humbling answer to your question.... is that I am a bit thick!  It's definitely a more elegant approach!

     

    Many thanks.

     

    RP

     
    |
    Mark as:
  • RepulseMonkey
    Currently Being Moderated
    4. RepulseMonkey,
    Jul 23, 2012 1:17 AM   in reply to MurraySummers
    Report

    Thanks Murray, that has sorted it.  Having done a small amount of research on the 'overflow' declaration... I'm not sure how this has helped in this instance.  There wasn't any obvious overflow of content....  feel free to correct me.... always willing to learn!

     

    Thanks again to both yourself and Ken.

     

    All the best, RP

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    5. Ken Binney,
    Jul 23, 2012 3:19 AM   in reply to RepulseMonkey
    Report

    You're most welcome RP...

     

    Also noticed a typo on your CONTACT page

     

    – Securely ‘backed up’ data without any internal IT suppor.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    6. MurraySummers,
    Jul 23, 2012 4:41 AM   in reply to RepulseMonkey
    Report

    The 'overflow' style when used with values "scroll | hidden" is incredibly useful in controlling floats and margins on your page.  When an element is assigned one of these styles, it becomes "a new block formatting context".  What that means is that all interior floats (within that element) are automatically cleared, and no interior margins can escape the container.  The problem you were having was that a subsequent element was somehow (and I'm not really sure why - didn't look closely enough to diagnose it) expanded enough vertically to MASK the linked buttons.  When the buttons are masked, the mouseovers are not detected by the browser and the links don't work.  By assigning the overflow style, you prevent that masking and the links are expressed.

     
    |
    Mark as:
  • RepulseMonkey
    Currently Being Moderated
    7. RepulseMonkey,
    Jul 23, 2012 6:24 AM   in reply to Ken Binney
    Report

    Oooer... what a week for website development... must be the hot weather!

     

    Much appreciated.

     

    RP

     
    |
    Mark as:
  • RepulseMonkey
    Currently Being Moderated
    8. RepulseMonkey,
    Jul 23, 2012 6:26 AM   in reply to MurraySummers
    Report

    AAAhhhhh.  I see.  Damn clever this CSS lark!  Another lesson learnt.  It's a good day!

     

    Thank you so much.  Really appreciated.

     

    RP

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points