code for fade in/fade out image transparency mouseover?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Torie Photgraph
    New Member
    • Oct 2010
    • 1
    #1

    code for fade in/fade out image transparency mouseover?

    I am wondering if there is a css [or other type of] code that would enable a fade in/fade out image mouseover transparency?
    picture this:
    image is slightly transparent,
    mouseover: *FADE INTO* image
    mouseout: *FADE OUT* of image
    back to slightly transparent.

    this is what I have, it include the transparency of image, the mouseover/mouseout, the only thing missing [and need help with] is the FADE IN/FADE OUT, in other words SLOW DOWN/ADD A TIME SEGMENT TO WHICH THE TRANSPARENCY MOUSEOVER/MOUSEOUT OCCURS?:
    after that, how do I embed a link to the image? [sorry, I'm a newbie]

    <html>
    <head>
    <style type="text/css">
    img
    {
    opacity:0.9;
    filter:alpha(op acity=10);
    }
    </style>
    </head>
    <body>

    <img src="http://farm5.static.fl ickr.com/4100/4814101144_07ce 8f4e8e_b.jpg" width="150" height="350" alt="the fall"
    onmouseover="th is.style.opacit y=1;this.filter s.alpha.opacity =100"
    onmouseout="thi s.style.opacity =0.9;this.filte rs.alpha.opacit y=10" />

    </body>
    </html>
    Tags: fade in, fade out, image, mouseover, transparency
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      I'm sure the timing can be done in JavaScript. As for embedding the image, you could make the image a link or position a link over the image.


      Thanks, Death

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          Filters are not standard in HTML or CSS. You should not use them. What you are trying to accomplish is only available using JavaScript.

            Comment

            • oranoos3000
              New Member
              • Jan 2009
              • 107
              #4
              hi
              my friend
              you can use jquery and do this work easily
              only work this is that add jquery.js at the above your code in head section of your page
              Code:
              <head>
<script type="text/javascript" src="jquery.js"></script>
</head>
              jquery.js is a libarary for javascript that you can download from www.jquery.com site

              and inside another jquery script you can write
              Code:
              $(document).ready(function(
$('img[alt=the fall]').mouseover(function(){
$(this).fadeTo(1,200);
})

$('img[alt=the fall]').mouseout(function(){
$(this).fadeTo(0.1, 200);
})
));
              for more information about jquery please visite www.jquery.com

              inside your code
              i think some of thing is wrong
              img
              {
              opacity:0.9;
              filter:alpha(op acity=90);
              }

              inside img tag alpha is typed al pha and is a space between al and pha ,

              be successful

                Comment

                Previous template Next
                Working...