Zone réactive

Zone réactive

En souvenir de Michal, qui nous avait proposé ce nom pour une zone à survoler ou à cliquer, sur une image ou dans un cadre.

Il existe un autre code mais je trouve que l'emploi des codes en CSS3 est plus simple.

Commençons par créer un cadre de 800x450px, avec un image de fond; nous plaçons dessus, un carré, bordé de blanc pour le situer et, sur ce carré, nous allons placer:

- soit un lien au survol

- soit un lien au clic, par une écriture différente.

code au survol.

<div style="width: 800px; height: 450px; float: left; border: 4px ridge grey; background: url('http://ekladata.com/EYg_JomEFkILIstD_oMhFelxCD8.jpg');">
<p id="v1"> </p>
<p id="m1"> </p>
</div>

<style></style>

D'autres écritures sont possibles

Le cadre est dimensionné et contient l'image de fond.

Ce cadre contient la zone réactive (v1) et l'image (m1) qui apparaîtra, placée ici en fond de paragraphe; attention de toujours écrire les éléments dans cet ordre: élément survolé avant l'élément animé.

Chaque élément est positionné par transform:translate(Hpx,Vpx) et placé en position:absolute pour être indépendant du reste: amusez-vous à les déplacer, dans mon code.

Le survol de v1 anime l'élément m1, selon les paramètres que vous lui avez fixés: transition:all 1s linear; et modifie l'attribut que vous voulez: ici, l'opacité qui passe de transparent à opaque.

Voyons un exemple pour le même résultat, mais au clic.

code au clic.

<div style="width: 800px; height: 450px; float: left; border: 4px ridge grey; background: url('http://ekladata.com/EYg_JomEFkILIstD_oMhFelxCD8.jpg');"><input id="v2" type="text" /><img id="m2" src="http://ekladata.com/hDW0exRLfPzh0Fl-DY63-i4hK9U.gif" alt="" /></div>

<style></style>

L'écriture de la zone réactive devient <input au lieu de <p; l'image est placée directement et seule l'action sur la zone passe de hover (survol) à focus (clic) ... et pi c'est tout !

Chaque élément étant placé en indépendant, vous pouvez en placer d'autres avec d'autres actions.

Vous avez le choix de faire apparaître les zones réactives ou de les rendre transparentes, pour faire chercher vos visiteurs.

Vous pouvez également créer un bouton (?)qui fera apparaître ces zones à son survol, pour aider... "c'est vous qui voyez !"

?

code au survol du ? pour repérage position zone réactive (survol).

<div style="width: 800px; height: 450px; float: left; border: 4px ridge grey; background: url('http://ekladata.com/EYg_JomEFkILIstD_oMhFelxCD8.jpg');">
<p id="a3">?</p>
<p id="v3"> </p>
<p id="m3"> </p>
</div>
<style></style>

code au clic sur ? et clic sur zone réactive .

<div style="width: 800px; height: 450px; float: left; border: 4px ridge grey; background: url('http://ekladata.com/EYg_JomEFkILIstD_oMhFelxCD8.jpg');"><input id="a4" type="text" value="?" /> <input id="v4" type="text" /> <img id="m4" src="http://ekladata.com/hDW0exRLfPzh0Fl-DY63-i4hK9U.gif" alt="" /></div>
...
<style></style>