11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Afficher une div par rollover sur une autre div

Bonjour =)

Tout est dans le texte je crois...

J'ai une DIV a, et je souhaiterais afficher une DIV b par hover sur la div a...
Par CSS, si la div a est parente de la b, c'est facile, mais le probleme du CSS, c'est bien l'interaction sur une div parente ou de meme niveau...

Merci d'avance =)
Modifié par LightBen (28 Feb 2013 - 12:43)
Je crois que ça fonctionne:
<div id="a" onmousover="show_hide('show','b');" onblur="show_hide('hide','b');"></div>
<div id="b" style="display:none;"></div>

funtion show_hide(elementid,action) {
	element=getElementById(elementid);
	if(action=='show') {
		element.style.display='block';
	}
	else id(action='hide') {
		element.style.display='none';
	}
}

Modifié par juliendargelos (25 Feb 2013 - 20:34)
Bonsoir,

@juliendargelos
C'est quoi ce code Smiley fache !!??
As-tu testé? T'es-tu relu?
Tu voulais, sans doute, écrire ...
function show_hide(action,elementid) {
	element=document.getElementById(elementid);
	if(action=='show') {
		element.style.display='block';
	}
	else if(action='hide') {
		element.style.display='none';
	}
}


Cordialement,
Lddsoft
Modérateur
Bonjour,

Iddsoft, c'est quoi cette réaction agressive, et paradoxale avec le cordialement à la fin de ton message, pour de simples coquilles dans un code écrit rapidement pour dépanner LightBen?
Désolé lddsoft, je ne pensais pas te froisser à ce point !
Il est exact que je n'ai ni relus ni testé mon code, bien que l'idée y soit et que tu l'ai parfaitement éclaircie, donc ça n'a pas posé semble-t-il tant de problèmes Smiley lol
@Tony Monast, @juliendargelos,

Désolé d'avoir utilisé un smiley trop "agressif", semble-t-il. Mon intention n'était pas d'agresser.

Par contre, je ne suis pas d'accord avec Tony Monast quand il dit
Tony Monast a écrit :
pour de simples coquilles dans un code

Trouves-tu VRAIMENT qu'il s'agisse de "simples coquilles"?

