Partage

Lien vers une image

Balise img avec attribut src

Sujet résolu

4 décembre 2008 à 5:26:35

Je viens tout juste aujourd'hui de finir de lire la partie théorique
des tutoriels sur la création de site internet et je viens depuis
à peine 2 heures débuter l'essai de la création de ma première page web.
Cela fonctionne bien sauf pour toutes les insertions d'images. Je crois que je ne
n'indique pas le bon lien lorsque je me sert de la balise img pour insérer
une image avec l'attribut src. Toutes mes images (backgroung, photos, icônes, logo...)
sont localisé dans mon ordi dans: bureau/mes images/nom image.jpg ou png.
Je ne réussit à n'en ouvrir aucune lorsque je fais mes tests. Avez-vous une idée qu'elle
erreur ou oubi j'ai pu faire? Merci!

terrassier

4 décembre 2008 à 7:34:47

Salut;
Je vais essayer de t'expliquer, je prends pour exemple que l'index de ton site ainsi que ta feuille de style est dans un dossier bureau/mon_site, donc cela donne ça :

bureau/mon_site/index.html
bureau/mon_site/style.css

(Par exemple)

Donc si tu tiens à garder tes images dans le dossier bureau/mes_images, il faut que le lien pointant vers elles soient :

<img src="../mes_images/nom_images.png " alt="mon_image"/>

Il faut que tu mettes deux points pour "remonter" un dossier.
Donc je te conseille plutôt de créer un dossier image dédié au même endroit que l'index et la feuille de style de ton style,tu n'auras qu'à faire ça :

<img src="mes_images/nom_images.png" alt="mon_images" />

Donc voilà, j'espere t'avoir aidé,
Bonne journée ++
Knel

PS: Cela revient au même pour les jpg, mais je pense que tu savais pour ça

Erwan-Overseas

4 décembre 2008 à 9:35:57

oui... bien le coup de l'adresse relative...
j'avais jamais pensé en local... (d'autant plus que les différents navigateurs ont différente façon de noter l'adresse absolue...).

autre option!!!

passer tout de suite la vitesse supérieure et installer gratuitement un petit serveur local

comme ça tu aura des belles source en http

(conseil inapproprié mais pas stupide).

juju8062

4 décembre 2008 à 15:46:02

Bonjour,

j'ai éxactement le meme soucis que activ.
Je n'ai pas encore bien saisis la façon de faire des liens dans des sous dossier. J'ai réussi a créer un lien hypertexte dans un meme dossier mais dans un autre ... ben ça marche pas :D. Je suis hermetique aux liens hypertexte

Sans rire, meme le liens donner dans l'explication ne fonctionne pas chez moi.

voici le lien donner :

<p>
Voici une photo que j'ai prise lors de mes dernières vacances à Hawaii :<br />
<img src="images/hawai.jpg" alt="Photo de Hawaii" />
</p>

et voici le miens :

<p><img src="images/bob.jpeg" alt="bob l'eponge" /></p>

Je voulais donc savoir ou étais le soucis?

les images sont dans le dossier windows créer normalement ...

merci d'avance juju

ellm

4 décembre 2008 à 15:53:56

Bonjour,

Admettons que la page (test.html) dans laquelle tu as mis le lien se trouve dans un dossier "site".

Voilà à quoi doit ressembler l'arborescence pour que tu puisses voir l'image (en gras ce sont les dossiers) :

|site
|___ test.html
|___ images
|____|___ bob.jpeg

La page test.html est au même niveau que le dossier images.

juju8062

4 décembre 2008 à 16:06:36

je ne comprend pas très bien .
"site" et "image" représente "head" et "body"?
car si ce sont les dossier, l'adresse dois se trouver apres le " src=" ", donc j'avoue que c'est un peu flou la ...

Et pourquoi l'exemple ne fonctionne-t'il pas lui non plus?
Voici exactement ma premiere page :

Citation : Pas de titre

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>voici mon premier test soyez indulgent <br />je commence grace au site du zéro</p>
<P><strong>mise en place d'un saut de ligne</strong></P>
<h1> premier gros titre</h1>
<h2>deuxieme gros titre</h2>
<h3>troisieme gros titre</h3>
<p>essais d'une bulle<a href="ONPG" title="ortho-nitro-phenol-galactopyranosyde">ONPG</a></p>
<p>Voici mon mail :<a href="mailto:juju8062@live.fr">juju8062@live.fr</a>
<p>lien vers la seconde page :<a href="page2.html">page 2</a><br />

<p>
<img src="images/bob.jpeg" alt="bob l'eponge" />
</p>
</body>
</html>

edit : dsl l'arborescence ne se met pas sur le forum ... mais l'image est a un cran plus loin que les paragraphes.
Cependant, je n'ai toujours rien ...

ellm

4 décembre 2008 à 16:18:57

Euh non, je te parlais de dossiers sur ton serveur, ou de dossiers windows sur ton PC.

Sur ton PC,
- Où est enregistrée ta page HTML ?
- Où sont enregistrées tes images ?

juju8062

4 décembre 2008 à 16:22:17

je n'ai pas de serveur.

Tout est sur le pc.

les deux pages se situent dans un dossier présent sur le bureau, le dossier s'appelle dossier xhtml et les images sont dans "mes documents/mes images" ...

merci de ton aide d'ailleurs ...

ellm

4 décembre 2008 à 16:30:05

Ah bah il faudrait que tu mettes ton dossier images dans ton dossier xhtml pour que les images s'affichent correctement.

Quand on écrit src="images/bob.jpeg" ça veut dire :

