Y at-il un moyen de créer une div semi-transparente avec des "trous" placés dynamiquement?

Je crée une page avec 2 couches: une couche d'image et une couche de "masque" qui est semi transparente. Je veux placer dynamiquement un petit "trou" rectangle dans ce masque afin que l'image originale en dessous puisse être vue dans cette zone.Y at-il un moyen de créer une div semi-transparente avec des "trous" placés dynamiquement?

Est-ce possible? Le but final a est de créer un effet d'une image grisée qui, lorsque la souris plane sur certaines zones chaudes, ces zones deviennent "vives". Malheureusement ces zones ne sont pas consécutives et il n'est pas trop facile de créer la div du complément.

Merci! Amit

Source

2010-09-23 AmitA

OK, voici une solution que je trouve. Créer une div wrapper avec un positionnement relatif (pour capturer le positionnement absolu des zones chaudes). Placez l'image sur le calque inférieur. Placez une div semi-transparente sur le calque central. Placez toutes les divs "zone chaude" ("trous") sur la couche supérieure (positionnement absolu), sans arrière-plan (entièrement transparent). Ensuite, pour les zones chaudes: survolez la pseudo-classe, utilisez l'image d'arrière-plan de la même manière que l'image du calque inférieur et réglez la position d'arrière-plan sur -top -top (les négatifs de la position absolue des divs).

Ceci créera l'effet souhaité, c'est-à-dire une image grisée avec une partie de l'image originale affichée lors du vol stationnaire sur la "zone chaude".

Mon seul espoir est qu'il ne vis pas les performances du navigateur pour régler le positionnement d'arrière-plan d'une image 400K sur tant de divs (je environ 50 de ceux-ci) ..

Source

2010-09-23 22:48:14 AmitA

Une chose comme ça?

http://deepliquid.com/projects/Jcrop/demos.php

Source

2010-09-23 06:05:35 griegs

Merci Griegs. C'est un peu similaire à ce que je veux faire. Cependant l'exemple de jcrop implique seulement 1 div transparent. Dans ce cas, il est relativement simple de trouver les 4 divs qui créent le complément et les rendent semi-transparentes. Mais si j'ai beaucoup de ces "zones chaudes" qui font ces trous, il est plus difficile de calculer dynamiquement le complément .. – AmitA

@ user455826, ouais je suis d'accord mais je ne suis pas sûr que vous allez trouver quelque chose d'autre. Vous devrez peut-être modifier ce plugin pour obtenir le résultat dont vous avez besoin. – griegs

Je vais regarder comment il est implémenté ensuite. Merci pour le plomb! – AmitA

Y at-il un moyen de créer une div semi-transparente avec des "trous" placés dynamiquement?

Répondre

Questions connexes