Bonjour,

Je vous remercie énormément de prendre déjà du temps pour moi ! Alors je ne vais pas allé par 4 chemin et je vais vous décrire mon problème le mieux que je peux !

Contexte:
Je créé un site mysql / php . Je veux charger toutes les entrée (de ma base de donnée) dans une page (sous forme d'une galerie photos).
Jusque la tout vas bien Smiley biggrin

Voici mon problème:
Je veux donner un petit effet quand on survole les images avec la souri. J'ai réalisé un script mais je ne comprend pas pourquoi il ne fonctionne pas...

Voici tout le code de la page:
<?php
// on se connecte à MySQL
$db = mysql_connect('localhost', 'root', 'root');

// on sélectionne la base
mysql_select_db('***',$db);

// on crée la requête SQL
$sql = 'SELECT * FROM design';

// on envoie la requête
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

// on cherche le nombre d entree dans la base de donee
$sql_nbr = mysql_query($sql) or die('Erreur SQL nbr !<br>'.$sql.'<br>'.mysql_error());
$nbr_rows = mysql_num_rows($sql_nbr);

// on ferme la connexion à mysql
mysql_close();
?>


pour pas spammer de code, je vous passe les code html... doctype, head (meta, title, css), body, div -->

<?php 
	
//----------[DEBUT BOUCLE]------------
for($i=0; $i != $nbr_rows ; $i++) {
while($data = mysql_fetch_assoc($req)) {
echo('<div id="'.$data['id'].'" class="les_flotters">'.'<a href="'.$data["lien"].'" onmouseover="document.nice.src='.$data["img0"].'" onmouseout="document.nice.src='.$data["img1"].'"><img src="'.$data["img1"].'" name="nice"></a>'.'</div>');
}
}
//------------[FIN BOUCLE]------------
				
?>


Voici le code qui pose problème (détail du code précédent):
echo('<div id="'.$data['id'].'" class="les_flotters">'.'<a href="'.$data["lien"].'" onmouseover="document.nice.src='.$data["img0"].'" onmouseout="document.nice.src='.$data["img1"].'"><img src="'.$data["img1"].'" name="nice"></a>'.'</div>');


si vous avez des problèmes, ou des demandes de précision, je suis la Smiley biggrin
enfin je spam le bouton refresh ^^

Merci beaucoup d'avance !

Chum
Modifié par Chum (19 Feb 2008 - 15:29)
Salut !
Euh... au fait, qu'est-ce qui ne fonctionne pas ? ta boucle while php ? juste le Js ?
Si c'est seulement l'effet au survol pourquoi ne pas nous fournir simplement le code html/js ?
Aguire a écrit :
Salut !
Euh... au fait, qu'est-ce qui ne fonctionne pas ? ta boucle while php ? juste le Js ?
Si c'est seulement l'effet au survol pourquoi ne pas nous fournir simplement le code html/js ?



ce qui fonctionne pas, c'est que les image ne switch pas quand je survole avec ma sourie...

je vous ai tout fournis ^^ ya rien de plus ...

ce que je veux faire c'est
<a href="#" onmouseover="nice.src='img1.jpg'" onmouseout="nice.src='img2.jpg'"><img src="img2.jpg" name="nice"></a>


mais quand je l'intègre dans mon code php, (pour avoir les nom des images en dynamique), ca ne fonctionne pas Smiley bawling

ca c'est le meme code mais intégré dans ma boucle:



echo('<div id="'.$data['id'].'" class="les_flotters">'.'<a href="'.$data["lien"].'" onmouseover="document.nice.src='.$data["img0"].'" onmouseout="document.nice.src='.$data["img1"].'"><img src="'.$data["img1"].'" name="nice"></a>'.'</div>');


mais ca ne fonctionne pas ... je comprend pas pourquoi... Smiley fache

Chum
Salut Chum Smiley cligne ,
Chum a écrit :
<?php 
for($i=0; $i != $nbr_rows ; $i++) {
while($data = mysql_fetch_assoc($req)) {
...
}
}
?>
Hum... ça me semble bizarre cette double boucle Smiley rolleyes ...

Sinon ce serait bien plus facile si tu nous montrais plutôt le code html généré au final que le code php Smiley lol !

A+


PS: en passant, si le champ id est numérique ton code est incorrect car on ne peut pas mettre <div id="333"> : un id doit commencer par une lettre [A-Za-z].
Heyoan a écrit :
Salut Chum Smiley cligne ,

PS: en passant, si le champ id est numérique ton code est incorrect car on ne peut pas mettre <div id="333"> : un id doit commencer par une lettre [A-Za-z].


Je savais pas ... je vais remédier a ça tout de suite ! Smiley confused


Pour le code qui est généré par mon php ca donne :
<!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 -->
<!-- ---- -->

<head>

<!-- ----- -->
<!-- metas -->
<!-- ----- -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Identifier-url" content="http://www.***.ch" />
<meta name="Publisher" content="" />
<meta name="Date-Creation-yyyymmdd" content="20080124" />

<meta name="Date-Revision-yyyymmdd" content="20080124" />
<meta name="Location" content="switzerland" />

<meta name="Copyright" content="%A9Copyright : Copyright 2005  www.***.ch"  />
<meta name="Description" content="Graphisme & communication" />
<meta name="keywords" content="design, graphisme, poster, illustrations, théatre, mur, web, catalogue, musée" />
<meta name="Language" content="fr" />
<meta name="Revist-after" content="3 days" />
<meta name="Distribution" content="global" />
<meta name="Robots" content="ALL" />
<meta name="Robots" content="index, follow" />

<!-- ----- -->
<!-- title -->
<!-- ----- -->

<title>Design NG Tornay</title>

<!-- ------------------------- -->
<!-- liens styles - javascript -->
<!-- ------------------------- -->

<link rel="stylesheet" href="../styles.css" media="all" />

<!-- -------- -->
<!-- fin head -->
<!-- -------- -->

</head>

<!-- ---- -->
<!-- body -->
<!-- ---- -->

<body>
	<div id="general">
    	
        <!-- -------------------------- -->
        <!-- debut du contenu       -->
        <!-- -------------------------- -->
        
		<div id="container">
	 	  <h5> page design </h5><br />
			<div id="1" class="les_flotters"><a href="nuithonie" onmouseover="document.nice.src=image1.jpg" onmouseout="document.nice.src=image2.jpg"><img src="image2.jpg" name="nice"></a></div><div id="2" class="les_flotters"><a href="casino" onmouseover="document.nice.src=img1.jpg" onmouseout="document.nice.src=img2.jpg"><img src="img2.jpg" name="nice"></a></div>    	</div>
        
        <!-- ------------------------ -->
        <!-- fin du contenu         -->
        <!-- ------------------------ -->
        
        <div id="signature">
    		<h5 class="signature">DESIGN NG TORNAY</h5>
    	</div>
    	<div id="sous_menu">
    		<a href="../" class="noactive">ACCUEIL</a> / <a href="#" class="active">DESIGN</a> / <a href="../prod_off/" class="noactive">PRODUCTION OFF</a> / <a href="../onavu/" class="noactive">ON A VU</a> / <a href="../contact/" class="noactive">CONTACT</a>

    	</div>
	</div>
 
<!-- --------------- -->
<!-- fin body - html -->
<!-- --------------- -->
 
</body>
</html>


Hésitez pas une seconde si vous avez besoin de plus d'information... car moi je viens de me taper une nuit semi-blanche pour trouver la solution et il n'y a pas moyen de trouver cette *ç%(/&)=?()/&%/ erreur ! Smiley biggol

snif

P.S. Je voulais préciser que pour le moment il n'y a que 2 entrée dans ma base de donnée sous design... (donc c'est normal que le code se duplique Smiley cligne )
Modifié par Chum (21 Apr 2010 - 09:35)
Coucou,

