18041 sujets

Questions générales et questions de débutants

Images affichées au passage de la souris

Bonjour,


je n'ai rien trouvé dans le forum ni dans les tutos alors je me permet de créer un post.

Voici l'exemple : http://fr.fotolia.com/Info/Images/StandardCollection

- Comme pour l'aperçu des images de ce site, j'aimerai savoir comment faire pour afficher une image en grand au passage de la souris?

- Je voulais savoir s'il est possible de faire un diaporama en utilisant le même principe?

- Enfin, même principe que ma dernière question, mais avec une vidéo cette fois-ci?


J'espère avoir été assez clair, et merci à ceux qui vont se pencher sur le sujet.


Ugo
Modifié par BorisZeHachoir (20 Nov 2012 - 14:36)
C'est une info-bulle ou tooltip. Normalement il y a pas mal de tutos sur la toile, mais je peux t'aider.

Pour ta deuxième question peux-tu détailler?

Tu peux faire des vidéo aussi!
Modifié par rodolpheb (20 Nov 2012 - 15:03)
Merci de ta réponse, j'ai vu des trucs sur Tooltip mais j'étais pas sur que c'était cet outil le mieux adapté. Je vais chercher des tutos dessus. Smiley biggrin

Pour la deuxième question, je voulais savoir s'il était possible de mettre un diaporama de photos dans le tooltip? Par exemple, lorsque le visiteur du site passe la souris sur une image, l'info bulle apparait avec 5 images qui défilent les unes après les autres.

Pendant que j'y suis, je cherche un moyen de faire la même chose que le tooltip (diaporama et vidéo) mais au lieu que cela soit un cadre qui apparait au en haut à droite et qui suit la souris lorsqu'on passe sur une image, c'est dans le cadre initial qu'apparait le diaporama ou la vidéo...
Est ce possible à ton avis?... Smiley rolleyes
POur t'épargner des recherches j'ai ce code sans suivi de souris
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
a.tooltip #FF {
	display: none;
	width: 410px;
	top: 100px;
	left:100px;
}
a.tooltip:hover #FF  {
	display: inline;
	position: absolute;
}
</style>
</head>

<body>

<a class="tooltip" href="#">
<img src="img.png" alt="details" width="100px" height="100px'"  />
<img id="FF" src="img-survol.png" alt="details" width="400px" height="400px" />
</a>
</body>
</html>


Avec suivi de souris je le fais avec du javascript et je ne me suis pas penché sur du full css.

Une info-bulle avec plusieurs images, c'est possible et reste à savoir quelles images tu veux placer et comment elles sont générées. As-tu un exemple de site?

POur la vidéo c'est simple.
Tu veux survoler une image contenue dans un cadre, et une vidéo apparait dans ce même cadre, c'est bien cela?
Modifié par rodolpheb (20 Nov 2012 - 18:03)
Merci beaucoup! Smiley smile

Alors oui pour la vidéo ça serait exactement ça! Smiley langue

En exemple, c'est exactement comme une vidéo youtube posé sur un site, sauf qu'il n'y a pas besoin de cliquer dessus pour que la vidéo soit lue, juste à passer et à laisser la souris sur l'image.
Exactement ce que tu m'as dit:
a écrit :
Tu veux survoler une image contenue dans un cadre, et une vidéo apparait dans ce même cadre, c'est bien cela?


Pour le diaporama je n'ai pas de sites en têtes, c'est une idée que j'ai eu comme ça. Ce sera uniquement pour des aperçus, donc des images de 800x600px environ. En fin de compte, j'utiliserai sûrement le même système que pour les vidéos (dans le même cadre), mais merci pour le code du tooltip!!!!! Smiley biggrin
connecté
Oui enfin... pour le survol, nous sommes loins ici d'avoir le résultat du site visé qui utilise l'ajax: le code que donne rodolpheb affiche simplement une image plus grande cachée préalablement en display:none...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
</head>
<style type="text/css">
#AA {
	background-color: #CCC;
	width: 520px;
}
#vid {
	visibility: hidden;
}
</style>
<script>
  function show(id) {
    document.getElementById(id).style.visibility = "visible";
  }
  function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
  }
</script>
<body>
<div id="AA"onMouseOver="show('vid')" onMouseOut="hide('vid')">
  <iframe id="vid" class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"> </iframe>
