JavaScript Image Swapping

Question

So this is a pretty straightforward problem i am encountering. I am trying to set up a web page for one of my school assignments. It is an online order form with images of what we are selling. I'm selling t-shirts and I start by displaying a thumbnail of the design on the shirt. I would like to have the capacity to have people click on the thumbnail, and have the image swap to the full image of the shirt. I have put both of the files in the same directory as the index.html as well as java and php files. most of my HTML is generated using javascript and i just cant figure out why it wont work. Showcase is the name of my div i wanted to display the pictures in.

The code to generate the img div holding my thumbnail:

Showcase.innerHTML += '< img src="GorgeThumb.jpg" alt="image not found" id="MiniGorge" onclick = "ImgSwap()">'

And the thumbnail shows up fine. However when i try to switch them it doesnt work. This is my function::

function ImgSwap()
var MetalMini = (document.getElementById("MiniGorge"))
if (MetalMini.src === "GorgeThumb.jpg")
{
    document.getElementById("MiniGorge").src = "Metallica-Gorge.jpg";
}
else if (MetalMini.src === "Metallica-Gorge.jpg")
{
    document.getElementById("MiniGorge").src = "GorgeThumb.jpg";
}

Im sure someone out there will scoff at how simple this solution is but if anyone can help with this im happy to take the shaming! :D.

I tried the Answers below and couldn't get them to work. Just an update: If i use this:

enter code here

function ImgSwap()
{
var MetalMini = document.getElementById("MiniGorge");
if (MetalMini.src = "GorgeThumb.jpg")
{
    MetalMini.src = "Metallica-Gorge.jpg";
}
}

It seems to work fine. It switches to the large image. However if i use

function ImgSwap()
{
var MetalMini = document.getElementById("MiniGorge");
if (MetalMini.src = "GorgeThumb.jpg")
{
    MetalMini.src = "Metallica-Gorge.jpg";
}
if (MetalMini.src = "Metallica-Gorge.jpg")
{
    MetalMini.src = "GorgeThumb.jpg";
}
}

all of it fails and there are no image swaps at all.

Figrued it out!

So i just made way too much code but figured it out. I just call 2 separate methods onmouseover and onmouseout. Thank you all for your help though!

Solution:

Showcase.innerHTML += '<img src="GorgeThumb.jpg" id="MiniGorge" onmouseover="ImgSwapGorge()" onmouseout="ImgRevGorge()">';


function ImgSwapGorge()
{
var MetalMini = document.getElementById("MiniGorge");
if (MetalMini.src = "GorgeThumb.jpg")
{
    MetalMini.src = "Metallica-Gorge.jpg";
    MetalMini.id = "MegaGorge";
}
else
{
    MetalMini.src = "GorgeThumb.jpg";
}
}

function ImgRevGorge()
{
var MetalMini = document.getElementById("MegaGorge");
MetalMini.src = "GorgeThumb.jpg";
MetalMini.id = "MiniGorge";
}

So hopefully if someone out there is looking for a (inefficient) but working code to switch images here it is!

Are you using jQuery? I ask because you've included the tag in your question, yet all of your syntax is plain longhand JavaScript. — isherwood, Mar 28 '14 at 13:54
im sorry that was a mistake, i believe i have it enabled in my code just not actually using it. — Jimmz, Mar 28 '14 at 13:56
Have a look at this, maybe it will help you out: http://stackoverflow.com/a/20456183/3296133 — DeeKayy90, Mar 28 '14 at 13:56
What's `MetalMini`? BTW, there is not a single line jQuery specific code... — DrColossos, Mar 28 '14 at 13:58
s**t that was the first part of the code in the function. beneath function imgSwap() and above if(MetalMini.src === "GorgeThumb.jpg I declared a variable of the div. var MetalMini = (document.getElementById("MiniGorge") — Jimmz, Mar 28 '14 at 14:00

score 0 · Answer 1 · answered Mar 28 '14 at 14:17

Your issue might be of rendering of code. you can try using jQuery also see below code.

$('#MiniGorge').on('click', function(){
    var name = $(this).attr('src');
    if(name == "GorgeThumb.jpg"){
        $(this).attr('src', "Metallica-Gorge.jpg");
    } else {
        $(this).attr('src', 'GorgeThumb.jpg');
    }
});

JavaScript Image Swapping

1 Answers1