Image Swap + Link

[ezkimo]

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

 

[CoreWeb]

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.

<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.

 

[ezkimo]

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.

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.

 

[fend0009]

Link + ImageSwapper

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.

<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.

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

 

[ezkimo]

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

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.