PDA

Afficher la version complète : [Réglé] html: zut, c'est où que je me goure???



moniroje
17/12/2014, 16h43
Bonjour,
je mets ici parce que je ne sais pas où mettre sinon...
html, c'est un langage, alors...
Alors voilà: je suis en train d'apprendre à insérer une image dans une page web.
J'ai bien mis l'image et l'imagette dans le dossier qui contient ma page html; ah oui, aussi je leur ai donné un nom rien que en minuscules et ceci foire:

<a href="/tour_eiffel.jpg"> <img src="/tour_eiffel_mini.jpg" alt="Tour Eiffel en 2005" title="Clic pour agrandir"/> </a>
eh bien, 1: j'ai pas l'imagette dans ma page et 2) quand je clique sur le lien Tour Eiffel en 2005 qui aurait dû être une imagette, grrr, ça m'ouvre la page:

Fichier introuvable
Firefox ne peut trouver le fichier à l'adresse /tour_eiffel.jpg.
J'ai aussi essayé avec l'adresse absolue... bof!!!

Tiens, les /tour_eiffel, je les change en tour_eiffel => idem!

barbe-sauvage
17/12/2014, 18h15
Il faut se servir d'1 onclick :
soit directement sur l'img:


<img src="tour_eiffel_mini.jpg" alt="Tour Eiffel en 2005" title="Clic pour agrandir" onclick="document.images[0].src='tour_eiffel.jpg'" />

soit sur le href:


<a onclick="javascript:document.images[1].src='tour_eiffel.jpg';">
<img src="tour_eiffel_mini.jpg" alt="Tour Eiffel en 2005" title="Clic pour agrandir" />
</a>


Si tu mets les 2 img ds une même page, remarques les 2 images[num] différents.
C'est possible aussi en css, mais peut-être pas avec 1 click.

Nuke-Refugee
17/12/2014, 18h20
Mieux vaut éviter le JavaScript lorsque celui-ci n'est pas nécessaire... Et là il n'y en a vraiment pas besoin. Voilà ton problème :



<a href="/tour_eiffel.jpg">

Le slash sous-entend que la destination de ton lien - et même chose dans la balise img - est à la racine de ton hébergement. Or tu sembles dire que tu mets tes images dans un dossier spécifique... A supposer que tes images soient dans /images tu as le choix entre :



<a href="/images/tour_eiffel.jpg">

- là pour un chemin absolu, en partant de la racine donc... Ou encore :



<a href="images/tour_eiffel.jpg">

qui là est un chemin relatif depuis l'endroit où se trouve la page sur laquelle est le lien.
Idem pour la balise img.

Et si la page et l'image sont dans le même dossier alors tu fais exactement comme tu avais fait précedemment, mais sans le slash.

Seb.

PS évite les tirets bas dans les noms de tes fichiers. Google voit les tirets normaux comme des séparateurs et va donc reconnaître les deux mots, mais ce n'est pas le cas avec des tirets bas.

barbe-sauvage
17/12/2014, 19h31
Tout en CSS (mais sans click) :


<style type="text/css">
#changeimg:hover:before {display:block;}
#changeimg:before{
position:absolute;
display:none;
content: url('tour_eiffel.jpg');
}
</style>
</head>
<body>
<a href="autrePage.htm" id="changeimg"><img src="tour_eiffel_mini.jpg" alt="Tour Eiffel en 2005" title="Clic pour agrandir" /></a>

pas sûr que le :before fonctionne sur tous les navigateurs

Antoine
17/12/2014, 19h44
Salut,



Et si la page et l'image sont dans le même dossier alors tu fais exactement comme tu avais fait précedemment, mais sans le slash.

+1 (dans <a> et dans <img>)

moniroje
17/12/2014, 23h31
@ barbe-sauvage: sans doute mais dans mon apprentissage, je ne suis pas
encore arrivé là. Donc je vais essayer de suivre Nuke

