[thelist] Image with cynamic text rollover... back to 'basics'! ; -p

ben morrison morrison.ben at gmail.com
Wed Dec 10 04:25:55 CST 2008


On Wed, Dec 10, 2008 at 10:18 AM, Tris <beertastic at gmail.com> wrote:
> Hi all..
>
> I've been asked to add a rollover to a site.
> all good. but it's a little more complicated and i've not touched
> rollovers in a while..

I'm sure you asked about this last week?



You don't have to worry about IE 6 then? It Doesn't support PSEUDO
class on anything other than an anchor.

If you do, then you are going to require some JS - simple JS to add an
extra class on mouseover, unless you can be very clever with your CSS.
Also as on a previous thread it maybe easier to use a
background-color, or change the code so the opacity is not inherited.

   <style>

   .imagePlaceHolder {
    position: relative;
    width: 100px;
    height: 100px;
    display:block;
   }

   .imagePlaceHolder span {
       position: absolute;
       left:-999em;
   }
   .imagePlaceHolder:hover span, .ieExtraClass {
        left:0;
        bottom:0;
        display:block;
        width:100%;
        background-color: #F00;
        color:#fff;
        filter:alpha(opacity=50);
        opacity:.5;
   }

   </style>
   </head>
<body>

   </head>
   <body>

   <div id="rolloverPlaceHolder">
       <a class="imagePlaceHolder">
           <img
src="http://www.bbc.co.uk/home/features/d/content/images/2008/12/02/human_nuclear_button_afp_400x260.jpg"
width="100" height="100" style="background:#ccf" />
           <span>Over lay text</span>
       </a>
   </div>
</body>
-- 
Ben Morrison



More information about the thelist mailing list