Css et div dynamique

Bonjour,

Je cherche comment réaliser le même effet présent sur ce site : http://www.webdesigncompete.com/ au niveau des 8 vignettes au dessus de la map.

J'ai une image et j'aimerais que lorsqu'on passe dessus un div surgisse de nul part en étant animé, pour mieux comprendre, voilà un super schéma.

http://uploads.imagup.com/07/1232058669_schema.gif

voila ce que j'ai trouver, il doit y avoir du JS aussi non?

<a title="***" href="***/">
<img id="***" alt="***" src="***" style="visibility: visible; opacity: 1;"/>
</a>
<div id="***" class="sliderWebdesigner" style="visibility: visible; opacity: 0.95; bottom: -61px;">

et le css :

.sliderWebdesigner {
background:transparent url(../images/background-darkness.png) repeat scroll 0 0;
bottom:-61px;
height:50px;
left:0;
padding:5px;
position:absolute;
width:163px;
}

En tout cas merci pour vos futures réponses

Bonjour,

Si tu maitrises HTML, CSS et JavaScript c'est tout à fait possible. Utiliser une bibliothèque JS telle que jQuery, Mootools ou Prototype+scriptaculous peut faciliter les choses côté JavaScript (il faudra alors avoir des bases en JS et connaitre un minimum la bibliothèque utilisée), mais une bonne maitrise de HTML et CSS reste nécessaire.

Tu pourrais commencer par «prototyper» l'effet que tu veux réaliser en travaillant le code HTML et CSS, et en utilisant un tout petit peu de JS (ou éventuellement une pseudo-classe :hover) pour avoir un prototype de l'effet d'animation. Ensuite, une fois que c'est bien en place, il faudra réaliser l'effet d'animation de manière plus propre avec une fonction JS bien fichue. Ah oui, et c'est une évidence mais je le rappelle: prévoir un rendu correct avec JS désactivé.

Le problème c'est que je ne connais pas le JS... Je continue à chercher des scripts. J'en ai trouvé un qui change l'opacité :

http://wiki.github.com/madrobby/scriptaculous/effect-opacity

C'est ce que j'aimerais faire pour ce qui est de l'opacité en tout cas, en modifiant un peu from 1 to 0.8 par exemple.
Sur le site ça marche mais quand je recopie le code ça ne marche pas... Il y a autre chose à mettre si je veux que cela marche ?

Il me semble que j'avais vu des menus déroulants dynamiques avec des scripts etc... mais je ne le trouve plus, en tout cas ça existe

Merci pour tes conseils mais le JS je ne connais pas

EDIT : Je me penche sur cela en ce moment : http://webiswell.fr/16/12/2008/creer-menu-slider-simple-jquery-css-798/
Modifié par Kunt (15 Jan 2009 - 18:28)

Bon,

Je suis arriver à faire un effet peut être plus léger et mieux, en tout cas j'ai trouver la solution avec le lien cité plus haut.

Merci quand même et bonne continuation

Kunt a écrit :
Le problème c'est que je ne connais pas le JS... Je continue à chercher des scripts.

Eh bien dans ce cas tes solutions sont les suivantes:

1. Laisser tomber. Faire plus simple, sans effet d'animation nécessitant JavaScript.
2. Apprendre JavaScript.
3. Ne pas apprendre JavaScript, chercher un script qui fait exactement ce que tu souhaites (ne même pas penser que tu peux combiner deux scripts pour obtenir le bon effet, ou un modifier un pour obtenir l'effet souhaité... tout ça demanderait en effet des compétences en JS). Mais attention, c'est prendre le risque d'être complètement bloqué au moindre problème rencontré, que ce soit pour la mise en place du script ou la maintenance du site.
4. Faire faire l'intégration par quelqu'un.

Bonsoir,

Désolé de répondre si longtemps après.
Je commencé à faire un site et je cherchais donc comment faire l'effet en JS.

Grâce au lien que j'ai trouvé plus haut j'ai réussi à faire quelque chose qui me convient

J'ai fais 2 effets (vignette et titre).

Voilà ce que ça donne http://css.dot-design.fr/
C'est pas de la pub, si je n'ai pas le droit de mettre le lien ne vous gênez pas pour le supprimer

Merci et bonne soirée.