Coding help for rollovers

Discussion in 'Personal and Professional Photography Websites' started by AdamZx3, Sep 12, 2007.

  1. AdamZx3

    AdamZx3 TPF Noob!

    Joined:
    Apr 13, 2007
    Messages:
    205
    Likes Received:
    0
    Location:
    NE Ohio
    Can others edit my Photos:
    Photos OK to edit
    I need to figure out how to code these rollovers and thumbnails so that the rollovers in the main picture are preloaded and it needs to pre-load the main images in the background like in the example link below . I don't know if i'll use this format for my photography part yet but I need it for my retouching portfolio, speed is essential so viewers dont turn away, so no flash. I was hoping to code in html or css, and maybey some javascript but would like to stay away from that if possible.

    Any help would be appreciated, my coding skills are basic and rusty :)

    Example link, (maybe NSFW, bikinni/ lingerie thumbnails): http://www.pureimage.info/gallery.htm

    Also heres a concept made in photoshop

    [​IMG]
     
  2. AdamZx3

    AdamZx3 TPF Noob!

    Joined:
    Apr 13, 2007
    Messages:
    205
    Likes Received:
    0
    Location:
    NE Ohio
    Can others edit my Photos:
    Photos OK to edit
    Also would I have to make this page in frames so that the picture would reload separately instead of re-loading the whole page. I have heard of ajax (xhtml and java) which is the same concept of frames I believe...but that sounds out my league unless theres a tut out there that I haven't found yet.
     
  3. Jeff Colburn

    Jeff Colburn TPF Noob!

    Joined:
    Aug 6, 2007
    Messages:
    300
    Likes Received:
    0
    Location:
    Sedona, AZ
    Can others edit my Photos:
    Photos NOT OK to edit
  4. AdamZx3

    AdamZx3 TPF Noob!

    Joined:
    Apr 13, 2007
    Messages:
    205
    Likes Received:
    0
    Location:
    NE Ohio
    Can others edit my Photos:
    Photos OK to edit
    thanks jeff I think that css component tut can help me switch the thumbnails from set 1 to set 2 etc.. or at least I think :)

    What would I search for to make the thumbnails stay put, as well as the rest of the page but load just the main pic, preferablly in css. I have searched css frames etc.. but I cant really find a setup like what I need.

    In the old days I would make a new page for each picture and link the thumb to it, but with 50-60 images the management and speed seem very iffy. :)

    Edit*

    Might have found something...going to try to re arrange the thumbnails and remove the opacity change this weekend, unless someone here knows it wont work
    http://www.tankedup-imaging.com/css_dev/opacity.html
     
  5. mr e

    mr e TPF Noob!

    Joined:
    Oct 21, 2006
    Messages:
    94
    Likes Received:
    0
    Can others edit my Photos:
    Photos OK to edit
    To preload images, you can do

    <div style="display: none;">
    <img src="./images/image1.jpg" alt="title" />
    <img src ...
    </div>

    and you can put this wherever on your page and with most browsers it will preload them for you

    Then to change the image without reloading the page, you'd want something like

    <head>
    <script type="text/javascript">
    <!--

    function swapImage(url)
    {
    var d = document.getElementByName('bigimage');

    d.src = url;
    }

    -->
    </script>
    </head>

    <body>

    <img src="beginningimage.jpg" id="bigimage" alt="beginning image" />

    <a href="#" onclick="swapImage('image1.jpg'); return false;"><img src="image1thumb.jpg" alt="image1" /></a>

    etc...
    </body>

    This is untested so if there are any problems I can try to work them out for you if you want
     
  6. AdamZx3

    AdamZx3 TPF Noob!

    Joined:
    Apr 13, 2007
    Messages:
    205
    Likes Received:
    0
    Location:
    NE Ohio
    Can others edit my Photos:
    Photos OK to edit
    Hey thanks Mr e!

    I had a quick question if its not too much to ask,

    for this line of code does it pertain to the thumbnail, so when thumbnail is clicked this runs and pops up image1.jpg?

    <a href="#" onclick="swapImage('image1.jpg'); return false;"><img src="image1thumb.jpg" alt="image1" /></a>

    and how do you position the images that will pop up, would the code have to be nested inside a table cell the same size as the image?

    thanks again, i'll have to play around with it tomorrow :)
     
  7. mr e

    mr e TPF Noob!

    Joined:
    Oct 21, 2006
    Messages:
    94
    Likes Received:
    0
    Can others edit my Photos:
    Photos OK to edit
    It doesn't pop it up, it'll load the image with the id "bigimage" with the new image

    You don't have to nest it inside anything, just position it wherever you want, and just have some image in there initially

    You might also try a very basic page so you can see what the Javascript does without anything else possibly screwing it up

    Let me know if you need anything else!
     
  8. ShaCow

    ShaCow TPF Noob!

    Joined:
    Sep 2, 2005
    Messages:
    878
    Likes Received:
    1
    Location:
    UK - England - Birmingham
    Can others edit my Photos:
    Photos OK to edit
    on my site I use the following code.

    put this in your head tag


    now this is what you use in your body tag for your images... just replace the image name with yours etc.

    works perfect on my site http://shacow.com and it preloads the images too.

    hope this helps, Shaun
     
  9. AdamZx3

    AdamZx3 TPF Noob!

    Joined:
    Apr 13, 2007
    Messages:
    205
    Likes Received:
    0
    Location:
    NE Ohio
    Can others edit my Photos:
    Photos OK to edit
    Thanks both of you for the code.

    I tried Mr e' s code and I couldnt get it working so I ended up finding this one this morning, though I think it will have some limitations on the rollover for the swapped images...will be playing with that tonight, will let you know.

    Anyway heres the code I have so far, will try the new stuff.
    http://web.mac.com/adamb/test/retouching.html
     
    Last edited: May 31, 2010
  10. mr e

    mr e TPF Noob!

    Joined:
    Oct 21, 2006
    Messages:
    94
    Likes Received:
    0
    Can others edit my Photos:
    Photos OK to edit
  11. AdamZx3

    AdamZx3 TPF Noob!

    Joined:
    Apr 13, 2007
    Messages:
    205
    Likes Received:
    0
    Location:
    NE Ohio
    Can others edit my Photos:
    Photos OK to edit
    Thanks Mr E, much appriciated!

    Wow i have been working for hours and am so frusterated :)

    Whats been frustrating me the most is getting main image to rollover, I have been playing with some code, but I dont know what i'm getting into

    Doesnt work however, just boxes with x's :/ Now I know why designers pay to have this stuff done!

     
    Last edited: May 31, 2010
  12. AdamZx3

    AdamZx3 TPF Noob!

    Joined:
    Apr 13, 2007
    Messages:
    205
    Likes Received:
    0
    Location:
    NE Ohio
    Can others edit my Photos:
    Photos OK to edit
    Oh forgot to add, if you guys feel like a challange and would want to use some images I have them here, basicly named like, a is the after, b s the before and rollover and c is the thumbnails (70x70). No prob if you can't, I dont expect any handouts :) i'm way over my head! (at least im brushing up my limited web skills lol)

     
    Last edited: May 31, 2010

Share This Page