Comment supprimer 1ère image en .png lors du rollover

[AGENCE NEOH]

Bonjour,

 

Les produits de notre boutique sont tous en png transparent.

 

Le problème : lors du rollover, la seconde image apparaît par dessus la première.

 

Comment faire pour que cette première image disparaisse lors du rollover ?

 

Merci d'avance pour votre aide.

 

Bruno

agence NEOH

[Ariane Web et Plus]

Bonjour,

 

Vous utiliser un thème alors cela va être difficile de vous répondre, je suppose que c'est le thème qui dysfonctionne, il faudrait contacter le développeur du thème pour qu'il vous aide.

Vous pouvez aussi laisser l'adresse de votre site pour qu'on regarde.

 

Bonne journée

[AGENCE NEOH]

Bonjour Ariane Web et Plus et merci pour votre réponse.

 

Le thème ne dysfonctionne pas, c'est nous qui le "triturons" pour obtenir ce que l'on veut, en l'occurrence du png transparent en lieu et place des jpeg.

 

Avec le jpeg, le fait que l'image du rollover passe par dessus l'image d'origine ne pose pas de souci puisqu'elle la cache mais dans notre cas il s'agirait de rajouter une fonction javascript qui la fasse disparaître lors du rollover.

 

Si quelqu'un a déjà procédé à une telle modification je suis preneur, sachant que le site est pour l'instant en mode maintenance, donc impossible de montrer la maquette en ligne.

 

Merci pour votre aide et bonne journée à vous aussi.

[Eolia]

Apparemment votre thème (ou un module) passe l'image en background ce qui explique qu'on voit les 2.

Avec le js il faudrait plutot passer par un toggle (display:block/display:none)

[touslesitesauto]

Je n'ai jamais essayé mais en jouant avec le z-index en hover...

[Eolia]

Je n'ai jamais essayé mais en jouant avec le z-index en hover...

Euh...Oui, mais une image transparente, même si elle est au-dessus (ce qui est déjà le cas) restera transparente^^

[touslesitesauto]

Oui c'est vrai, j'avais omis cet aspect dans la question

 

Il ne reste donc plus que la solution du display !

[AGENCE NEOH]

Merci pour votre réponse, mais nous avons déjà tenté la fonction toggle et le résultat n'est pas satisfaisant (les images "clignotent", sûrement car elles sont gérées par la même classe).

 

Je ne pense pas qu'une des images soit en background, elles sont bien toutes les deux gérées par des balises <img>.

 

Nous avons tenté plusieurs solutions javascript (hover, toggle, css avec display none), mais rien ne semble y faire.

Peut être ciblons-nous la mauvaise balise (chose qui me parait peu probable mais ne mettons de côté aucune possibilité) ?

La structure du produit est comme telle :

 

 

il n'y a pas de mention de :hover dans la css, ni de Javascript ou jquery selon la console.

Un effet CSS3 de transition est appliqué à "deuxieme_image".

Voici quelques uns des scripts tentés :

 

 

Aucun ne fonctionne.

 

Si vous avez d'autres pistes, nous sommes à votre écoute et vous remercions tous et chacun pour le temps que vous voudrez bien nous consacrer.

[Eolia]

Ok ajoutez un background en css à ces images de la même couleur que le fond de la zone (utilisez leurs classes)

[AGENCE NEOH]

Merci pour ce conseil Eolia mais c'est impossible pour nous : le fond n'est pas uni, il s'agit d'une texture de type tissu en fullscreen et c'est exactement pour cette raison que nous utilisons du png transparent...

[Eolia]

une url où on peut voir pour tester ?

[AGENCE NEOH]

Malheureusement non, comme je l'expliquais plus haut, le site est en mode maintenance car nous sommes encore en production. La mise en ligne est prévue la semaine prochaine, elle se fera sans rollover si nous ne trouvons pas la solution d'ici là...

 

Merci à tous pour vos suggestions en tout cas

[Eolia]

il ne reste que la solution des display none/block en js

Difficile de vous aider plus

 

Pour un site j'avais fait ça en ajoutant au controller

		if($products)
			foreach($products as $key => $product) {

				$products[$key]['id_image2'] = Db::getInstance()->getValue("
																SELECT id_image 
																FROM `"._DB_PREFIX_."image` 
																WHERE `id_product` = '".$product['id_product']."' 
																AND cover != 1");
			}

Dans le product-list.tpl

		<div class="toggle_img">
		<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link " title="{$product.name|escape:'htmlall':'UTF-8'}">
        	<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}"  class="main-img"/>
			{if $product.id_image2}
			   <img src="{$link->getImageLink($product.link_rewrite, $product.id_product|cat:"-"|cat:$product.id_image2, 'home_default')}" alt="{$product.name|escape:html:'UTF-8'}" style="display:none;"  class="next-img" />
			{/if} 			
        </a>
		</div> 

Et un toogle dans le js

	$('.toggle_img').on({
		mouseenter: function(){ // mouse enter
			if($(this).find('.next-img').length) {
				$(this).find('.next-img, .info_box').fadeIn(1000);
				$(this).find('.main-img').animate({ opacity: 0.1}, 400 );
			}
		}, 
		mouseleave: function(){ // mouse leave
			if($(this).find('.next-img').length) {
				$(this).find('.next-img, .info_box').fadeOut(100);
				$(this).find('.main-img').animate({ opacity: 1}, 100 );
			}
		}
	});	

Visible ici: http://devcustom.net/test/index.php

Edited November 23, 2016 by Eolia (see edit history)

[AGENCE NEOH]

Merci Eolia pour ces pistes très intéressantes... Nous avons tenté le coup mais malheureusement cela n'a pas fonctionné.

Je propose de vous soumettre le lien lorsque le nouveau site sera en ligne (sans seconde image pour les produits, du coup), car cela vous permettra de voir les choses plus clairement et peut-être de nous aiguiller vers une solution qui fonctionnera

 

En tout cas, un grand merci à tous ceux qui se donnent la peine de suivre ce sujet et de s'impliquer à nos côtés, cela fait vraiment plaisir.