SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Image Gallery

    Hi,

    I have an image gallery (thumbnails and large image) created using css and so far it works as I want it to BUT I would like to be able to change the thumbnail images according to a logo link clicked at the top.

    You can view the gallery here:

    www{.}pixelmunky{.}couk{/}testing{/}gbc{/}gallery{.}html

    You'll see that the 4 images displayed are for AGA but I want to be able to change theses images to display Falcon, Rangemaster and Rayburn accordingly by clicking the logos.

    All the images are there and hidden in their own divs but I'm not sure how to get them to display when a link is clicked.

    My css is:

    Code:
    /*Credits: Dynamic Drive CSS Library */
    
    #gallery {
    position: relative;
    	top: 0px;
    	left: -1px;
    }
    
    #links {
    padding: 0 0 10px 5px;	
    }
    
    #aga {
    visibility: visible;
    }
    
    #falcon {
    visibility: hidden;
    }
    
    #rangemaster {
    visibility: hidden;
    }
    
    #rayburn {
    visibility: hidden;
    }
    
    .thumbnail {
    border: 1px solid #808080;
    margin: 2px;
    padding: 2px;
    }
    
    span { 
    position: absolute;
    background-color: #ccc;
    padding: 20px;
    left: -1000px;
    visibility: hidden;
    color: #666;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    text-decoration: none;
    width: 500px;
    }
    
    span img { 
    border: 1px solid #fff;
    }
    
    a:hover span { 
    visibility: visible;
    top: 47px;
    left: 350px;
    z-index: 50;
    is anyone able to help?

    Thanks.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    In your HTML do some restructuring. Move links inside (right before you declare the images (the small ones)) and you shouldn't have to change your CSS to be the same as the original thumbnail.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •