Discussion :

[magnum6669]

Bonjour à tous !

Alors voila, j'aurais voulu quelque petites info, et quelques pistes a suivre.
J'aimerais faire un carré ou il y a une image dessus, et lorsque l'on passe dessus en "onmousseover" l'image monte et est remplacé par des infos comme ceci : https://chrome.google.com/webstore/category/home?hl=fr Quelqu'un saurait il la piste a suivre ?

Merci et bonne journée!

[r1oll]

Tu fais ta div en display none et l'orsque tu mouseouver tu change sa propiété en display on ...?!



Ou un bouton qui delencherais l'évènement au lieu de l'over ce qui donnerais:

Code :

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

1
2
3
4
5
6
 function showmenu(menu) {
		if (menu.style.display == 'none') 
		menu.style.display = 'block'; // on inverse le style...si afficher on cache, si cache on affiche.
		else 
		menu.style.display = 'none';
}

[magnum6669]

A vrai dire, je ne suis pas très doué en langage web Mais j'ai du mal m’exprimer, en faite comme sur le liens précedement linké, j'aimerais que dans un div, il y a une image, qui lors du mousseover monte et laisse apparaitre les infos qui sont caché dessous, et lors du mousseout, l'image redescendrais petit a petit pour revenir à l'état initial, j'ai éssayé plusieurs méthode comme changé le top de l'image, mais avec une fonction :

Code :

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

1
2
3
4
5
6
7
function part(){
	if(document.getElementById) {
           for(i=0;i<10;i++)//Normalement l'image devrait monter de 5pixel/tours de boucle
		haut+=5;
		window.document.getElementById("image").style.top =haut;
	}
}

Mais cela ne fonctionne pas...C'est pour cela que je pensais à un timers, ou une fonction différentes ? Mais mes connaissances, et mes recherches sont sans succès...
Merci

[r1oll]

Tu fais un css dans le genre

Code :

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

#MonIDImage { display: none;  }

Et sur ton image/div/text/peutimporte dans ton code tu met ton onMouseOver= display:inline;


En gros tu aura une image présente mais non visible par l'utilisateur, et l'orsque celui ci survolera l'emplacement, elle s'affichera.

Fais ton image, met une autre image par dessus qui fait par exemple 50% de la taille de la premiere avec du texte ect...en display none, et l'orsque tu mouseover, elle va venir se mettre par dessus.

Meme pas besoins de JS =)

[magnum6669]

Je pense que je me suis encore mal exprimé. En faite, j'aimerais que lors du mousse over l'image défile et laisse place a l'autre, comme si l'image bougeais vers le haut, en gros elle fait du scroling, et laisse place à une div dans la div, puis lors du mousseout, c'est l'inverse et je pense pas que l'on puisse faire ça en css. Je ne cherche pas d’animation instantané mais qui dure.

Comme exemple qui n'a rien a voir, le générique de stars wars il monte pas instantanément, il est même long a monté, et bien je veux faire dans le genre, mais une fois out, le générique redescend!

[r1oll]

Ok.

Outre le html et les display, le css 3 te permet de faire des "transition"

Code css :

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

1
2
3
4
transition-property /* Précise les propriétés CSS à transformer */
transition-duration /* Précise la durée de la transition */
transition-timing-function /* Précise la fonction de transition à utiliser, le modèle d'interpolation (accélération, décélération...) */
transition-delay /* Précise le retard (ou l'avance) du départ de la transition */

Peut etre cela pourra t'aider.

[magnum6669]

Je vais explorer cette voie, et je vous tiens au courant, merci !