Results 1 to 3 of 3

Thread: How to add a mouseover effect to all thumbnail images in PHP Photo Album?

  1. #1
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to add a mouseover effect to all thumbnail images in PHP Photo Album?

    1) Script Title: PHP Photo Album Script V2

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...photoalbum.htm

    3) Describe problem:
    Add a Mouseover Effect to the thumbnail images in my photogallery?

    What I am trying to accomplish can be seen here Listed as Example 2. I have the css part all sorted out, but am wondering how and where to include the "onmouseover" function?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You don't need JavaScript to accomplish the opacity mouseover effect actually, just use CSS, specifically, the :hover pseudo class. Inside ddphpalbum.css, try adding the code in red to the existing code block below:

    Code:
    .photodiv img{ /*CSS for each image tag*/
    border: 0;
    width: 200px;
    height: 106px;
    cursor: hand;
    cursor: pointer;
    -moz-opacity:0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
    opacity:0.5;
    }
    
    .photodiv img:hover{
    -moz-opacity:1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=1)";
    opacity:1;
    }
    where a value of 0.5 means the thumbnail images are initially 50% transparent before the mouse rolls over them.
    DD Admin

  3. #3
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you! Works like a charm

Bookmarks

Posting Permissions

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