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 Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Need some help with image rollover change

    So I'm trying to do a map, and selected regions should highlight (new image to show) on mouse rollover. Not using any js.
    In the html I've got:
    Code:
    <a id="test1" href="#"><img id="area1" src="styling/pin.png" alt="regions"></a>
    (at the moment just in <body>, no divs)

    Code:
    a#test1:hover{
    	position: relative;
    	top: 10px;
    	left: 10px;
       	background-image: url('styling/maptest.png');
    }
    on rollover, it just moves the pin.png image 10px left and up, but I want it to set the background image to maptest, and set that 10px left and up. Am I going about this all wrong?

    Edit: can't use sprites I don't think - the main image will be one of Europe, and hovering on each country should highlight it.
    Last edited by backa; 12-04-2012 at 11:41 AM.

  • #2
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Okay I got it showing the maptest image, but now it re-positions pin and maptest, how can I make pin disappear on hover? I tried visibility: hidden but that doesn't work.

    I've put a test version up as I don't think I'm being clear. http://goo.gl/mgU9J - hovering on the pin icon should show the other image.
    Last edited by backa; 12-04-2012 at 03:10 PM.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Try this CSS:

    Code:
    html{padding:0px;margin:0px;}
    body{position:absolute;background-color:white;margin:0 0 0 140px;width:960px;height:auto;color:black;padding:0px;}
    h1{margin:20px 0px 15px 70px;text-align:center;font:28px 'arial';color:#db0b0b;padding:0;}
    p{font:16px 'arial';margin:10px 0px 10px 0px;}
    #area1{position:absolute;top:30%;left:50%;margin-top:-30px;margin-left:-20px;}
    #area2{position:relative;top:-120px;left:-210px;}
    #map{border:solid 1px black;}
    #test1{position:absolute;top:487px;left:241px;width:198px;height:198px;}
    #test1:hover{background-image:url("maptest.png");}
    #test1:hover #area1{display:none;}
    #container{position:relative;}
    I'm not sure if that's what you're going for or not, but it sounds like it to me.

    Now, if you're going for a full map of Europe and you want to have the countries highlight as your mouse enters their borders I have to warn you: this really can't be done without either 1) an enormous amount of HTML/CSS or 2) some javascript.

    I tried doing something similar with an aerial map of a farm/B&B and wasted quite a lot of time with image maps trying to get a working solution to highlight certain buildings or fields when their exact feature boundaries were hovered over. In the end, it was a lot of time wasted. Then again, this was pre-HTML5 and CSS3, so maybe there is a viable method these days...but I haven't seen it executed so far. I guess I'm just saying you might want to prepare yourself for the idea of resorting to at least a little javascript for this.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    backa (12-05-2012)

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Rowsdower! View Post
    Try this CSS:

    Code:
    html{padding:0px;margin:0px;}
    body{position:absolute;background-color:white;margin:0 0 0 140px;width:960px;height:auto;color:black;padding:0px;}
    h1{margin:20px 0px 15px 70px;text-align:center;font:28px 'arial';color:#db0b0b;padding:0;}
    p{font:16px 'arial';margin:10px 0px 10px 0px;}
    #area1{position:absolute;top:30%;left:50%;margin-top:-30px;margin-left:-20px;}
    #area2{position:relative;top:-120px;left:-210px;}
    #map{border:solid 1px black;}
    #test1{position:absolute;top:487px;left:241px;width:198px;height:198px;}
    #test1:hover{background-image:url("maptest.png");}
    #test1:hover #area1{display:none;}
    #container{position:relative;}
    I'm not sure if that's what you're going for or not, but it sounds like it to me.

    Now, if you're going for a full map of Europe and you want to have the countries highlight as your mouse enters their borders I have to warn you: this really can't be done without either 1) an enormous amount of HTML/CSS or 2) some javascript.

    I tried doing something similar with an aerial map of a farm/B&B and wasted quite a lot of time with image maps trying to get a working solution to highlight certain buildings or fields when their exact feature boundaries were hovered over. In the end, it was a lot of time wasted. Then again, this was pre-HTML5 and CSS3, so maybe there is a viable method these days...but I haven't seen it executed so far. I guess I'm just saying you might want to prepare yourself for the idea of resorting to at least a little javascript for this.
    That works great! Unfortunately I've since been informed there shouldn't be a rollover image, rather text. Thanks for the advice too, I was wondering if this idea sounded simple but was really quite ambitious.


  •  

    Posting Permissions

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