Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: change image on click of the image

  1. #1
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default change image on click of the image

    I'm looking for some kind of script that will allow me to swap/change a series of images by clicking in it. I've found plenty of "Galleries" that allow you do do this via a timer or by some form of link below the image but that's not going to work. I need to click directly on the image to make it switch to the next one.

    Any ideas? Please? I'm going crazy.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In its most basic form:

    Code:
    <img src="some.gif" onclick="this.src='someother.gif';">
    Without knowing more of the specifics, about all I can add is that it would generally be a good idea to preload the 'someother.gif'. But how best to do that, and when and if it is actually desirable or necessary can vary.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    How would you do it with say 10 images?

    And thank you by the way.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You're welcome. But you are still not giving us much to go on. If you want to do it with 10 images, you could just do it with 10 images. What's this for?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm putting together a pageant page. There will be a winner (10 images) and a runner up (10 images). The client would like for it to look like there's an image for each person until you click on that girl's image. It would then advance to the next image in the series every time you clicked the current one.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Could you be more specific, like 'story board' it? Explain what happens to which images and when. And/or:

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 07-01-2008 at 06:41 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    No problem. You open the page and there are 2 images displayed in 2 different tables. I want to be able to click on one of the images and have it replace itself with another 5, 10, 15 images (same size, location, different images etc.)

    Start with image 1 displayed. Click on that image, image 2 replaces image 1. Click on image 2, image 3 replaces image 2 etc.

    I would like the second image to do the same, separately.

    I can do it in flash in 5 minutes but I would rather do it directly in HTML via a script.

    As you can tell I'm not the most knowledgeable person.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You can put the image tags in tables or wherever you like in your markup. Here is a commented script demo that will show you how to do the rest:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    
    var pic_sets = {
    
    preload:true, // set to true or false
    
    // first image in each set should be the corresponding image tag's actual src image.
    // each set may have as many images as you like, other sets may be added.
    
    pic_set_1:['some.gif', 'another.gif', 'bob.gif'],
    pic_set_2:['mary.gif', 'sid.gif', 'susie.gif', 'alice.gif'],
    
    ///////////////// Stop Editing /////////////////
    
    change:function(el){
    var a=pic_sets[el.id];
    for (var re, pnum = 0, i = a.length - 1; i > -1; --i){
    re = new RegExp(a[i]);
    if(re.test(el.src))
    pnum = i;
    }
    pnum = pnum < a.length - 1? pnum + 1 : 0;
    el.src = a[pnum];
    }
    };
    
    (function(){
    if (!pic_sets.preload)
    return;
    var im = [];
    for (var p in pic_sets)
    if(/pic_set/.test(p))
    for (var i = pic_sets[p].length - 1; i > 0; --i){
    im[im.length] = new Image();
    im[im.length - 1].src = pic_sets[p][i];
    }
    })();
    
    </script>
    
    </head>
    <body>
    <img id="pic_set_1" src="some.gif" onclick="pic_sets.change(this);">
    
    <img id="pic_set_2" src="mary.gif" onclick="pic_sets.change(this);">
    
    </body>
    </html>
    Questions? Just ask.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    techietim (07-02-2008)

  10. #9
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    You are the man!

    Where can I send a donation? LOL.

  11. #10
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Bummer. I've placed the script in my page but it only works locally.

    Here's the site:

    http://www.missmissionbeachsandiego.org/working

    It works fine on my machine but not on my host. Any idea why this would happen?

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
  •