Votre question

Affichage de toutes les images contenues dans un dossier

Tags :
  • Html
  • Programmation
Dernière réponse : dans Programmation
2 Juin 2008 15:11:19

Bonjour,

Peut-être une question bête mais je débute en HTML et donc, je voudrais savoir si il est possible dans une page html de dire d'afficher toutes les images d'un format contenues dans un dossier spécifique sans devoir toutes les écrire dans le code?

je sais pas une truc du style <img scr"../MesImages/ *.JPG"/>

Si quelqu'un a une solution... :ange: 

Merci.

Autres pages sur : affichage images contenues dossier

3 Juin 2008 14:47:59

jerbe a dit :
en php tu peux, mais si tu veux j'ai développé ça : http://jeremy1000.free.fr/tutoriaux/mes_fichiers/

Ca fait navigateur de fichiers, mais sur ton site, et seulement dans certains dossiers.

exemple : http://jeremy1000.free.fr/ftp

(je sais pas si c'est vraiment ce que tu recherche ...)



Hello!

Merci mais ce n'est pas vraiment ce que je recherche!

En faite je fais un site ou j'ai besoin de faire un défilement d'images sur le haut de la page ainsi que l'arret du défilement et un zoom de l'image quand on passe la souris dessus.

J'ai déjà un script fonctionnel qui me permet d'afficher une image et la zoomer lorsque l'on passe la souris dessus.

Mais il y a un soucis car, quand je met qu'une image et bien cela fonctionne mais, si je met 2 images et bien les images sont à la taille réel et le script ne fonctionne plus....

C'est pour ça que j'aurai voulu une commande qui me permettrait d'afficher toutes les images horizontalement d'un coup sans devoir toutes les rajouter dans le code

Donc si ça te parle ce serait avec plaisir que tu m aide! :-)


Voici le script que j'ai utilisé:



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Contact</title>
<!-- #EndEditable -->
<link href="../styles/style2.css" rel="stylesheet" type="text/css" />

<script language="javascript">
<!--
//PLF-http://www.jejavascript.net/
var coeff=4;//Coefficient de reduction
var larg=300;//largeur maxi de l'image
var haut=300;//hauteur maxi de l'image
var coeffinit=coeff;
function changer() {
if (document.image.width < larg) {
coeff = coeff-0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
chang=window.setTimeout('changer();',1);//vitesse de l'effet
}
else {window.clearTimeout(chang);}
}
function initial() {
if (document.image.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);

initi=window.setTimeout('initial();',1);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}
//-->
</script>

</head>

<body>

<div align="center">
<a name="img"></a>
<a href="#img" onmouseout="initial()" onmouseover="changer()" onclick="" ><img src="mon image" alt="" name="image"/></a></div>
<script language="javascript">

<!--
//PLF-http://www.jejavascript.net/
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
//-->
</script>


A++
Contenus similaires
3 Juin 2008 15:48:07

jerbe a dit :
tu veux faire un truc genre ça : http://ze.jeux.free.fr/ ?
(les boutons sur le coté gauche)



Oula non rien à voir! lol

Une série de photo qui défile de gauche à droite en haut de ma page.

Quand je passe la souris sur une photo, le défilement stop et, la photo pointée zoom à une taille définie.

Quand on enlève la souris, le zoom s'enlève et le défilement continue!

Et le script que j'ai passé en haut me fais le zoom mais je n'arrive pas à insérer plusieurs photos car, quand j'en met plus qu'une, le script ne s'exécute pas et les photos sont tailles réelle!

Et je n'arrive pas à le faire défiler de gauche à droite!

Voilà j'espère que c'est un peu plus clair pour toi ce que je désir! :) 

++
3 Juin 2008 19:25:22

aaaaaaaa !!!!! J'ai compris !!!

Alors pour faire défiler de gauche à droite tu peux par exemple utiliser un <marquee> : http://www.csvt.qc.ca/patriotes/html/code_spec/xmpl_mrq...

Sinon pour l'agrandissement tu utilise document.image.width, or pour que ça marche il faut utiliser l'id propre à chaque image.
Donc tu rajoute pour tes images un id="xxxx" et tu modifie le onmouseover :
(au passage le <a href ... sert à rien si tu utilise onmouseover, tu peux le faire direct sur l'image)

  1. <img src="mon image" alt="" name="image" id=1 onmouseout="initial()" onmouseover="changer('1')">


Et tu envoie l'id de l'image à la fonction changer() :
  1. function changer(id) {
  2. if (document.getElementById(id).width < larg) {
  3. coeff = coeff-0.2;
  4. document.getElementById(id).width = Math.round(larg/coeff);
  5. document.getElementById(id).height = Math.round(haut/coeff);
  6. chang=window.setTimeout('changer(id);',1);//vitesse de l'effet
  7. }
  8. else {window.clearTimeout(chang);}
  9. }


Bon j'ai rien testé, c'est juste une idée ...
5 Juin 2008 17:33:52

jerbe a dit :
aaaaaaaa !!!!! J'ai compris !!!

Alors pour faire défiler de gauche à droite tu peux par exemple utiliser un <marquee> : http://www.csvt.qc.ca/patriotes/html/code_spec/xmpl_mrq...

Sinon pour l'agrandissement tu utilise document.image.width, or pour que ça marche il faut utiliser l'id propre à chaque image.
Donc tu rajoute pour tes images un id="xxxx" et tu modifie le onmouseover :
(au passage le <a href ... sert à rien si tu utilise onmouseover, tu peux le faire direct sur l'image)

  1. <img src="mon image" alt="" name="image" id=1 onmouseout="initial()" onmouseover="changer('1')">


Et tu envoie l'id de l'image à la fonction changer() :
  1. function changer(id) {
  2. if (document.getElementById(id).width < larg) {
  3. coeff = coeff-0.2;
  4. document.getElementById(id).width = Math.round(larg/coeff);
  5. document.getElementById(id).height = Math.round(haut/coeff);
  6. chang=window.setTimeout('changer(id);',1);//vitesse de l'effet
  7. }
  8. else {window.clearTimeout(chang);}
  9. }


Bon j'ai rien testé, c'est juste une idée ...



Ok Merci! je vais tester ça et je te redis! :-)

++
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS