Image Swap + Link

Discussion in 'Web Design and Development' started by ezkimo, Jul 7, 2007.

  1. ezkimo macrumors regular

    Joined:
    Sep 12, 2002
    #1
    Hiya,
    So I have this website I'm doing for somebody that involves some javascipting, which I am the first to say is not something I'm good at.

    Here's the problem:
    I have 3 links that when clicked swap an image with another image. Then, each swapped image links to another page.

    Here's what I got:
    http://zacharynichols.com/test/swap.html

    As you call tell from messing around with it, its rather screwy. I need the links to change to a specific image, not just cycle through a list of three like they are doing.

    I probably need to just write or find a new script rather then attempting to fix this one, but any help would be appreciated.

    -Zach
     
  2. CoreWeb macrumors 6502

    Joined:
    Mar 2, 2007
    Location:
    Edge of reason
    #2
    Very interesting. It would be useful to know what you are going to use it for, because my first instinct would be to simplify it greatly. However, depending on how you need it to work, those simplifications may or may not work.

    The script works properly for me (or at least works how you coded it.)

    First, I notice you are preloading the images. From my understanding, it is not required to supply width and height to the "Image" constructor, so your newImage function could be simplified.

    Also, I would not use "onclick" to open the new page. It is better to make it a link and change the href.

    In addition, it is (in my opinion) good practice to put quotes around the keys in the key/value dictionaries.

    Your contact portion is not working because "contact.toggle()" is not a url, but a javascript command. If you instead make it "javascript:contact.toggle()" it will probably work a bit better. Providing, of course, you have a "contact" object with a "toggle" method.

    HTML:
    <script>
    function newImage(src){
        var img = new Image();
        img.src = src;
    }
    var pics = [
        { "img": newImage("images/video.jpg"), "href":"video.php" },
        { "img": newImage("images/analysis.jpg"), "href":"analysis.php" },
        { "img": newImage("images/phone.jpg"), "href":"javascript:contact.toggle();" }
    ];
    
    pics.position = 0;
    
    /*
    If you only had one image like this which needed swapping, etc., you should calculate imageElement and linkElement here:
    
    var linkElement = document.getElementById("link");
    var imageElement = document.getElementById("image");
    
    And then you would remove the extra lines and the argument "linkElement" from the function below.
    */
    
    function showImage (linkElement, imageIndex){
        if (imageIndex == "next") pics.position++;
        else if (imageIndex == "previous") pics.position--;
        else pics.position = imageIndex;
    
        if (pics.position < 0) pics.position = pics.length - 1;
        if (pics.position >= pics.length) pics.position = 0;
    
        if (typeof linkElement == 'string')
            linkElement = document.getElementById(linkElement);
        linkElement.href = pics[pics.position].href;    
    
        var imageElement = linkElement.getElementsByTagName("img")[0];
        imageElement.src = pics[pics.position].img.src;
        
    }
    </script>
    
    .
    .
    .
    <a href = "video.php">
    <img id = "image" src = "images/video.jpg" />
    </a>
    
    <br />
    <a onclick = "showImage('image', 0)">Video (1)</a><br />
    <a onclick = "showImage('image', 1)">Analysis (2)</a><br />
    <a onclick = "showImage('image', 2)">Phone (3)</a><br />
    
    Also, DO NOT copy and paste the above code as I'm sure I've made a few errors in it. I typed it up relatively quickly and somewhat carelessly.
     
  3. ezkimo thread starter macrumors regular

    Joined:
    Sep 12, 2002
    #3
    Thanks! I'll take a look at your suggestions. I forgot to mention that the "contact.toggle()" reference toggles hidden contact area that has some mootools stuff applied to it. As I said, I don't know javascript well, so I may come grovel for some help in the near future.
     
  4. fend0009 macrumors newbie

    Joined:
    Jul 23, 2007
    #4
    Link + ImageSwapper


    Hi:

    I am building a similar application but do not really know php. Could you advise what video.php entails? Or could you post or forward a sample code? Thank you much.

    fendos
     
  5. ezkimo thread starter macrumors regular

    Joined:
    Sep 12, 2002
    #5
    Video.php is just the link to another page. You can easily replace it with any page (index.html or whatever) as far as I know.
     

Share This Page