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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change div background by hovering over different images?

    Hi all,

    So I want to take a picture of the United Kingdom, and have the different parts glow when you hover over them, then click through to different pages.

    The obvious way to me would be to have a div with a background image of the UK, which changes to an identical pic but with Scotland glowing a different colour (I have already made all the images etc) when you hover over a transparent png rectangle which is linked to 'Scotland.php' and positioned vaguely over Scotland.

    Does this make sense so far?

    I need it set up for 7 regions, so 7 links that change the background image of one div. (and said links need to be positioned within that div at awkward places)

    Any ideas? I'm flat out at the moment - it's the last thing I need to do on a huge site project, and I can't think!

    Any and all suggestions welcome. No working code at present.
    Last edited by epytome; 08-04-2011 at 04:23 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by epytome View Post
    Hi all,

    So I want to take a picture of the United Kingdom, and have the different parts glow when you hover over them, then click through to different pages.

    The obvious way to me would be to have a div with a background image of the UK, which changes to an identical pic but with Scotland glowing a different colour (I have already made all the images etc) when you hover over a transparent png rectangle which is linked to 'Scotland.php' and positioned vaguely over Scotland.

    Does this make sense so far?

    I need it set up for 7 regions, so 7 links that change the background image of one div. (and said links need to be positioned within that div at awkward places)

    Any ideas? I'm flat out at the moment - it's the last thing I need to do on a huge site project, and I can't think!

    Any and all suggestions welcome. No working code at present.

    Image mapping would be best option for this. Following are the links for sample code:

    http://htmlhelp.com/reference/html40/special/map.html

    http://www.javascriptkit.com/howto/imagemap.shtml

    http://www.htmlcodetutorial.com/imag...msupp_220.html

    http://www.w3schools.com/TAGS/tag_map.asp

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Or create a CSS image map.

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oooh nice! I'm liking both, to be honest. Will deliberate and then implement, link to follow.


  •  

    Posting Permissions

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