28172 sujets

CSS et mise en forme, CSS3

Placer infobulle onmouseover

Bonjour

je suis voudrai faire en sorte que lorsque je passe ma souris sur un logo, un texte apparaît.

Pour le moment j'utilise un infobulle, cependant lors du onmouseover je souhaiterai que le texte s'affiche dans une div afin qu'il soit toujours présent au même endroit dans le site (ce qui n'est pas le cas avec position relative, absolue, fixe etc etc, quand on change la résolution)

en vous remerciant d'avance
Modifié par nonokart (18 Mar 2011 - 20:18)
Bonjour,

Je me serai personnellement tourné vers les deux fonctions : .hide() et .show() de JQuery vu que tu parles d'un évènement "onmouseover".

Il te suffit donc de placer ta div, puis tu lui appliques un .hide() et à l'évènement mouse over, tu appliques un .show(). tu peux même animer ton apparition si tu le veux Smiley cligne

Ton code javascript devrais ressembler à quelque chose comme ça : 


$('#logo').hover(function() {
  $('#nomdetadiv').show('slow', function() {
  });
});


Pour la disparition, il te faut juste faire l'inverse Smiley cligne

Sinon tu a aussi "visibility" en CSS qui peut prendre les paramètres suivant :
- visible, visible, valeur par défaut.
- hidden, caché.
- collapse : N'est pas reconnue partout
- inherit, hérite de son parent (css 2).

Bonne chance =)
Modifié par Bnji (19 Mar 2011 - 00:46)
Bonjour,

Il n'est pas vraiment nécessaire de faire appel à jQuery pour faire ça. Le javascript "normal" fera très bien l'affaire!
Pour donner une idée :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Infobulle fixe js</title>
    <style type="text/css">
	[code=css]/*<![CDATA[*/
	#logo, #texte {cursor:pointer}
	#info {
		display:none;
		position:absolute;
		left:40%;
		top:20px;
		background:#eee;
		padding:20px;
		border:2px dotted blue
	}
    /*]]>*/
</style>
<script type="text/javascript">
	//<![CDATA[
	// tu mets tes messages ici (tu peux utiliser le html)
	var infos = new Array();
	infos[1]= "<span style='color:red;font:italic 14px arial'>Message n°1<\/span>";
	infos[2]= "Message <span style='font:bold 20px arial;color:red'>°2<\/span>";

	function afficher(msg){
		document.getElementById('info').style.display = "block";
		document.getElementById('info').innerHTML = msg;
	}
	function masquer(){
		document.getElementById('info').style.display = "none";
	}
    //]]>
</script>
</head>
<body>
<div id="info"></div>
<div>
<span id="logo" onmouseover="afficher(infos[2]);return false;" onmouseout="masquer();">Ceci pourrait être ton logo</span>
<p id="texte" onmouseover="afficher(infos[1]);return false;" onmouseout="masquer();">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
[/code]
Modifié par lddsoft (19 Mar 2011 - 17:06)
Sujet clos
Aller à