Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Image HELP!

  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Image HELP!

    Good Morning:
    I have a series of pictures (thumbnails) lined up in rows on the screen. What I would like to happed is that when the user clicks on an image it enlarges to a much larger picture, then when clicked again it returnes to a thumbnail size.
    Can anyone provide me with coding for the above or possibly stear me in the right direction.
    Thanks very much in advance.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Google for lightbox,fancybox, thickbox, thinbox etc
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks very much for your reply. I have googled what you advised and found very long complicated codes. I am looking for a simple code that allows the user to click on a small picture to make it larger then another click returns it to the small size. Must I use flash or like to accomplish this. Is there a straight html/css that will get it done?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Something quick a dirty without and js or flash would be to insert the larger images and style them with 0 width and height. Then use pseudo code hover and set width and height for the image. When the user hovers over that image, the hover css causes the image to appear. Not the most elaborate way to do it though.
    Teed

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Teed as always you come to my rescue. If your ever in the Miami Beach area let me know. I own a hotel and it would be my pleasure to host you for a night or two.
    Anyhow, I am assuming the css would look something like-

    img {
    height:0px;
    width:0px;}

    .hover{
    height:100px;
    width:100px;}


    <img src=class hover "C:\Documents and Settings\Administrator\Desktop\ee.bmp" width="263" height="62" border="0" align="left">

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Been to Miami once, but only drove through...lol Might look you up someday! haha

    Something like this:

    html:

    Code:
    <div id="links">Some text here.<a href="images/imagevisamccode.jpg" target="_blank">last three numbers from the back of your card<img src="images/imagevisamccode.jpg"  /></a>Some more text here......</div>
    css

    Code:
    #links a img {
                height: 0; width: 0; border-width: 0;
    }
    
    #links a:hover img {
                position: absolute;
                top: 950px; 
                left: 350px; 
                height: 200px; 
                width: 300px;
    }
    Teed

  • #7
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks Teed:
    I tried it but the text that reads "enter the last 4 digits of your card #" apparently is linked when I click on it it brings up another page with my photo. When I am done viewing it I just x out of the page. In the project I am working on I have 10 thunbnail photes lines up in rown. I would like when the user clicks on an image (not mouseover) it enlarges then when clicked again it returns to its smaller size.

    <head>
    <style type="text/css">


    #links a img {
    height: 0; width: 0; border-width: 0;
    }

    #links a:hover img {
    position: absolute;
    top:950px;
    left:350px;
    height:200px;
    width:300px;
    }

    </style>

    <div id="links">Some text here.<a href="C:\Documents and settings\Administrator\Desktop\beach.jpg" target="_blank">last three

    numbers from the back of your card<img src="C:\Documents and Settings\Administrator\Desktop\beach.jpg" /></a>Some more text

    here......</div> tried it (see below) but the text that says "

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    That was some code right off a site I did a while back. For someone to hover over some text and then the image pops up and shows the security code for different credit cards.

    I just gave you that as a basis for what you could do for eacg image you have. Basically you would insert the larger version of each image, and style it as a "hidden" div.

    Do you have this site live so I can look at how its laid out?
    Teed

  • #9
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Your the best. Im at work but when I get home I will get it to you!


  •  

    Posting Permissions

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