@ Nuke-Refugee: image & imagette sont dans le répertoire
/Mesdocs/Informatique/tuto/html025
répertoire qui contient les fichiers tour-eiffel-mini.jpg tour-eiffel.jpg et
html025.html et style.css (les tirets-bas ayant été remplacés par des tirets)
2840
ce pourquoi j'avais écrit les chemins relatifs: /tour_eiffel.jpg et
/tour_eiffel_mini.jpg.
La page et les images étant dans le même dossier (dossier html02), j'avais
aussi essayé sans le slash et ça n'avait pas marché... Tiens, pour vériff, je
recommence sans les slashs: ben oui, 1°) pas d'imagette dans le texte mais le
lien Tour Eiffel en 2005 que si je clique dessus ça fait
2°)
Fichier introuvable
Firefox ne peut trouver le fichier à l'adresse
/Mesdocs/Informatique/tuto/html025/tour-eiffel.jpg.
Tiens, Firefox met le chemin complet, le absolu; donc mon chemin relatif est
bon....alors c'est quoi qui foire??? je regarde bien les noms des fichiers; pas
d'espace, tout est OK... semble OK... puisque ça shit!
Cette fois-ci, vais essayer en créant un dossier images où je vais mettre
dedans mes deux images. Sans le slash devant images: toujours pareil. Avec le
slahs devant images: idem à ceci près que Firefox n'écrit pas le chemin complet.
Bon, je remets comme avant, sans le dossier images....

moniroje
17/12/2014, 23h36
@ barbe-sauvage: sans doute mais dans mon apprentissage, je ne suis pas
encore arrivé là. Donc je vais essayer de suivre Nuke

@ Nuke-Refugee: image & imagette sont dans le répertoire
/Mesdocs/Informatique/tuto/html025
répertoire qui contient les fichiers tour-eiffel-mini.jpg tour-eiffel.jpg et
html025.html et style.css (les tirets-bas ayant été remplacés par des tirets)
2841
ce pourquoi j'avais écrit les chemins relatifs: /tour_eiffel.jpg et
/tour_eiffel_mini.jpg.
La page et les images étant dans le même dossier (dossier html02), j'avais
aussi essayé sans le slash et ça n'avait pas marché... Tiens, pour vériff, je
recommence sans les slashs: ben oui, 1°) pas d'imagette dans le texte mais le
lien Tour Eiffel en 2005 que si je clique dessus ça fait
2°)
Fichier introuvable
Firefox ne peut trouver le fichier à l'adresse
/Mesdocs/Informatique/tuto/html025/tour-eiffel.jpg.
Tiens, Firefox met le chemin complet, le absolu; donc mon chemin relatif est
bon....alors c'est quoi qui foire??? je regarde bien les noms des fichiers; pas
d'espace, tout est OK... semble OK... puisque ça shit!
Cette fois-ci, vais essayer en créant un dossier images où je vais mettre
dedans mes deux images. Sans le slash devant images: toujours pareil. Avec le
slahs devant images: idem à ceci près que Firefox n'écrit pas le chemin complet.
Bon, je remets comme avant, sans le dossier images....

Antoine
17/12/2014, 23h43
Fichier introuvable
Firefox ne peut trouver le fichier à l'adresse
/Mesdocs/Informatique/tuto/html025/tour-eiffel.jpg.


T'as un dossier Mesdocs à la racine ? C'est la même partition ? T'as essayé depuis ton home avec des chemins relatifs (sans slash au début) ?

Que renvoie :

ls -l /Mesdocs/Informatique/tuto/html025/tour-eiffel.jpg
?

moniroje
17/12/2014, 23h56
hiiii, Antoine!!!
Ben disons que j'ai une partition /Mesdocs où je mets mes persos qui sont accessibles par les différents OS que j'ai sur mon PC; actuellement Suse 12.3 et Debian-sid.
Les /home de ces différents OS, je n'y mets jamais les pieds... sinon pour dégoter quelque fichier caché?

Tiens!!! surprise!!! la commande que tu proposes donne ceci:

alain@Siderante:~$ ls -l /Mesdocs/Informatique/tuto/html025/tour-eiffel.jpg
ls: impossible d'accéder à /Mesdocs/Informatique/tuto/html025/tour-eiffel.jpg: Aucun fichier ou dossier de ce type

et pourtant, quand je clic-clic sur ce fichier, gwenview le voit et l'ouvre...

Antoine
18/12/2014, 00h23
hiiii, Antoine!!!
Ben disons que j'ai une partition /Mesdocs où je mets mes persos qui sont accessibles par les différents OS que j'ai sur mon PC; actuellement Suse 12.3 et Debian-sid.
Les /home de ces différents OS, je n'y mets jamais les pieds... sinon pour dégoter quelque fichier caché?

Tiens!!! surprise!!! la commande que tu proposes donne ceci:

alain@Siderante:~$ ls -l /Mesdocs/Informatique/tuto/html025/tour-eiffel.jpg
ls: impossible d'accéder à /Mesdocs/Informatique/tuto/html025/tour-eiffel.jpg: Aucun fichier ou dossier de ce type

et pourtant, quand je clic-clic sur ce fichier, gwenview le voit et l'ouvre...

Je te propose qu'on y aille pas à pas pour voir où ça cloche, fais voir :


ls -l /
ls -l /Mesdocs/
etc.
ls -l /Mesdocs/Informatique/tuto/html025/


Ou bien avec Dolphin, quand t'es dans le dossier html025, fais ctrl+L pour voir le chemin exact.

moniroje
18/12/2014, 11h30
un truc, qu'en penses-tu??? J'ai enregistré les images avec gimp; puis,
avec Dolphin, jes ai renommés; peut-être ça qui n'est pas bien???
Bon, je fais comme tu dis:

alain@Susette:~> ls -l
total 44
drwxr-xr-x 2 alain users 4096 21 nov. 08:15 bin
drwxr-xr-x 2 alain users 4096 21 nov. 08:43 Bureau
drwxr-xr-x 2 alain users 4096 21 nov. 08:43 Documents
drwxr-xr-x 2 alain users 4096 21 nov. 08:43 Images
drwxr-xr-x 2 alain users 4096 21 nov. 08:43 Modèles
drwxr-xr-x 2 alain users 4096 21 nov. 08:43 Musique
drwxr-xr-x 2 alain users 4096 21 nov. 08:43 Public
drwxr-xr-x 2 alain users 4096 21 nov. 08:15 public_html
drwxr-xr-x 4 alain users 4096 24 nov. 11:19 Qt
drwxr-xr-x 2 alain users 4096 26 nov. 14:50 Téléchargements
drwxr-xr-x 2 alain users 4096 21 nov. 08:43 Vidéos
Apparemment, cet ls-l montre le contenu de mon home. Ah oui, hier, j'étais en
Debian-sid; aujourd'hui, je suis en Suse; mais j'ai essayé, en Suse aussi, j'ai
le même problème. Donc là, on voit mon /home qui ne me sert que lorsque je
programme en Qt. Tiens, faudra que je nettoie ce /home; ya plein de répertoires
qui me sont inutiles...

alain@Susette:~> ls -l /Mesdocs/
total 1048
drwxr-xr-x 3 alain users 4096 4 déc. 15:31 20141127-Paypal_fichiers
drwxrwxrwx 14 alain users 4096 22 juil. 15:31 Administration
drwxrwxrwx 2 alain users 4096 25 déc. 2008 Blagues
-rw-r--r-- 1 alain 1000 38101 19 juin 10:20 ChemisesTailles.png
drwxrwxrwx 5 alain users 4096 20 sept. 12:08 Connaissances
-rw-r--r-- 1 alain users 3607 14 déc. 23:11 contacts.vcf
drwxrwxrwx 2 alain users 81920 19 nov. 14:43 Diaporama
-rw-r--r-- 1 alain users 70465 30 sept. 13:35 Dia_xfce
-rw-r--r-- 1 alain 1000 25349 17 déc. 22:37 html025.jpg
drwxrwxrwx 4 alain users 4096 20 avril 2014 Imagerie
drwxrwxrwx 7 alain users 4096 19 juil. 14:41 Images
drwxrwxrwx 10 alain users 4096 27 nov. 18:09 Informatique
drwxr-xr-x 2 alain users 4096 24 nov. 14:40 Knotes
drwxrwxrwx 4 alain users 4096 25 oct. 2013 Litterature
drwxrwxrwx 2 root root 16384 28 janv. 2011 lost+found
drwxr-xr-x 2 alain 1000 4096 23 sept. 16:01 Maison
drwxrwxrwx 2 alain users 4096 6 mai 2012 Musique
-rw-r--r-- 1 alain users 212516 18 déc. 10:07 NGC 7331.jpg
-rw-r--r-- 1 alain 1000 111620 7 déc. 05:51 Paypal141127.jp2
-rw-r--r-- 1 alain 1000 168736 7 déc. 05:50 Paypal141127.png
-rw-r--r-- 1 alain users 77882 4 déc. 15:44 Paypal-souris.jpg
drwxrwxrwx 5 alain users 4096 15 déc. 13:14 Relations
drwxrwxrwx 4 alain users 4096 6 août 11:06 Sauvegardes
-rwxrwxrwx 1 alain 1000 0 24 oct. 2013 texte02-movies1
-rwxrwxrwx 1 alain 1000 180501 27 nov. 2012 trompe-l'oeil.gif
drwxrwxrwx 2 alain users 4096 11 sept. 2008 Videos
drwxrwxrwx 4 alain users 4096 6 mai 2012 Voiture
Puis:

alain@Susette:~> ls -l /Mesdocs/Informatique/tuto/html025/
total 92
-rw-r--r-- 1 alain 1000 13057 17 déc. 22:38 html025.html
-rw-r--r-- 1 alain 1000 223 13 déc. 23:25 style.css
-rwxrwxrwx 1 alain 1000 65260 21 févr. 2006 tour-eiffel.jpg
-rw-r--r-- 1 alain 1000 6747 17 déc. 11:33 tour-eiffel-mini.jpg
alain@Susette:~>
Ben là, on les voit, mes images à insérer.

Nuke-Refugee
18/12/2014, 13h26
ce pourquoi j'avais écrit les chemins relatifs: /tour_eiffel.jpg et
/tour_eiffel_mini.jpg.

Fichier introuvable
Firefox ne peut trouver le fichier à l'adresse
/Mesdocs/Informatique/tuto/html025/tour-eiffel.jpg.


Es-tu bien sûr de ne pas t'emmêler entre tiret bas et tiret normal ?

prof01
18/12/2014, 14h24
Vérifié que lors du renomage tu n'ai pas laissé d'espace devant le nom. (du style :
\xxx\zzz\ tour-eiffel.jpg au lieu de \xxx\zzz\tour-eiffel.jpg

Cela m'est déjà arrivé avec des musiques avec un raspberry et j'ai renommé les fichiers. Le système me disait que les fichiers étaient introuvables. Après renommage sans espace devant, le problème était réglé.

Si ça peut aider.

moniroje
18/12/2014, 16h35
prof01 doit avoir raison: j'ai renommé mes fichier tour-eiffel.jpg et
tour-eiffel-mini.jpg en eiffel.jpg et eiffel-mini.jpg. Je lance mon html avec
vigueur et... ô surprise!!! sur ma page web, l'imagette avec la Tour Eiffel et
quand je clique dessus, houla!!! la Tour Eiffel sur tout mon écran.
Donc, à tous les coups, devait y avoir un blanc camouflé pour me faire croire
que je n'avais rien compris à ma leçon...
Bon, vais pouvoir avancer. Merci les gars!!!

Nuke-Refugee
18/12/2014, 16h56
De rien.

Antoine
18/12/2014, 18h06
Donc, à tous les coups, devait y avoir un blanc camouflé pour me faire croire
que je n'avais rien compris à ma leçon...

C'est même certain ;) ça se voit sur le ls (un espace devant tour-eiffel et tour-eiffel-mini) :




alain@Susette:~> ls -l /Mesdocs/Informatique/tuto/html025/
total 92
-rw-r--r-- 1 alain 1000 13057 17 déc. 22:38 html025.html
-rw-r--r-- 1 alain 1000 223 13 déc. 23:25 style.css
-rwxrwxrwx 1 alain 1000 65260 21 févr. 2006 tour-eiffel.jpg
-rw-r--r-- 1 alain 1000 6747 17 déc. 11:33 tour-eiffel-mini.jpg
alain@Susette:~>


À+