Hello and welcome to our community! Is this your first visit?
Register
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
    Aug 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question about interactive HTML

    Hello everyone

    I have a website with a drop down menu (navigation bar) in CSS code.

    I also have a large jpeg file.

    Using the <MAP> object in HTML source code I have allocated certain areas of a large jpeg file - which visually is below the navigation bar in the HTML page when executed by the browser - various URLs as hyperlinks (a href).

    What I was hoping to do is insert code into my html source code, similar to a CSS 'mouse hover' event.

    When the user moves the mouse pointer over one of the hyperlinks on the JPEG image, I want the surrounding area on the JPEG immediately outside the <MAP> object hyperlink to have a coloured border. In effect to highlight the hyperlink upon 'mouse hover event'

    Each caption name of the JPEG hyperlink has its exact caption-matched name on the navigation bar. Is it also possible to have a coloured border highlight the navigation bar name when mouse pointer is hovering over its related caption name <MAP> object hyperlink on JPEG.

    I would be grateful for any help I could receive.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Yes this can be done. You may have some problem visualizing it because your trying to change a number of borders on the other images.

    Instead make a second image of your hovered image that has the borders you want highlighted on hover, then swap the images.

    Hard to explain in words.

    Each caption name of the JPEG hyperlink has its exact caption-matched name on the navigation bar. Is it also possible to have a coloured border highlight the navigation bar name when mouse pointer is hovering over its related caption name <MAP> object hyperlink on JPEG.
    Same thing for that, but you need to use javascript. If you want both effects then use JS to do both. It can be done with CSS but it's complicated.
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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