Afficher div au survol d'une autre (bis)

Bonsoir,

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.
Je veux donc que lorsque l'on survole <a><div></div></a>, un div apparaisse pour afficher un titre et une description par dessus l'image.

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 le code JS uniquement au premier élément de ma grille, mais ca ne fonctionne malheurement pas. Evidemment je dois louper quelquechose.

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
Merci beaucoup

à priori il me semble - mais je peux me tromper - que tu te compliques la vie avec des zones div, une image peut se placer où tu veux sans zone div.

Par ailleurs s'il s'agit comme je l'ai compris, d'afficher un texte sur l'image elle-même (et non au dessus), tu procèdes à l'ancienne, tu crées ton image sans le texte, une image avec le texte, et dans l'évènement onmouseover de l'image tu remplaces celle sans le texte par celle qui a le texte. Sur onmouseout tu remets l'image vierge, c'est comme ça que j'aurais fait.

Tout ça sous réserve que j'aie bien identifié et compris ton problème

Tu as tout a fait compris mais je veux rester dans une solution dynamique, sans avoir à passer par photoshop pour créer une image avec les infos en plus..

J'ai installé un plugin wordpress qui empeche le formatage du texte, car avec firebug j'ai vu que mon code javascript était rempli de <p> et donc surement annulé..
Donc ca c'est réglé, et j'ai aussi rajouté une ligne dans mon javascript var $j = jQuery.noConflict(); pour qu'il n'y ai pas de conflit avec d'autre fonctions, ce qui arrive souvent sur un wordpress, ce qui dorénavant donne cela pour mon java:

<script language="javascript" type="text/javascript">
<!--
var $j = jQuery.noConflict();
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>

Pas sur que ca ait un rapport, mais j'ai préféré etre sur...

mais evidemment toujours rien de fonctionnel..

source: http://benjamin-balet.info/blogging/blogging-utiliser-jquery-avec-wordpress/
Modifié par ernesterlime (27 Feb 2013 - 13:27)

OK, déjà indente correctement ton code, même pour toi c'est plus facile à lire.

Sinon ton code fonctionne et il y a de l'idée

Seulement tu utilises getElementById alors que c'est une classe, si tu remplaces dans ton css
.gallerie-release-infos par #gallerie-release-infos, dans ton html class par id ça fonctionne

Attention aussi au onmouseover, il manquait un e ou alors c'est ton copier coller

Par contre tes positionnements me laissent sceptique mais bon ... à toi de les régler
Modifié par Ozelian (27 Feb 2013 - 18:58)