juliendargelos a écrit :
funtion show_hide(elementid,action) {
element=getElementById(elementid);
(code qui ne fonctionne pas)
et
lddsoft a écrit :
function show_hide(action,elementid) {
element=document.getElementById(elementid);
(code qui fonctionne)

Cordialement,
Lddsoft
Pour "document" je viens bien croire que ça aurait pas marché, par contre, en quoi le sens des paramètres de ma fonction influe sur celle-ci ?:

J'ai proposé: show_hide(elementid,action)
tu as corrigé: show_hide(action,elementid)
Bonsoir,

Ce topic récent tombe bien..
Cela fait quelques semaines que je développe un site pour mon association et je suis un peu débutant. J'ai installé un wordpress en local, créer les pages, articles et le contenu.

Sur ma page d'accueil, j'ai créer une gallerie d'images type "grille", chaque image est encapsulée dans un lien.

En gros le schéma c'est:

<div class="gallerie-release">

<div class="gallerie-release-item" onmousover="show_hide('show','gallerie-release-infos');" onblur="show_hide('hide','gallerie-release-infos');"><div class="gallerie-release-infos">Wolf - Moody EP</div><a href="http://localhost:8888/?p=61"><img src="http://localhost:8888/wp-content/uploads/2013/02/wolfmoody-150.png"/></a></div>

<div class="gallerie-release-item"><a href="http://localhost:8888/?p=61"><img src="http://localhost:8888/wp-content/uploads/2013/02/myheadfaded-150.png"/></a><div class="gallerie-release-infos">my.head - FADED EP</div></div>

<div class="gallerie-release-item"><a href="http://localhost:8888/?p=61"><img src="http://localhost:8888/wp-content/uploads/2013/02/roma-150.png"/></a><div class="gallerie-release-infos">Roma - Transexual Amazone EP</div></div>

</div>


Je vous ai mis seulement 3 éléments de ma grille, ce sont chacun des div.gallerie-release-item encapsulée dans un div.gallerie-release

Après ma grille, j'ai placé le javascript de cette façon,donc en bas de ma page wordpress, comme si le script était intégré dans le html?:

<script language="javascript" type="text/javascript">
<!--

function show_hide(action,elementid) {
	element=document.getElementById(elementid);
	if(action=='show') {
		element.style.display='block';
	}
	else if(action='hide') {
		element.style.display='none';
	}
}

// -->
</script>


J'ai tenté d'appliquer les codes que vous suggérez dans ce topic, uniquement au premier élément de ma grille, mais ca ne fonctionne malheurement pas. Evidemment je dois louper quelquechose. Smiley ohwell

Ah oui, j'ai aussi ma feuille de style externe ou j'ai écrit ça:

.gallerie-release {float:left; margin-bottom:25%; margin-top:25%;}
.gallerie-release-infos {float:left; margin-left:10px; margin-top:-100px;display:none;}
.gallerie-release-item {float:left; height:109px; margin-left:15px; margin-bottom:13px; width:150px;}


Suis-je a coté de la plaque? ----> il y a des chances Smiley biggrin
Merci beaucoup
Modérateur
Julien, l'ordre des paramètres ne correspondait pas dans ton code HTML.

ernesterlime, bienvenue sur Alsacréations. Je t'invite cependant à créer ton propre sujet afin de respecter celui de LightBen.
Je peux créer un autre sujet, mais il s'agit exactement de la même fonction javascript dont j'ai besoin, j'ai tenté d'appliquer ce que j'ai pu lire ici, et sans résultats, d'ou la suite ici.

Je créer un nouveau topic alors, merci
Bonjour =)

Je suis desole, mais j'ai essaye le code, ca ne fonctionne pas...

Voici mon code:
Dans le head:
	function show_hide(action,elementid) {
		element=document.getElementById(elementid);
		if(action=='show') {
			element.style.display='block';
		}
		else if(action='hide') {
			element.style.display='none';
		}
	}
</script>


Dans le body:
<div id="a" onmousover="show_hide('show','b');" onblur="show_hide('hide','b');">Div a</div>
<div id="b" style="display:none;">Div b</div>


Merci =)
Je ne connais pas JS, je decouvre. Est-ce normal qu'il y ait action=='show' puis action='hide' ? (deux puis un seul signe egal)
LightBen a écrit :
Bonjour =)
Je ne connais pas JS, je decouvre. Est-ce normal qu'il y ait action=='show' puis action='hide' ? (deux puis un seul signe egal)


Non tu dois mettre deux signes ==
tu dois aussi changer onmousover pour onmouseover (manquait un e)
Super ca fonctionne presque. La div b apparait, mais lorsque je sors du rollover, elle ne re disparait pas, elle reste en display block
LightBen a écrit :
Super ca fonctionne presque. La div b apparait, mais lorsque je sors du rollover, elle ne re disparait pas, elle reste en display block


oui parce que tu as choisis un onblur, remplace le par onmouseout et ça fonctionnera Smiley smile
Effectivement, ca fonctionne.

Quelle est la difference entre onblur et onmouseout ?

Merci a tous en tout cas, en esperant revenir avec de plus grosses problematiques que ca (apprentissage, quand tu nous tiens...)
Modifié par LightBen (28 Feb 2013 - 11:53)
LightBen a écrit :
Effectivement, ca fonctionne.

Quelle est la difference entre onblur et onmouseout ? [...]


onmouseout c'est quand la souris s'en va de l'élément en question
onblur c'est quand l'élément perd le focus, mais pour ça il faut cliquer ailleurs

Sinon dans le code quelque chose me dérange :
element=document.getElementById(elementid);

Pour moi c'est pas propre, déjà c'est une variable qui devrait donc être déclarée avec le mot clé var element
de plus c'est une variable inutile, même si les machines sont rapides et ne vont pas être dérangées, on n'en a pas besoin, essaie plutôt ça

function show_hide(action,elementid) 
{
	
   if(action=='show') 
   {
   document.getElementById(elementid).style.display='block';
   }
   else if(action=='hide') 
   {
   document.getElementById(elementid).style.display='none';
   }
}

Modifié par Ozelian (28 Feb 2013 - 12:15)
Sujet clos
Aller à