Masque (image) et focus 'dessous'

Bonjour,

Je viens de tenter un truc de mise en forme :
un lien, contenant une image vignette (pointant vers sa grande version pour une lightbox -ici Fancybox )

L'img vignette est bien évidement un parallélogramme et je la masque avec un png troué. (div.cache-snap position en absolu dans div.image qui est relative)

On voit donc une image ronde.
Seulement au survol de la chose ce n'est la <a> qui a le focus et donc on ne peut pas déclencher Fancybox (ce serait pareil avec n'importe quel script a priori).
le code est:

<div class="image">
<div class="cache-snap"></div>
   <a title="xxx " href="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=1114&amp;h=985&amp;f=png&amp;src=%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2%2F27.png" class="big-image">
  
<img alt="xxxx" src="/assets/components/gallery/connector.php?action=web/phpthumb&amp;w=220&amp;h=220&amp;zc=0&amp;far=TL&amp;sx=0&amp;sy=0&amp;q=100&amp;src=/assets/components/gallery/files/2/27.png" class="">

</a>

</div>

Unc contournement possible ?

Merci

Bonjour,

si j'ai bien suivi, c'est donc ta div.cache-snap qui prend le focus ? Tu peux essayer de lui appliquer un pointer-events:none en css.

Au niveau des compatibilités :
Voila ce que ça donne

Donc pour IE, l'astuce réside la-dedans :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background:none !important;

Voila un peu de doc :
par Chris Coyier
par Robert Nyman << Il a même mis une démo

Voila ! J'espère t'avoir aidé, bon courage !

cool. Merci

je n'y penses pas assez à cette propriété

sauf que ie...? Y'a pas mieux?

Pour le moment non... Robert Nyman propose un tout petit script si tu regardes dans ses sources, qui est peut-être plus indiqué que le filtre, quoique...

Personnellement je préfère le filtre, question d'accessibilité. IE a beau être à la traîne, il existe souvent des solutions "propres" à Microsoft.

Il existe peut-être d'autres solutions, mais je ne les connais pas !

Hello.

Pourquoi ne pas positionner ton cache dans lien?

<a href="">
    <img src="">
    <span class="cache-snap">
</a>

Avec ton lien en relatif et .cache-snap en absolu. Voir mieux, ne pas mettre de span et générer ton masque via :before/:after.

Avec :before / :after il est possible que le problème reste le même, par contre l'idée d'intégrer le cache au lien me semble excellente et bien plus accessible.

le cache en span, dans le lien.

y'a des fois où la solution est tellement évidente...que je la vois pas...grrr.

Merci c'était la seule chose à faire (bon ca aura permis de réviser pointer-event aussi )

Before: et after:..pas fan. je préfère avoir un dom complet pour le js. (je ne sais pas mais je pense à qq pb d'éléments pas présents quand il faut..one ne sait jamais)

et , oui je fais beaucoup de jQuery, mais là, en l’occurrence, ça n'a rien à voir (Fancybox basé sur jQ n'avait pas de rapport avec mon souci de focus).

Merci à tous

Ten a écrit :
Avec :before / :after il est possible que le problème reste le même, par contre l'idée d'intégrer le cache au lien me semble excellente et bien plus accessible.

Non, le problème ne restera pas le même vu qu'un pseudo-élément a::before ou a::after aura le lien comme parent.

La solution du SPAN marche aussi, mais demande de rajouter un élément dans le code HTML juste pour la décoration. On n'utilisera cette solution que si on doit assurer le support d'IE7 (qui ne supporte pas les contenus générés avec :before/:after).

elz64 a écrit :
Before: et after:..pas fan. je préfère avoir un dom complet pour le js.

Si le span n'apporte rien, ne pas le mettre dans le DOM ne peux être que mieux pour ton JS. Si il est nécessaire au JS, mais sans contenu, alors il vaut mieux le générer au DOM ready en JS.

La solution du SPAN marche aussi, mais demande de rajouter un élément dans le code HTML juste pour la décoration. On n'utilisera cette solution que si on doit assurer le support d'IE7 (qui ne supporte pas les contenus générés avec :before/:after).

ben à part pour des intranets, la question du support de n'importe quoi (c'est le cas de le dire) se pose toujours.

Sauf peut-être enfin pour IE6, ..et encore...