Discussion :

[tchoukapi]

bonjour,

L'image de fond de mon site est place dans mon fichier css
et je souhaiterais que celle ci soit selectionnable , cad que des partie de celle ci soit selectionnable afin que lors du passage de la souris sur certaine zone cela pisse appelé qqchose au clic.

J'ai essayé avec les balise map et area mais le fait que le lien soit dans le css pose probleme mais j'aimerais le laisser dans le css.

Si qqun a une solution ..
Merci

[trotters213]

je ne crois pas que cela soit faisable désolé.

[MasterOfChakhaL]

Salut,

Tu peux très bien placer la background sur un élément.
Cet élément contiendra des liens placés en position absolute.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div id="reac_img">
  <a id="un" href="#">&nbsp;</a>
  <a id="deux" href="#">&nbsp;</a>
</div>

et le css qui va avec:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
#reac_img {
  position: relative;
  width: 100px;
  height: 100px;
  background-image: url(./img/ton_image.gif);
}
 
#reac_img a {
  display: block;
  position: absolute;
  border: 1px solid red;
  width: 20px;
  height: 20px;
}
 
#un {
  top: 30px;
  left: 30px;
}
#deux {
  top: 50px;
  left: 50px;
}

C'est un exemple simplifié pour une image de 100x100px et des liens rectangulaires de 20x20px (la bordure est juste la pour que tu visualises).

Tu ne peux faire que des zones "réactives" rectangulaires, mais c'est la seule différence. C'est interessant aussi de pouvoir garder un html propre.

En tout cas, le principe est là, si tu as besoin de précisions...

Sur le hover de tes liens, tu peux appliquer une image de fond de ton choix

[tchoukapi]

Je vais tenter cette technique qui me semble tres interressante ...

Par contre ni y a t il pas un soucis lorsque un utilisateur n a pas la meme resolution que la mienne ?
Les cadres ne vont-ils pas se retrouver decalés ?

[Candygirl]

Par contre ni y a t il pas un soucis lorsque un utilisateur n a pas la meme resolution que la mienne ?
Les cadres ne vont-ils pas se retrouver decalés ?

Non, il ne va pas y avoir de problème avec le code de MasterOfChacal. Il attribue un position:relative au conteneur de l'image de fond justement pour qu'il devienne la référence pour le positionnement en absolu les liens enfants. Donc ce cadre peut très bien se déplacer au gré des résolutions, les liens seront toujours à leur place par raport à ton image à fond.

[tchoukapi]

Eh bien malheureusement en laissant la valeur en pixel, lorsque je passe de la resolution 1024*768 a 1280*1024 la position de mes zones selectionnables est completement differentes, cependant l'effet est attenué voir annulé en mettant les valeur en "%".

[MasterOfChakhaL]

Eh bien malheureusement en laissant la valeur en pixel, lorsque je passe de la resolution 1024*768 a 1280*1024 la position de mes zones selectionnables est completement differentes, cependant l'effet est attenué voir annulé en mettant les valeur en "%".

Peux-tu montrer le code qui te fait dire cela s'il te plait?

La technique que je t'ai donnée est définie en pixel, donc à priori rien n'est redimensionné, tu auras juste plus de place autour...

[tchoukapi]

Autant pour moi messieurs, dames la position relative etait mal placé ca fonctionne qque soit la resolution .

Merci a tous !