</div>
</body>
</html>

Bon courage Smiley smile
Merci d'avoir pris le temps.

Dès que je peux, je teste le code et je te tiens au courant (plutôt fin de semaine).

Cordialement,

Ugo
Bonjour,

ça fait un moment que je n'ai pas fait de code et la je dois admettre que je bloque... Smiley ohwell

Avec wamp et en testant sur un de mes sites, je n'arrive pas à faire fonctionner ton code.

- J'ai créé un fichier "style.css", dans un dossier "text" à la racine du site dans le quels j'ai mis : 
#AA {
	background-color: #CCC;
	width: 520px;
}
#vid {
	visibility: hidden;
}


- J'ai créé une page "sommaire.html", à la racine du site dans laquelle j'ai mis : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Document sans nom</title>
</head>
<style type="text/css">
</style>
<script>
  function show(id) {
    document.getElementById(id).style.visibility = "visible";
  }
  function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
  }
</script>
<body>
<div id="AA"onMouseOver="show('vid')" onMouseOut="hide('vid')">
  <iframe id="vid" class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"> </iframe>
</div>
</body>
</html>


Mais rien ne fonctionne, je dois zapper quelque chose, mais la je tourne en rond et sans aide je pense que je vais craquer!!! Smiley biggol

Tant pis si j'ai l'air ridicule mais : Au secours!!!! Smiley bawling
Je teste exactement ce code, avec un "index.html" ce coup ci... Smiley ravi 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
</head>
<style type="text/css">
#AA {
	background-color: #CCC;
	width: 520px;
}
#vid {
	visibility: hidden;

}
</style>
<script>
  function show(id) {
    document.getElementById(id).style.visibility = "visible";
  }
  function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
  }
</script>
<body>
<div id="AA"onMouseOver="show('vid')" onMouseOut="hide('vid')">
  <iframe id="vid" class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"> </iframe>
</div>
</body>
</html>


La vidéo apparaît comme un lien youtube normal, il n'y a pas l'effet escompté...*
HELP!
Pour faire simple, je vais expliquer exactement ce que je voudrais faire. Smiley murf

Un site, avec une seule et unique page.

Sur cette page, plusieurs images, placées sur toute la page, un peu dans l'esprit de ce document.
http://img4.hostingpics.net/pics/705593atelier.jpg

Une vidéo au centre et des diaporamas sur le côté droit, qui au premier abord apparaissent comme des images fixes, mais qui s'animent lorsqu'on passe la souris dessus, sans avoir besoin de cliquer et en restant sur la même page.

Je n'ai pas de site en tête, mais est-il possible de réaliser cela simplement avec du CSS et du HTML? Smiley sweatdrop

Je suis un peu brouillon dans mes explication précédentes Smiley rolleyes , j'espère que ça sera plus clair maintenant.

Merci d'avance! Smiley biggrin
Je met exactement ça, que je teste sur un site et sur wamp : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
</head>
<style type="text/css">
#AA {
	background-color: #CCC;
	width: 520px;
}
#vid {
	visibility: hidden;
}
</style>
<script type="text/javascript">
  function show(id) {
    document.getElementById(id).style.visibility = "visible";
  }
  function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
  }
</script>
<body>
<div id="AA"onMouseOver="show('vid')" onMouseOut="hide('vid')">
  <iframe id="vid" class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"> </iframe>
</div>
</body>
</html>


Mais ça ne marche pas, la vidéo apparaît normalemlent... Smiley confus
Au secours! Smiley decu
Bonjour,

Je ne sais pas trop si c'est ce que tu désires obtenir, mais au lieu de mettre un background-color:#ccc à #AA, tu peux y placer une image du tout début de la vidéo (faire une capture d'écran partielle), puis, lors du survol de cette image (onmouseover), tu remplaces dynamiquement le contenu du div par la vidéo, par exemple en utilisant innerHTML.
Sur "onmouseout", tu remets, tout aussi dynamiquement, ton image de départ.

A essayer!

Cordialement
Modifié par lddsoft (04 Dec 2012 - 08:37)
Merci pour l'idée, mas j'ai fait autrement pour la vidéo du coup. Elle se lance automatiquement, j'ai enlevé les commandes et à la fin elle reste sur une belle image. Donc c'est parfait.

Merci encore.
Sujet clos
Aller à