Div superposé / masque et lien

Bien le bonjour à tous en cette matinée pluvieuse ...

J'ai une page de listing de produit qui comporte plusieurs éléments :

1 image,
1 titre,
1 descriptif

Tout ceci avec une présentation spéciale.

L'image de mon produit est dans un cercle et, comme le client ne maitrise pas de logiciel de retouche, j'ai fonctionné de la manière suivante :

1 div avec mon image (rectangulaire)
1 div placé au dessus avec un png transparent qui forme un cercle (ca me permet de donner l'impression d'une photo produit arrondi).
Niveau code ca donne :

<div class="fiche">
                    <img class="img_prod" src="img/sample_prod.jpg"  alt="" />
                    <img class="masque" src="img/masque_produit.gif" alt="" /> 
                        <div class="nom_fiche"><h3>Nom du produit</h3>
                        <h4>Descriptif </h4>
                        Descriptif du produit vestibulum lacinia orci in turpis fermentum no 
                        <br />
                        Descriptif<br />
                        Descriptif<br />
                        <img src="img/logo.jpg" alt="" class="marque"/>
                  </div>

Et le css :

.fiche{
	float:left;
	width:385px;
	height:auto;
	margin:40px 40px 0 40px;
}

.img_prod{
	position:absolute;
}

.masque{
	width:169px;
	height:169px;
	position:absolute;
}

.nom_fiche{
	background:url(../img/fiche_bg_prod.jpg) no-repeat;
	padding:6px 0 0 10px;
	margin:35px 0 0 169px;
}

.marque{
	position:relative;
	margin:10px 0 0 0;
}

Donc au niveau de la présentation, tout fonctionne : mon masque "rond" vient bien cacher mon image "produit". Sauf que je dois faire une lightbox (ou autre) sur le produit. Du coup, je voulais placer mon <a href=""></a> autour de l'image de mon produit (logique). Sauf que comme j'ai mon image de masque par au dessus, mon lien n'est pas détecté.

Je pourrais faire le lien sur le masque mais je trouve ca bien moins pratique (surtout que derrière, au niveau de l'admin, on associe petite photo et zoom produit).

Quelles solutions existent ?

Salut !

Tu pourrais peut être ne faire qu'une seule balise.
Je m'explique : une balise avec en background-image ton produit et dedans une img de ton masque et placer le href sur la balise. Un truc du genre :

<a href="lien.html" style="background-image:url('produit.png')"><img src="masque.png" /></a>

Et au survol tu joues sur le bg-image donc ton produit.
Mais je suis pas certain du fonctionnement du survol (est-ce que le hover du <a> prendra en compte l'image ou pas...) je te laisse l'honneur !


ps : à Montpellier c'est grand ciel bleu et soleil !
Modifié par _laurent (15 Dec 2011 - 11:03)

Merci de ta réponse,
effectivement, ca fonctionne enfin, j'ai du modifier un truc mais je l'ia plus en tête exactement

sauf qu'en fait, au final, le résultat revient au même que ma solution, à savoir créer le lien "Zoom" sur le masque et pas sur la petite photo du produit.

Bon, je sais bien que l'utilisateur s'en rend pas compte mais moi ca me genait, j'aime les choses propres

Donc comme je trouve pas ca tres "logique" d'appeler l'image produit dans un style en background, bah je vais conserver la 1ere méthode, à moins que quelqu'un ait une autre solution

Je comprends bien, moi ça ne me pose pas de soucis

Si le lien est au survol du masque, l'effet hover ne pourra porter que sur ton masque, pas sur la photo de ton produit. Tout dépend de l'effet que tu veux réaliser..

D’ailleurs, comment vas-tu t'y prendre pour faire un effet de hover sur ton image ? Il est plus facile d'influer sur un background-position que de remplacer l'image de la balise <img />

Bonne soirée
Modifié par _laurent (15 Dec 2011 - 18:48)

en fait, je crois qu'on s'est mal compris

mon lien sur le produit ne fait qu'ouvrir une lightbox ^^ j'ai pas d'effet hover sur l'image.

C'était juste que le lien de cette lightbox, je le place sur le masque (car div au dessus) plutot que sur le visuel du produit en lui meme ^^

Mais je reste avec cette méthode, on va dire Résolu ^^

lightbox != highlight

mea culpa je vais dormir >_<