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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27

Thread: Image Rollovers

  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Image Rollovers

    Hi,
    This is the image that I'm trying to work with:

    http://ecstasy.xiui.net/hawkming/Taiwan%20Map.gif

    What I want to do is instead of the 3 boxes being part of the image, I want to make them rollovers.
    So when you hover over a bird silouhette, a box will appear on top of the map which might look something like this:

    http://ecstasy.xiui.net/hawkming/Hsinchu%20Over.gif

    I sliced the first image so that the birds can be "links" but when I played around with some rollovers codes, the 2nd image would push the 1st image apart.

    Does anybody know how I can get this to work?
    Thanks.

  • #2
    Codeasaurus Rex
    Join Date
    Jun 2008
    Location
    Redmond, WA
    Posts
    659
    Thanks
    31
    Thanked 100 Times in 94 Posts
    First of all welcome to CF!

    Here is a great tutorial: http://www.maratz.com/blog/archives/...images-in-css/.

    Check that out and let us know if you're having further problems with it.
    Unless otherwise stated, any code posted is most likely untested and may contain syntax errors.
    My posts, comments, code, and suggestions reflect only my personal views.
    Web Portfolio and Code Snippets: http://shanechism.com

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the reply.

    However, I don't really understand the coding. How would that allow the different images to appear while hovering over the different silhouettes?

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    This just preloads the image to the cach so that your navigation doesn't blink on roll over:
    Code:
    a { background: url(image_hover.gif); }
    Then this section changes the links origional background to the default image:
    Code:
    a:link { background: url(image_default.gif); }
    and this last bit just creates the roll over effect by replacing the default background with the one in the cach.
    Code:
    a:hover,
    a:focus { background: url(image_hover.gif); }

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    But how would that make each individual bird "hover-able" and when a different bird is hovered, a different image replaces the ENTIRE old image, not just the bird?

    Sorry but I'm really confused. x_x

  • #6
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    You would have to signify each bird like this
    Code:
    a#bird1 { background: url('bird1_hover.gif'); }
    a#bird1:link { background: url('image_default.gif'); }
    a#bird1:hover,
    a#bird1:focus { background: url('bird1_hover.gif'); }
    
    a#bird2 { background: url('bird2_hover.gif'); }
    a#bird2:link { background: url('image_default.gif'); }
    a#bird2:hover,
    a#bird2:focus { background: url('bird2_hover.gif'); }
    That way you could single out every bird and give it a specific image.

    Do you have any code that you can post so that we may be able to give more specific help?

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try the attached image map example, see if it is any help
    Attached Files Attached Files
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ninnypants:
    I tried to follow what you said and ended up with this --

    CSS =
    a.Hsinchu { background: url('/hawkming/Hsinchu Over.gif'); }
    a.Hsinchu:link { background: url('/hawkming/Taiwan Map.gif'); }
    a.Hsinchu:hover,
    a.Hsinchu:focus { background: url('/hawkming/Hsinchu Over.gif'); }

    HTML =
    <a href="" class="Hsinchu"><img src="/hawkming/Hsinchu.gif" width="41" height="41" alt="" border="0"></a>

    Anything wrong with it? Because it doesn't work.

    Mr J:
    I copied your code and for some reason, only "And Message 3" showed up, the other two didn't. Also, how can I make it an image instead of a message?

    Thank you both for your replies.

  • #9
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    I made some changes to accomplish this you needed JavaScript not CSS. I added a "chng_bg" function that should change your images for you. You'll need a Image with each bird highlighted or whatever you want them to do when hovered. I also edited Mr J's function so that you can use more than one DIV

    Code:
    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    </HEAD>
    <BODY>
    
    
    
    <script type="text/javascript">
    //preloads images so that they don't blink
    var def = new Image();
    var bird1 = new Image();
    var bird2 = new Image();
    var bird3 = new Image();
    //the source for you image states
    def.src = "taiwan.jpg"//default
    bird1.src = "taiwan_1.jpg"//hovering over bird 1
    bird2.src = "taiwan_2.jpg"//hovering over bird 2
    bird3.src = "taiwan_3.jpg"// hovering over bird 3
    
    function chng_bg(img){
    	document.taiwan.src = img;
    }
    //I changed this function so that you could use more than one div
    //and place them where ever you want on the page using the same fashon as "d1" 
    function test(m,id){
    document.getElementById(id).innerHTML=m
    //does the same this as before
    curr = document.getElementById(id).style.display;
    document.getElementById(id).style.display = (curr == 'none'?'block':'none');
    }
    
    
    </script>
    
    
    <div style="position:relative">
    <img src="taiwan.jpg" name="taiwan" usemap="#mapname" style="border:0"> 
    
    <map name="mapname">
    <AREA SHAPE="RECT" coords="121,73,160,110" href="your page.htm" alt="your message here" onmouseover="test('This is message 1','d1'); chng_bg(bird1.src);" onmouseout="test('','d1'); chng_bg(def.src);">
    <AREA SHAPE="RECT" coords="68,156,103,188" href="your page.htm" alt="your message here" onmouseover="test('Message 2','d1'); chng_bg(bird2.src)" onmouseout="test('','d1'); chng_bg(def.src);">
    <AREA SHAPE="RECT" coords="40,367,180,402" href="your page.htm" alt="your message here" onmouseover="test('And message 3','d1'); chng_bg(bird3.src)" onmouseout="test('','d1'); chng_bg(def.src);">
    </map>
    
    <div id="d1" style="position:absolute;left:50;top:250;width:150px;height:50px;border:1px solid black;display:none;background-color:#FFFFFF"></div>
    
    
    </BODY>
    </HTML>

  • Users who have thanked ninnypants for this post:

    Ecstasy. (07-25-2008)

  • #10
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    You can also change it to an image by using the id of an image instead of the id of a div
    Attached Files Attached Files

  • #11
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you, ninnypants.
    Hopefully this is my last question...
    So far, my code looks like this:
    Code:
    <html>
    <head>
    <title></title>
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <script type="text/javascript">
    //preloads images so that they don't blink
    var def = new Image();
    var Hsinchu = new Image();
    var Taichung = new Image();
    var Kaohsiung = new Image();
    //the source for you image states
    def.src = "/hawkming/Taiwan Map.png"//default
    Hsinchu.src = "/hawkming/Hsinchu Over.gif"//hovering over bird 1
    Taichung.src = "/hawkming/Taichung Over.gif"//hovering over bird 2
    Kaohsiung.src = "/hawkming/Kaohsiung Over.gif"// hovering over bird 3
    
    function chng_bg(img){
    	document.taiwan.src = img;
    }
    //I changed this function so that you could use more than one div
    //and place them where ever you want on the page using the same fashon as "d1" 
    function test(m,id){
    document.getElementById(id).innerHTML=m
    //does the same this as before
    curr = document.getElementById(id).style.display;
    document.getElementById(id).style.display = (curr == 'none'?'block':'none');
    }
    
    
    </script>
    
    
    <div style="position:relative">
    <img src="/hawkming/Taiwan Map.png" name="taiwan" usemap="#mapname" style="border:0"> 
    
    <map name="mapname">
    <AREA SHAPE="RECT" coords="121,73,160,110" href="your page.htm" alt="your message here" onmouseover="chng_bg(Hsinchu.src);" onmouseout="chng_bg(def.src);">
    <AREA SHAPE="RECT" coords="68,156,103,188" href="your page.htm" alt="your message here" onmouseover="chng_bg(Taichung.src)" onmouseout="chng_bg(def.src);">
    <AREA SHAPE="RECT" coords="40,367,180,402" href="your page.htm" alt="your message here" onmouseover="chng_bg(Kaohsiung.src)" onmouseout="chng_bg(def.src);">
    </map>
    
    <div id="d1" style="position:absolute;left:50;top:250;width:150px;height:50px;border:1px solid black;display:none;background-color:#FFFFFF"></div>
    
    
    </body>
    </html>
    Did I change the right things?
    Right now, only the last one works and I don't know why.

    http://ecstasy.xiui.net/hawkming/3.php

  • #12
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    Hi,

    This seems to work fine (in both IE7 and FF2) if a couple of minor things are corrected:

    Code:
    </map>
    <div id="d1" style="position:absolute;left:50px;top:250px;width:150px;height:50px;border:1px solid black;display:none;background-color:#FFFFFF"></div>
    </div>
    </body>
    </html>
    The initial wrapper div was not closed, perhaps accounting for the erratic behaviour. If your image paths are correct, it should run OK.

    Edit:
    Just noticed something else - those 4 invalid margin attributes on the body tag should be removed.
    Last edited by auslin; 07-25-2008 at 01:07 PM. Reason: Noticed another problem

  • #13
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It works!
    Thank you so much ninnypants and auslin! =D
    Last edited by Ecstasy.; 07-26-2008 at 01:34 PM.

  • #14
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ugh. I've encountered yet another problem. x_x
    I'm trying to make a page where the navigation buttons are rollovers as well, like the image before. (this is on the same page -- so navigation and then the map is part of the content on that page)
    However, I tried to use that code again and it ended up making neither of them work.

    Code:
    <html>
    <head>
    
    <title></title>
    
    </head>
    
    <body bgcolor="#18294b">
    
    <script type="text/javascript">
    
    var def = new Image();
    var Hsinchu = new Image();
    var Taichung = new Image();
    var Kaohsiung = new Image();
    var Link 1 = new Image();
    var Link 2 = new Image();
    var Link 3 = new Image();
    var Link 4 = new Image();
    var Link 5= new Image();
    var Link 6 = new Image();
    var Link 7 = new Image();
    var Link 1 Over = new Image();
    var Link 2 Over = new Image();
    var Link 3 Over = new Image();
    var Link 4 Over = new Image();
    var Link 5 Over = new Image();
    var Link 6 Over= new Image();
    var Link 7 Over = new Image();
    
    def.src = "/hawkming/Taiwan Map.png"
    Hsinchu.src = "/hawkming/Hsinchu Over.gif"
    Taichung.src = "/hawkming/Taichung Over.gif"
    Kaohsiung.src = "/hawkming/Kaohsiung Over.gif"
    Link 1.src = "/hawkming/Link 1.gif"
    Link 2.src = "/hawkming/Link 2.gif"
    Link 3.src = "/hawkming/Link 3.gif"
    Link 4.src = "/hawkming/Link 4.gif"
    Link 5.src = "/hawkming/Link 5.gif"
    Link 6.src = "/hawkming/Link 6.gif"
    Link 7.src = "/hawkming/Link 7.gif"
    Link 1 Over.src = "/hawkming/Link 1 Over.gif"
    Link 2 Over.src = "/hawkming/Link 2 Over.gif"
    Link 3 Over.src = "/hawkming/Link 3 Over.gif"
    Link 4 Over.src = "/hawkming/Link 4 Over.gif"
    Link 5 Over.src = "/hawkming/Link 5 Over.gif"
    Link 6 Over.src = "/hawkming/Link 6 Over.gif"
    Link 7 Over.src = "/hawkming/Link 7 Over.gif"
    
    
    function chng_bg(img){
    	document.taiwan.src = img;
    }
    function chng_bg(img){
    	document.Navigation.src = img;
    }
    
    
    function test(m,id){
    document.getElementById(id).innerHTML=m
    
    curr = document.getElementById(id).style.display;
    document.getElementById(id).style.display = (curr == 'none'?'block':'none');
    }
    
    
    </script>
    
    <div style="text-align: center; top: 0px"><img src="/hawkming/Header.png" name="Navigation" usemap="#Navigation" style="border:0"></div>
    <map name="Navigation">
    <AREA SHAPE="RECT" coords="120,232,213,260" href="/hawkming/1.php"  onmouseover="chng_bg(Link 1.src);" onmouseout="chng_bg(def2.src);">
    <AREA SHAPE="RECT" coords="216,232,310,260" href="/hawkming/2.phpl"  onmouseover="chng_bg(Link 2.src)" onmouseout="chng_bg(def3.src);">
    <AREA SHAPE="RECT" coords="312,232,405,260" href="/hawkming/3.php"  onmouseover="chng_bg(Link 3.src)" onmouseout="chng_bg(def4.src);">
    <AREA SHAPE="RECT" coords="407,232,502,260" href="/hawkming/4.php"  onmouseover="chng_bg(Link 4.src);" onmouseout="chng_bg(def5.src);">
    <AREA SHAPE="RECT" coords="503,232,597,260" href="/hawkming/5.php"  onmouseover="chng_bg(Link 5.src)" onmouseout="chng_bg(def6.src);">
    <AREA SHAPE="RECT" coords="600,232,694,260" href="/hawkming/6.php"  onmouseover="chng_bg(Link 6.src)" onmouseout="chng_bg(def7.src);">
    <AREA SHAPE="RECT" coords="695,232,790,260" href="/hawkming/7.php"  onmouseover="chng_bg(Link 7.src)" onmouseout="chng_bg(def8.src);">
    </map>
    
    <center>
    <div class="content">
    <div style="background-image: url(/hawkming/Background.gif); background-repeat: repeat-y; background-position: center;">
    
    <div style="position:relative">
    <img src="/hawkming/Taiwan Map.png" name="taiwan" usemap="#Taiwan Map" style="border:0"> 
    
    <map name="Taiwan Map">
    <AREA SHAPE="RECT" coords="215,72,255,115" href="#null"  onmouseover="chng_bg(Hsinchu.src);" onmouseout="chng_bg(def.src);">
    <AREA SHAPE="RECT" coords="161,154,200,196" href="#null"  onmouseover="chng_bg(Taichung.src)" onmouseout="chng_bg(def.src);">
    <AREA SHAPE="RECT" coords="128,367,173,408" href="#null"  onmouseover="chng_bg(Kaohsiung.src)" onmouseout="chng_bg(def.src);">
    </map>
    
    </div>
    </div>
    </div>
    </center>
    </body>
    </html>
    Does anybody know what's wrong?
    Thanks.

  • #15
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Remove the space from the variables

    Example:

    var Link 1

    var Link 1 Over

    chng_bg(Link 1.src)

    to

    var Link1

    var Link1Over

    chng_bg(Link1.src)


    Sorry about the mistakes in my last example
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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