Mon image ne s'affiche pas

**Jean Sympa** · 12/04/2015, 09h36

Mon image ne s'affiche pas

Je suis débutant. Je ne sais pas utiliser CODE;

J'ai placé mon fichier html dans un dossier et une image dans un sous dossier images
J'ai placé l'instruction suivante, entre les balises body

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/141102Lea.png" alt="Petite Léa" onclick="alert('C\'est Ma petite fille');"/>

L'extension de l'image est bien body.
Petite Léa s'affiche à la place de l'image.
C'est ma petite fille s'affiche dans une boîte.
Question
Pourquoi l'image ne s'affiche-t-elle pas*?
Que faut-il faire pour l'afficher*?

Avec mes remerciements
Cordialement
Papy

**headmax** · 12/04/2015, 09h41

L'extension de l'image est bien body.

Dans votre exemple il s'agit de l'extension .png, peut être votre erreur vient de là, a moins d'affichier tout le page html, votre image et a bonne endroit et le lien vers l'image et bien écrite.

**gustave02** · 12/04/2015, 09h50

bonjour
essais

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p>
	<img src="images/141102Lea.png" alt="Petite Léa" onmousedown="alert('C\'est Ma petite fille');"/>
</p>

@+gustave02

Invité · 12/04/2015, 10h51

Bonjour,
la syntaxe est correcte.

Il faut maintenant vérifier si le chemin relatif vers l'image l'est aussi.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
src="images/141102Lea.png"
src="../images/141102Lea.png"

(autre ?)

Sinon, avec le chemin absolu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

src="http://www.nom-de-ton-site.com/images/141102Lea.png"

**Jean Sympa** · 13/04/2015, 15h13

Merci à vous trois,

Le nom de l'image était différent dans le dossier images et dans l'instruction. Je l'ai copié dans le dossier images et collé dans l'instruction. J'autorise la page dans NoScript*; L'image s'affiche.

Partie 1
L'instruction placée dans mon premier message fonctionne.
Si je clique un fois, le message C'est ma petite fille apparaît une fois.
OK
Si je clique à nouveau le message devient
C'est ma première petite fille
Empêcher cette page d'ouvrir des dialogues supplémentaires
Je ne sais pas interpréter ce second message.
Partie 2
L'instruction proposée par gustave02 contient onmousedown
Si je clique sur l'image, le message C'est ma petite fille apparaît
OK
Comme précédement j'ai à l'affichage*: Empêcher cette page d'ouvrir des dialogues supplémentaires.
Je coche la case.
Je clique à nouveau, en maintenant la touche enfoncée, Une miniature de l'mage apparaît et suit les mouvements du curseur
Question
Le comportement de l'instruction est-il normal*?
Quel intérêt y a-t-il d'afficher la miniature de l'image*?
Cordialement
Papy

**gustave02** · 13/04/2015, 15h37

bonjour
c’était donc une simple erreur de nom de fichier. ca arrive.

tu utilise la boite de dialogue avec alerte donc il est normal que lorsque quelle apparait plus d'une fois on demande a l'internaute si veut ou pas avoir les alertes.

toi tu veux qu'un message qui décris ta photo apparaisse, moi je créer une fonction qui affiche un message et le fasse disparaitre sans passer par la boite alerte.
@+gustave02

je rajoute un petit exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!DOCTYPE html>
<html>
	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
	<script type="text/javascript">	
		function init(){// la fonction est appellé grace  a onload <body onLoad="init()">
			document.getElementById("texte").style.visibility = "hidden"; // efface le texte
		}
		function afficheTexte(){// quand on click sur l'image la fonction est déclenchée
			document.getElementById("texte").style.visibility = "visible"; // le texte deviens visible
			document.getElementById("texte").style.position = "absolute"; // je place le texte
			document.getElementById("texte").style.left = "100px"; // position sur axe des x
			document.getElementById("texte").style.top = "100px"; // position sur axe des y
			setTimeout("init()",3000);// au bout de 3 seconde (3000 milleme) la fonction init qui efface le texte sera appelé
			//ce n'est qu'une base tout peut etre amélioré
		}
	</script>	
	</head>
 
	<body onLoad="init()">
			<img src="images/1222Lea.png" alt="Petite Léa" onclick="afficheTexte()"/>
            <p id ="texte">C'est ma petite fille.</p>
	</body>
</html>

**Jean Sympa** · 14/04/2015, 09h54

Merci gustave02,

Je me suis mal exprimé, c'est la maîtrise des images qui m'intéresse.
Je teste ta proposition.
Je lance le script
a ) - Il apparaît une image qui déborde largement l'écran. Je ne voie qu'une partie des cheveux, mais pas de texte.

b ) -Je clique sur l'image, bouton gauche, en maintenant la touche enfoncée, il apparaît une réduction de l'image qui suit le curseur. C'est cette image qui m'intrigue. A quoi sert-elle*?

