JavaScript图像交换

所以这是我遇到的一个非常简单的问题。我正在尝试为我的一个学校作业设置一个网页。这是一个在线订单，包含我们销售的图片。我卖T恤衫，我首先在衬衫上展示设计的缩略图。我希望能够让人们点击缩略图，并将图像交换到衬衫的完整图像。我已将这两个文件放在与index.html以及java和php文件相同的目录中。我的大多数HTML是使用JavaScript生成的，我只是不知道为什么它不会工作。橱窗是我的div我想在显示图片的名称JavaScript图像交换

的代码来生成IMG的div抱着我的缩略图。

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

和缩略图显示了罚款。但是，当我尝试切换它们不起作用。这是我的功能::

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"; 
}

我肯定有人能在这个解决方案是多么简单嗤之以鼻，但如果任何人都可以使用该即时通讯帮助乐于接受的羞辱！：d。

我尝试了下面的答案，无法让他们工作。只是一个更新：如果我使用这个：

enter code here 

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

它似乎工作正常。它切换到大图像。然而，如果我使用

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"; 
} 
}

所有它失败，根本没有图像交换。

figrued out！

所以我只是让方式太多的代码，但想通了。我只是调用两个独立的方法onmouseover和onmouseout。尽管谢谢大家的帮助！

解决方案：

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"; 
}

所以希望如果有人在那里正在寻找一个（低效率），但工作代码，切换图像这里是！

来源

2014-03-28 Jimmz

你在使用jQuery吗？我问，因为你已经在你的问题中包含了标签，但你的所有语法都是普通的longhand JavaScript。 – isherwood

即时通讯对不起，这是一个错误，我相信我已经在我的代码启用它只是没有实际使用它。 – Jimmz

看看这个，也许它会帮助你：http：// stackoverflow.com/a/20456183/3296133 – DeeKayy90

您的问题可能是渲染代码。你可以尝试使用jQuery也看下面的代码。

$('#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'); 
    } 
});

来源

2014-03-28 14:17:13 kag

JavaScript图像交换

回答

相关问题