Como podemos ajudar?

FC 15059 :: Como exibir outra imagem ao passar o mouse no produto?

É possível mostrar outro ângulo ou algum detalhe do produto apenas passando o mouse sobre sua imagem.

Veja os passos para implantar este recurso, conhecido como hover de imagem:

PRÉ-REQUISITO: As imagens dos produtos da loja precisam estar corretamente cadastradas. Clique aqui para mais detalhes.

1º Passo

Copie o código abaixo e cole ao final do arquivo LojaLib.js, que fica na pasta HTM:

function changeImages(sImagemProdPri,sImagemProdDet,sDescUrl,sIdProduto,sNomeProd) {
var replaceNomeProd = sNomeProd.replace(/-/g,' ');
var tagImgPri = sImagemProdPri;
var sIdCampo = "DivImagemProdDouble" + sIdProduto;
if (tagImgPri == "") {
document.getElementById(sIdCampo).innerHTML = "<img height='200px' src='/images/nd0.gif'>";
} else {
var tagImgDet = sImagemProdDet;
var sLenghtImg = tagImgDet;
var nLenghtImg = sLenghtImg.search(",");
if (nLenghtImg < 0) {
document.getElementById(sIdCampo).innerHTML = "<a href=" + sDescUrl + "><img src='" + sImagemProdPri + "' alt=\""+ replaceNomeProd +"\"></a>";
} else {
var valImgDet = null;
if (tagImgDet != null) {
valImgDet = tagImgDet.split(",");
}
var imgDet0 = valImgDet[0];
var imgDet1 = valImgDet[1];
if ((imgDet0.indexOf('#') >= 0 && imgDet0.indexOf('/') >= 0) || (imgDet1.indexOf('#') >= 0 && imgDet1.indexOf('/') >= 0)) {
imgDet0 = valImgDet[0].replace('#', "/lojas/");
imgDet1 = valImgDet[1].replace('#', "/lojas/");
} else if (imgDet0.indexOf('#') >= 0 || imgDet1.indexOf('#') >= 0) {
imgDet0 = valImgDet[0].replace('#', FC$.PathPrdExt);
imgDet1 = valImgDet[1].replace('#', FC$.PathPrdExt);
} else {
imgDet1 = FC$.PathPrd + valImgDet[1];
}
if (imgDet0 == null) {
document.getElementById(sIdCampo).innerHTML = "<a href=" + sDescUrl + "><img height='159' src='" + sImagemProdPri + "' alt=\""+ replaceNomeProd +"\"></a>";
} else {
document.getElementById(sIdCampo).innerHTML = "<a href=" + sDescUrl + "><img height='159' src='" + imgDet0 + "'' border='0'' onmouseover=\"this.src='" + imgDet1 + "'\" onmouseout=\"this.src='" + imgDet0 + "'\" alt=\""+ replaceNomeProd +"\"></a>";
}
}
}
}

2º Passo

Segue o código que deverá substituir o trecho referente à apresentação da imagem na página principal e na lista de produtos:

<div id="DivImagemProdDouble<IDProduto>">
<script>changeImages("<ImagemProdPri>","<ImagemProdDet>","<URLProd>","<IDProduto>","<NomeProdUA>")</script>
</div>

O arquivo responsável pela exibição na página principal da loja é o EstiloProdutoOut.htm e na listagem de produtos é o EstiloProduto.htm.