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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouseover image element?

    Is there a xhtml/css method for creating an image that changes on mouseover?

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    you can use the :hover psuedoclass thru CSS, tho I don't believe its supported on anything except links by IE.

    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Yes, so if you make it a link and assign a background image to the link and another when it is hovered, you can make it work.
    .
    .

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    But you can also attach the :hover psuedoclass to any object, the only drawback being that IE doesn't support it.

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you show me what the code would look like to do that?

  • #6
    New Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    83
    Thanks
    6
    Thanked 7 Times in 7 Posts
    I just made a page with my own rollovers. Might not be perfect, but here is what I did. I used a transparent gif (icon.gif) as the image encased in the link. It is 32px wide and 27px high. All of the images used in this technique are the same size.

    EDIT: To clarify, I am using a background image that is showing through the transparent image in the page. When I hover over the link (the transparent image encased in the link), the other background image appears underneath. I am using the psuedo class hover to create this effect.

    Code:
    <a class="home" href="#"><img  src="images/icon.gif" alt="Go to the Home Page" /></a>
    Here is the CSS :

    Code:
    a.home  {
          display:block;  
          background:  url(../images/home.gif) no-repeat top left; 
          width: 32px;    
          height: 27px;
    }
    
    a.home:hover  {
          background:  url(../images/home2.gif) no-repeat top left; 
         }
    Here are the images:

    Transparent Spacer (icon.gif)
    Home Icon
    Highlighted Home Icon

    You can see this rollover in action at http://www.ashleywalters.net/templat...sp/default.htm

    It's the home icon in the gray bar beneath the banner. My actual CSS had some spacing and floating to it, but I posted the bare basics here to get the job done. Just know you will have to tweak the image if it is set as display:block and you want it positioned somewhere specific.
    Last edited by lithriel; 07-26-2007 at 10:16 PM.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Have a look at this part of my website. Is this what you want, get back to us.

    http://www.exitfegs.co.uk/steve.html

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Here is the code.

    Frank

    Code:
    <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Enter_Title_Here</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <meta name="generator" content="BestAddress HTML Editor Professional" />
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .thumbnail{
    z-index: 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    
    
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 6px solid gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    font-family: arial, helvetica, sans-serif;     
    font-size: .8em;
    }
    
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span {
    	visibility: visible;
    	position: absolute;
    	/* left: 0px; */
    	left: 162px;
    	/* top: -396px; */
    	top: 134px;
    	background-color: white;
    }
    </style>
    
    </head>
    <body bgcolor="lightyellow">
    <a href="index.html"><img alt="Home page." src="home.jpg" width="42" height="32" /></a>
    
    <a class="thumbnail" href="#thumb"><img src="112a.jpg" width="66px" height="44px" border="0" /><span><img src="112.jpg" width="648px" height="486px" border="0"/><br />Mr Keogh and Steven at John's wedding.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="85a.jpg" width="66px" height="44px" border="0" /><span><img src="85.jpg" width="648px" height="486px" border="0"/><br />Steven relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2006.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="92a.jpg" width="66px" height="44px" border="0" /><span><img src="92.jpg" width="648px" height="486px" border="0"/><br />Steven during a day trip to Eastbourne - summer 2006.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="89a.jpg" width="66px" height="44px" border="0" /><span><img src="89.jpg" width="648px" height="486px" border="0"/><br />Steven, a few years ago. In the Peak District.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="69a.jpg" width="66px" height="44px" border="0" /><span><img src="69.jpg" width="648px" height="486px" border="0"/><br />Steven enjoying the great outdoors,</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="110a.jpg" width="66px" height="44px" border="0" /><span><img src="110.jpg" width="648px" height="486px" border="0"/><br />The one above sees all!</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="steve-01a.jpg" width="52px" height="66px" border="0" /><span><img src="steve-01.jpg" width="486px" height="648px" border="0"/><br />Steven as a lad.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="SteveandPhila.jpg" width="66px" height="44px" border="0" /><span><img src="SteveandPhil.jpg" width="648px" height="486px" border="0"/><br />Steven and Philip.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="steve-02.jpg" width="66px" height="44px" border="0" /><span><img src="steve-02.jpg" width="648px" height="486px" border="0"/><br />A young Steven.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="winhs13.jpg" width="66px" height="44px" border="0" /><span><img src="winhs13.jpg" width="648px" height="486px" border="0"/><br />A quiet read - a short break after visiting Winchester Cathedral.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="Bluebell1.jpg" width="66px" height="44px" border="0" /><span><img src="Bluebell1.jpg" width="648px" height="486px" border="0"/><br />Steven, relaxing in one of the old First-Class carriages. On the Bluebell Line.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="web17.jpg" width="66px" height="44px" border="0" /><span><img src="web17.jpg" width="648px" height="486px" border="0"/><br />Steven, Betty and Frank. Probably in the 1960's.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st7.jpg" width="66px" height="44px" border="0" /><span><img src="st7.jpg" width="648px" height="486px" border="0"/><br />On a day trip to Eastbourne - spring 2006.</span></a>
    
    
    
    <a class="thumbnail" href="#thumb"><img src="st2.jpg" width="66px" height="44px" border="0" /><span><img src="st2.jpg" width="648px" height="486px" border="0"/><br />Not sure where this was taken.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st9.jpg" width="66px" height="44px" border="0" /><span><img src="st9.jpg" width="648px" height="486px" border="0"/><br />Philip and Steven at John's wedding.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st14.jpg" width="66px" height="44px" border="0" /><span><img src="st14.jpg" width="648px" height="486px" border="0"/><br />Not sure where this was taken.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st16.jpg" width="66px" height="44px" border="0" /><span><img src="st16.jpg" width="648px" height="486px" border="0"/><br />Steven and Betty in Wales.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st17.jpg" width="66px" height="44px" border="0" /><span><img src="st17.jpg" width="648px" height="486px" border="0"/><br />Steven holidaying in Wales.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st18.jpg" width="66px" height="44px" border="0" /><span><img src="st18.jpg" width="648px" height="486px" border="0"/><br />Betty and Steven many years ago.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st22.jpg" width="66px" height="44px" border="0" /><span><img src="st22.jpg" width="648px" height="486px" border="0"/><br />Steven in Hove - 2007.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st25.jpg" width="66px" height="44px" border="0" /><span><img src="st25.jpg" width="648px" height="486px" border="0"/><br />Betty, Mum and Steven. On holiday in Wales.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st26.jpg" width="66px" height="44px" border="0" /><span><img src="st26.jpg" width="648px" height="486px" border="0"/><br />Hi!, We're over here. Betty and Steve on a family holiday.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st28.jpg" width="66px" height="44px" border="0" /><span><img src="st28.jpg" width="648px" height="486px" border="0"/><br />Steven outside the "Saxon Arms" in Dorchester - 2007.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st32.jpg" width="66px" height="44px" border="0" /><span><img src="st32.jpg" width="648px" height="486px" border="0"/><br />Steven (and Little Ted) relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2007.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="st39.jpg" width="66px" height="44px" border="0" /><span><img src="st39.jpg" width="648px" height="476px" border="0"/><br />Steven on holiday with friends.</span></a>
    
    </body>
    </html>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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