Je ne sais plus (et je n'ai rien pour tester sous la main) s'il n'y a pas une importance majuscule/minuscule en javascript ...

onMouseOver=
au lieu de
onmouseover=

onMouseOut=
au lieu de
onmouseout=

Tu voudrais pas tester pour voir ?

Cordialement,
Kéké.
En fait, j'ai pu faire des tests.

Voilà un code qui marche (qu'est tout nul, mais qui marche en la valeur d'un exemple)


		<div id="lien1" class="les_flotters"><a href="nuithonie" onMouseOver="document.TOTO1.src='image1.jpg'" onMouseOut="document.TOTO1.src='image2.jpg'"><img src="image2.jpg" name="TOTO1"></a></div><div id="lien2" class="les_flotters"><a href="casino" onMouseOver="document.TOTO2.src='image2.jpg'" onMouseOut="document.TOTO2.src='image1.jpg'"><img src="image1.jpg" name="TOTO2"></a></div>    	</div>



Tes oublies étaient : maj/min pour le nom javascript des commandes

Le name de ton image était le même pour tes 2 liens. (pas pratique pour différencier tes images.

les id doivent effectivement commencer par de l'alpha et pas par du numérique (là j'ai appris quelque chose Smiley murf . )

Visiblement en java, il faut impérativement encadrer le nom des images par de simple quote '

J'espère que la réponse conviendra à tes attentes ! L'exemple ne collera peut-être pas à ton besoin, mais je pense qu'il contient tous les éléments pour résoudre ton problème !

Bonne journée à toi ^^.
Kéké qui aime bien aider les membres aussi gentils d'un forum aussi sympa qu'Alsa Créa.
PS : Utilise des images qui ont des tailles similaires avec ce système. Il existe des cas sinon où ca dégrade complètement la mise en page.
Modifié par keke (25 Jan 2008 - 14:54)
Re',

tu pourrais essayer ça :
echo('<div id="div'.$data['id'].'" class="les_flotters">'.'<a href="'.$data["lien"].'" onmouseover="document.nice'.$data['id'].'.src=\''.$data["img0"].'\'" onmouseout="document.nice'.$data['id'].'.src=\''.$data["img1"].'"><img src="'.$data["img1"].'" name="nice'.$data['id'].'"></a>'.'</div>');

Les différences :

- id valide

- ajout de quotes autour du lien de .src

- name modifié pour chaque image

A+ Smiley cligne
Tiens j'avais pas vu que tu avais posté keke Smiley langue !

Pour ce qui est du
a écrit :
onMouseOver=
au lieu de
onmouseover=

cela dépend du DOCTYPE mais sur Alsa c'est souvent du XHTML quelque chose donc plutôt onmouseover Smiley lol !
Modifié par Heyoan (25 Jan 2008 - 15:13)
Heyoan a écrit :
Re',

tu pourrais essayer ça :
echo('<div id="div'.$data['id'].'" class="les_flotters">'.'<a href="'.$data["lien"].'" onmouseover="document.nice'.$data['id'].'.src=\''.$data["img0"].'\'" onmouseout="document.nice'.$data['id'].'.src=\''.$data["img1"].'"><img src="'.$data["img1"].'" name="nice'.$data['id'].'"></a>'.'</div>');

Les différences :

- id valide

- ajout de quotes autour du lien de .src

- name modifié pour chaque image

A+ Smiley cligne


Merci beaucoup !!!

mais j'ai du faire une petite correction car la sortie ne fonctionne pas... l'image change quand on passe avec la souri dessus mais elle ne reviens pas a la premiere image quand on mouseout de l'image.

en fait il manquais un ' sur l'image de sortie. Ca donne :




echo('<div id="div'.$data['id'].'" class="les_flotters">'.'<a href="'.$data["lien"].'" onmouseover="document.nice'.$data['id'].'.src=\''.$data["img0"].'\'" onmouseout="document.nice'.$data['id'].'.src=\''.$data["img1"].'\'"><img src="'.$data["img1"].'" name="nice'.$data['id'].'"></a>'.'</div>');


ton code:
echo('<div id="div'.$data['id'].'" class="les_flotters">'.'<a href="'.$data["lien"].'" onmouseover="document.nice'.$data['id'].'.src=\''.$data["img0"].'\'" onmouseout="document.nice'.$data['id'].'.src=\''.$data["img1"].'"><img src="'.$data["img1"].'" name="nice'.$data['id'].'"></a>'.'</div>');


Donc pour résumer: tout fonctionne parfaitement bien !
Merci beaucoup !!!! Smiley biggrin

Merci Heyoan, keke et Aguire !

Bonne fin de journée !

Chum
Chum a écrit :
en fait il manquais un ' sur l'image de sortie

Arf ! C'était un test pour voir si tu étais attentif Smiley biggol !
Heyoan a écrit :

Arf ! C'était un test pour voir si tu étais attentif Smiley biggol !


Smiley cligne

encore mille fois merci pour ton aide ! vraiment sympa de prendre du temps pour moi !