28172 sujets

CSS et mise en forme, CSS3

Placer un DIV en 1er plan en passant dessus

Bonjour,
mon problème du jour est certainement lié à mon inexpérience en javascript et CSS... je vous l'expose :

J'aimerai faire une page avec un nombre indéfinis de calques div qui seraient répartis/superposés de manière anarchique mais quand on passe sur un en particulier, celui-ci arrive en premier plan pour en permettre la lecture.

Pour illustrer ma question, voici 2 exemples de sites (dont un en flash) qui vous montre ce que j'aimerai tant faire :

http://www.colline.fr/

http://charlotteleduc.com/

Y a peut être une histoire d'onmouseover lié à un z-index qui traîne quelque part mais pour l'instant, j'ai rien trouvé.

Merci à vous.
Bonjour,

Effectivement, tu pourras recourir à z-index pour obtenir cet effet.
Un exemple simple:
[b][#black]HTML[/#][/b]

<div id="bloc1">Hello World!</div>
<div id="bloc2">Hello World!</div>
<div id="bloc3">Hello World!</div>

[b][#black]CSS[/#][/b]

div {position:absolute; width:150px; height:200px;}
div:hover {z-index:1;}
#bloc1 {left:10px; top:10px;}
#bloc2 {left:50px; top:50px;}
#bloc3 {left:100px; top:100px;}
Bah voilà... quoi demander de plus simple. Merci beaucoup.
Je vais dorénavant juste ajouter un peu de javascript pour pouvoir pour "draguer et droper" mon div et l'affaire sera faite....
D'ailleurs (pour abuser) n'aurais tu pas un script hyper efficace drag & drop qui traine.

Merci à nouveau.
Ah si... Benjamin... j'ai encore un doute...
Puisque je vais associer cela à un drag&drop comme dans ( http://charlotteleduc.com/ ) ne vaut-il pas mieux associer cela à un on-click :
Une fois après avoir cliqué une zone prédéfinie (la zone à "draguer") le calque arrive en z-index 1.
Alors qu'actuellement si la souris ne survole plus un des calques, le bloc3 revient en z1.

Qu'en penses-tu ?
En effet, apparemment le hover plait pas à tout le monde.
Suis allé sur walterzorn... le script est impressionnant... j'espère que je vais réussir à l'intégrer (j'aimerai notamment interdire le resize).
Merci Warry.
Il te faut effectivement un script pour le drag&drop. Et pour le z-index, c'est plus fiable/compatible effectivement. L'idéal étant d'attribuer à chaque fois un z-index supérieur en incrémentant. Comme tu as tout à fait le droit d'utiliser un z-index de 853 si ça te chante, et qu'il me semble que ça marche bien avec les différents navigateurs, l'utilisateur pourra cliquer et drag&droper tout son saoul. Smiley smile
Sujet clos
Aller à