javascript

ScoRPinA

Accro
salaam chkon kay9ch3 chwiya f javascript y3t9ni <D

supposons 3ndi plusieurs images a chak fois ke je passe le curseur de la souris sur une d'elles taficha liya f un autre cadre(tableau ou une div)

des idees :confused::confused:
 

RedEye

- أبو عبدالرحمن -
Membre du personnel
dak le cadre dialek finahowa par rapport aux images, 7dahoum awla un peu plus loin dans la page ?? wash bgitiha tafficha aggrandie ??
 

RedEye

- أبو عبدالرحمن -
Membre du personnel
si tu veux un truc basic, il te faudra 2 images, une pour la vignette, et une aggrandie..
sinon tu cherche un plugin jquery, qui te donnera des options de zoom, sur tous les détails de l'image.

pour le premier cas, tu dois jouer sur les évènements "mouse over" et "mouse out", créer une image transparent awla fiha que du blanc et l'utiliser comme par défaut dans le cadre.
dans l'évenement "mouse over", tu fais appel à une fonction via l'attribut html "onmouseover" du tag "<img>", dans le quel tu charge dans l'image du cadre aggrandie, l'image correspondante à la vignette
et quand la souris quitte ta vignette, c l'évenement "mouse out" qui se produit, et pour l'exploiter, tu fais appel via l'attribut "onmouseout" du tag "<img>", à une fonction javascript qui rétablira dik l'image par défaut.

tu t'y retrouve awla mazal ??
 

RedEye

- أبو عبدالرحمن -
Membre du personnel
ana 3titek le plus basique du javascript..

tu peux aussi jouer sur des divs, en les mettant comme background
 

RedEye

- أبو عبدالرحمن -
Membre du personnel
onmouseover et onmouseout tu les utilise f les tags <img< des vignettes

et la <div< tu l'utilise au lieu de <img> pour l'image aggrandie
 

RedEye

- أبو عبدالرحمن -
Membre du personnel
[MENTION=80]RedEye[/MENTION] ca y est ca marche <D merci bcp :eek::eek:
3ala ro7bi wa sa3a

comme j'ai dis l'exemple que je t'ai fourni est du basique, tu peux remplacer le tag <img> de l'image grande, par un <div> et bien sûr modifié le code dans les fonctions javascript pour remplacer l'arrière plan, sauf que dans ce cas, il faudra fournir la hauteur et largeur dans la fonction du mouseover, pour les attribuer à la div, sinon l'image en arrière plan ne s'affichera pas..ou bien, fixer la largeur et hauteur de la div dans le css à des valeurs maximales, et lors de l'affichage de l'image en arrière plan l'afficher centrée, en jouant sur l'attribut "background-position" du CSS en le mettant à "center center".

à noter que tu peux faire cela et plus en utilisant jQuery..et aussi qu'il y a des plugins jQuery, concernant l'affichage des images, les galleries, le zoom sur les images, etc, une recherche sur google t'aidera..

autre chose, en javascript pour afficher une image, il faut que celle-ci soit préchargée avec la page lors de l'accès à celle-ci, cela va amrcher rapidement car tu fais le test en local, par contre en ligne ça va prendre un peu de temps à charger l'image aggrandie
 

ScoRPinA

Accro
yalah chft l'exemple il est tres interessant srt ana jé modifié le code tani je suis entrain de travailler avec un tableau

daba kandir formation en javascript 3ad ndoz l jquery wa7da wa7da <D<D
 

RedEye

- أبو عبدالرحمن -
Membre du personnel
jé une autre question si les images sont stockees en bd mysql ??:confused:
donc ce cas c dimanique lool ktabtba w 3gazt nse7a7ha <D

ça va rester la même chose
c juste, que tu va charger les vignettes par exemple :
PHP:
<?php
foreach ($images as $image) {
echo '<img src="'.$image->nom_fichier.'" onmouseout="outImage();" onmouseover="overImage(this.src)" />'."\n";
}
?>
 

ScoRPinA

Accro


donc ce cas c dimanique lool ktabtba w 3gazt nse7a7ha <D

ça va rester la même chose
c juste, que tu va charger les vignettes par exemple :
PHP:
<?php
foreach ($images as $image) {
echo '<img src="'.$image->nom_fichier.'" onmouseout="outImage();" onmouseover="overImage(this.src)" />'."\n";
}
?>


mafhmtch <(
 

RedEye

- أبو عبدالرحمن -
Membre du personnel
jé stocké le chemis des images ,
jé trouvé qu'on peutaussi les stocker sous forme de blob
oui bah voilà, comme je t'ai montré dans le code, je suppose que le nom de ta table est "images" et, le champ du chemin est "chemin" alors ton code sera comme ça :

PHP:
<?php
$q = "SELECT * FROM images";
$r = mysql_query($q);
while ($row = mysql_fetch_object($r)) {
echo '<img src="'.$row->chemin.'" onmouseout="outImage();" onmouseover="overImage(this.src);" />'."\n";
}
?>
 
Haut