SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Los Angeles, CA
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    transparent image to hover over another image ???

    I posted this in CSS but I later realized that I probably need a bit of Javascript to make this work the way I would like.

    I have about 50 projects on my portfolio site and around 15 of them with use a lightbox script to show large detailed images of them. What I would like to do is if the image has a hyperlink around it inside a certain DIV tag I would like a transparent image to hover over it so people know they can click it for more images.

    Project that doesn't have a lightbox series:
    Code:
    <div id="projectImage"><img src="/path-01/image-01.jpg" width="470" height="295" alt="" /></div>

    Project that does have a lightbox series:

    Code:
    <div id="projectImage"><a href="/path-02/image-lg-01.jpg"rel="lightbox[groupname]"><img src="/path-02/image-01.jpg" width="470" height="295" alt="" /></a></div>
    CSS code to get the hover to work with text:
    Code:
    #projectImage a {  display:block; width:470px; height:295px }
    
    #projectImage a:hover { background: url(/images/image-details.gif) no-repeat 0 226px; }
    The best example of what I am trying to do is actually done in the lightbox script I am using. http://www.huddletogether.com/projects/lightbox2/

    The desired effect I am looking to do can be seen if you click on one of the images in the "image set" and hover over the popup to see the "next" image overlay the image. I would like to do this effect to the image inside the hyperlink for #projectImage that will show a visitor on hover that there are more images for that particular project.

    I have three AJAX books on the way from Amazon ... however I am looking to get this done sooner than next week when my books are due to arrive. Plus I am sure there will a large learning curve as well.

    Any help would be MOST appreciated.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This works for me, hopefully it's what you're after. Copy the code into a text editor, save it as .htm and open it. Hover over the box on the left and you'll see a camel appear. Your thumbnail would then be the background to the div.
    Code:
    <html>
    <head><style type="text/css">
    div.imageProject {background:#CCC; position:relative; left:100px; top:20px; border:1px solid #FF33DD; width:50%; height:50%;}
    div.imageProject a#h {position:absolute; right:0px; top:0px; width:100%; height:100%;}
    div.imageProject a#h:hover {background:url(http://img.photobucket.com/albums/v224/rrh02/Misc/camel.png) 80% 50% no-repeat;}
    </style></head>
    <body>
    <div class="imageProject" ><a id="h" href="#"></a></div>
    </body>
    </html>

  3. #3
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Los Angeles, CA
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles but its going to take more than that.

    This is why I am trying to get an different image to hover of the image inside #projectImage.

    http://www.addedsugar.com/addedsugar-design-01.jpg
    http://www.addedsugar.com/addedsugar-design-02.jpg

    As you can see I am designing completely different designs by changing the stylesheets. I don't want to hard code any images into the HTML that are design elements. In both of those screenshots there is only one image in the HTML and that is inside #projectImage. What I would like to do is when there is a hyperlink around the image in #projectImage that you get the hover states "click to see detail" shown in the screenshots above, which I was hoping to call as a background-image in each of the different stylesheets.

    Does this make sense to anyone and if so ... any idea on how to do it using javascript and the code I put in my first post?

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see. So you want it to be applied using JS to any image that happens to have an anchor surrounding it. Sorry, but my javascript skills are not that good.


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
  •