c) - Un dernier point
Si je clique sur l'image initiale, bouton droit, je sélectionne Afficher l'image. L’image apparaît, cadrée, très belle, identique à l'originale, donc normale.
Maintenant quand je clique sur le bord de l'image normale, j'ai affaire à une bascule*: je passe alternativement de l'image normale à l'image surdimensionnée.

Commentaires
C'est l’image qui suit le curseur qui m'intrigue.
Que l'affichage de l'image normale à partir du bouton droit attise ma curiosité.
Pourquoi y a-t-il plusieurs images?
Pourquoi n'affiche-t-on pas uniquement l'image normale*?

Cordialement
Papy

**gustave02** · 14/04/2015, 10h34

bonjour
trop de question tue les réponses (je pense)

donc je fait le premier point

a ) - Il apparaît une image qui déborde largement l'écran. Je ne voie qu'une partie des cheveux, mais pas de texte.

il faut que tu redimentionne ton image. si tu ne donne pas la hauteur et la largeur de l'image sur ta page l'image sera afficher avec ses dimensions d'origine.

pour ex un code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/1222Lea.png" height="300px" width="400px" alt="Petite Léa" onclick="afficheTexte()"/>

le changement par rapport a ton code de départ height="300px" width="400px" height = hauteur width = largeur.

ma première démarche quand j'ai un problème je recherche sur google la j'aurais taper "html5 image dimensions " . ce n'est pas un reproche c'est pour te montrer comment on peut trouver rapidement une solution.

http://www.w3schools.com/tags/tag_img.asp un lien utile

ok pour ce point?

@+gustave02

**Jean Sympa** · 14/04/2015, 11h08

Merci gustave02,

J'ajoute les dimensions.
L'image normale s’affiche en haut et à gauche de l'écran. Je ne vois pas de texte.

Une seule question
Je clique sur l'image, bouton gauche, je maintiens le bouton enfoncé, j'affiche la même image.
Mais, cette image est plus discrète que l'originale, assez effacée elle suit les mouvements du curseur.

Question
Quel est l’intérêt de cette image mobile*?
Comment l'utilise-t-on*?

Cordialement
Papy

NB Comment peut-on mettre en gras des mots dans les messages adressés au forum*?

**Bovino** · 14/04/2015, 11h10

C'est juste une fonctionnalité du navigateur qui t'indique que tu es en train de déplacer une image.
Si tu laisses le bouton cliqué et que tu le relâches sur le bureau, tu verras que ça permet de copier cette image sur ton bureau.

**gustave02** · 14/04/2015, 11h59

tu dis L'image normale s’affiche en haut et à gauche de l'écran. Je ne vois pas de texte. moi quad je clic (appuis sur bouton gauche souris puis relachée ) j"ai le texte qui s'affiche.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!DOCTYPE html>
<html>
	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
	<script type="text/javascript">	
		function init(){// la fonction est appellé grace  a onload <body onLoad="init()">
			document.getElementById("texte").style.visibility = "hidden"; // efface le texte
		}
		function afficheTexte(){// quand on click sur l'image la fonction est déclenchée
			document.getElementById("texte").style.visibility = "visible"; // le texte deviens visible
			document.getElementById("texte").style.position = "absolute"; // je place le texte
			document.getElementById("texte").style.left = "100px"; // position sur axe des x
			document.getElementById("texte").style.top = "100px"; // position sur axe des y
			setTimeout("init()",3000);// au bout de 3 seconde (3000 milleme) la fonction init qui efface le texte sera appelé
			//ce n'est qu'une base tout peut etre amélioré
		}
	</script>	
	</head>
 
	<body onLoad="init()">
			<img src="images/1222Lea.png" height="300px" width="400px" alt="Petite Léa" onclick="afficheTexte()"/>
            <p id ="texte">C'est ma petite fille.</p>
	</body>
</html>

je te remets le code de toute la page t'as plus qu'un copier coller a faire.

enfin tu demande NB Comment peut-on mettre en gras des mots dans les messages adressés au forum*?

tu sélectionne le texte avec(souris enfoncer sur texte + déplacement le texte sélectionne et souligné en bleu et tu clic sur le bouton b coin haut gauche de l'éditeur de texte.

ok? pour tout?

@+gustave02

**Jean Sympa** · 14/04/2015, 14h44

Merci gustave02,

Je viens de me faire avoir une fois de plus. Le texte s'affiche bien, en noir, et disparaît au bout de trois secondes. Mais, il n'y a pas assez de contraste entre le texte et l'image. Pour bien l'apercevoir il faudrait changer sa couleur. Comment*?

Cordialement
Papy

J'utilise Writer, le traitement de texte de LibreOffice. Je sais traiter les problèmes de présentation dans Writer. Les modifications n’apparaissent pas dans le message du forum.

Mon image ne s'affiche pas

JavaScript

Discussions similaires

Partager

Partager