1- je suis dans le dossier où se trouve la page .html (pour toi, c'est le dossier xhtml)
2- dans ce dossier, je cherche le dossier images
3- dans le dossier images, je cherche l'image bob.jpeg

Ton image ne s'affiche pas car le point 2 n'est pas vérifié. Il n'y a pas de dossier images dans ton dossier xhtml. Tout simplement.

juju8062

4 décembre 2008 à 16:37:35

rhaaa meme en déplaçant le dossier image ça ne fonctionne pas.
Je ne serais plus dispo avant ce soir.
Je te remettrais plus d'info en fonction de ce que tu me demanderas dans ton prochain post a vérifier.
bye

ellm

4 décembre 2008 à 17:01:12

On va faire un truc tout simple.

Sur ton bureau, crée un dossier "essai"
Dans ton dossier "essai", enregistre une page HTML, par exemple "visuel.html"
Dans ton dossier "essai", crée un dossier "images"
Dans ton dossier "images", mets une image (celle que tu veux, par exemple "toto.gif")

Ensuite, dans ta page html, mets ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
	<title>Testos</title>
</head>
<body>

<img src="images/toto.gif" alt="Mon image" />

</body>
</html>

Ouvre ta page avec ton navigateur (Internet Explorer, Firefox, Opéra, ou autre...).

Normalement tu dois voir ton image toto.gif !

Attention aux majuscules/minuscules pour les noms de dossiers/fichiers ou les extensions de fichiers (.jpg, et pas .JPG, etc...).
Evite les espaces et caractères spéciaux dans les noms de dossiers/fichiers.

Activ

4 décembre 2008 à 17:13:48

Merci Knel!

Pour ma part, le conseille donné à fonctionné très bien, sauf pour une chose:

Cela a fonctionné pour faire des liens vers des images ou tout simplement afficher de
images tant que le tout est programmé dans le fichier XHTML.

Cependant, ce qui ne marche toujours pas c'est de voir ma "bannière" comme "en-tête" dans le haut
de l'écran (il s'agit d'un montage graphique avec mon logo de compagnie fait par un designer).

Ma tactique choisi est de le rentrer avec la méthode proposée dans le tutorial qui nous conseille
de laisser la portion XHTML vide et de plutôt écrire nos données dans le code CSS avec(background-image).
Moi ça ne marche pas, voice la portion de mon code CSS concernant ce passage:

#en_tete
{
width: 760px;
height: 100px;
background-image: url ("Mes_images/banniere_site_web.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
}

L'image en question est bien entendu déjà localisée dans le même endroit que
l'index et la feuille de style.

Merci!

ellm

4 décembre 2008 à 17:18:46

Quand tu mets un lien vers une image dans la feuille de style, alors le point de départ pour aller chercher l'image c'est le dossier dans lequel se trouve le fichier .css

Dans quel dossier se trouve ton fichier HTML ?
Dans quel dossier se trouve ton image ?
Dans quel dossier se trouve ton CSS ?

Activ

4 décembre 2008 à 17:29:44

Je viens de me répondre moi-même!
En étant plus attentive, j'ai réalisée
que j'avais laissé un espace non requis entre url et la ().
Le tout vient d'être corrigé et fonctionne.

Merci de ton temps tout de même!

juju8062

4 décembre 2008 à 17:59:38

meme avec ton exemple ça ne donne rien ...
si il y a un soucis c'est forcement de la photo en elle même donc.
comment connait on son format? juste en glissant la souris dessus? je dois écrire jpeg en minuscule ou majuscule? faut il réenregistrer des photos dans un format spécifique peut être?

je suis complètement perdu ...

Erwan-Overseas

4 décembre 2008 à 18:57:49

bon...

à ce stade là utilisons la méthode bourrin!

vous prenez un bon navigateur de votre choix...
vous le mémorisez...
vous sélectionnez une image (au hasard celle que vous voulez)
ensuite vous faites un clik droit sur l'image et choisissez l'option "ouvrir avec" (ou choisir le programme par défaut...)
vous vous remémorez le navigateur...
vous choisissez d'ouvrir l'image avec celui ci
et vous avez une adresse...

(sachant qu'elle est différente selon les navigateurs... mais que ça aura le mérite de marché au moins sur un...)
ensuite si vous avez un serveur ou un site! la question se pose plus... l'url complète de l'image viendra à bout de vos soucis.

ellm

4 décembre 2008 à 19:25:15

Citation : juju8062

meme avec ton exemple ça ne donne rien ...
si il y a un soucis c'est forcement de la photo en elle même donc.
comment connait on son format? juste en glissant la souris dessus? je dois écrire jpeg en minuscule ou majuscule? faut il réenregistrer des photos dans un format spécifique peut être?

je suis complètement perdu ...

Comment s'appelle l'image que tu as choisie (nom + extension) ?

Si ça ne fonctionne pas avec cette image, prends une autre image.

Vas sur le net, trouve une image, fais "clic droit / enregistrer l'image sous", et enregistres là dans ton dossier "images".

robertmafuta

29 octobre 2023 à 11:08:06

Salut, je suis novice dans le codage qui peut m'aider à résoudre ce problème

définissez l'attribut src de façon à ce qu'il pointe sur l'url suivante https://online-kadea-resources.fra1.cdn.digitaloceanspaces.com/challenges-resources/relaxing-cat.jpg

AbcAbc6

29 octobre 2023 à 11:32:35

@robertmafuta Bonjour, merci de ne pas déterrer d'ancien sujet résolu pour une nouvelle question.

Merci de lire le cours HTML/CSS de ce site ainsi que la documentation MDN sur le sujet qui vous donnerons réponses à votre question.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Lien vers une image

Balise img avec attribut src

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs