Faire apparaître le nom d'un fichier image dans une page
Fermé
grosbb
Messages postés
4
Date d'inscription
samedi 4 mars 2017
Statut
Membre
Dernière intervention
14 mars 2017
-
10 mars 2017 à 19:56
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 14 mars 2017 à 12:00
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 14 mars 2017 à 12:00
A voir également:
- Faire apparaître le nom d'un fichier image dans une page
- Supprimer une page word - Guide
- Fichier rar - Guide
- Apparaitre hors ligne instagram - Guide
- Le fichier à télécharger est la nouvelle note de service de votre entreprise. importez ce fichier dans le bon dossier sur l'espace pix cloud. donnez à ce fichier les mêmes droits d'accès que les autres notes de service. ✓ - Forum Windows
- Fichier host - Guide
6 réponses
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
11 mars 2017 à 12:09
11 mars 2017 à 12:09
lut;)
tu peux soit l'inscrire en 'dur' dans un premier temps ET ensuite respecter aussi les standards du WEB ...
tu peux soit l'inscrire en 'dur' dans un premier temps ET ensuite respecter aussi les standards du WEB ...
https://www.google.fr/search?q=balise+alt&ie=utf-8&oe=utf-8&client=firefox-b&gfe_rd=cr&ei=s9rDWKq0I8iA8Qe77YDIBA
Bonjour
(Si je comprends bien votre réponse...)
La balise "Alt" est pour faire apparaître son contenu au passage de la souris sur l'image (ou remplacer si l'image n'apparaît pas).
Quant au "en "dur"", en clair ça revient à faire du copier/coller à chaque page...
Merci quand-même ;)
(Si je comprends bien votre réponse...)
La balise "Alt" est pour faire apparaître son contenu au passage de la souris sur l'image (ou remplacer si l'image n'apparaît pas).
Quant au "en "dur"", en clair ça revient à faire du copier/coller à chaque page...
Merci quand-même ;)
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
13 mars 2017 à 12:37
13 mars 2017 à 12:37
Salut,
Une solution possible avec un peu de js :
Bonne journée,
Une solution possible avec un peu de js :
<!-- html --> <img id="image" src=""quot;test.png" /> <div id="nom-image"></div>
/* javascript */
function baseName(str) {
var base = new String(str).substring(str.lastIndexOf('/') + 1);
if(base.lastIndexOf(".") != -1)
base = base.substring(0, base.lastIndexOf("."));
return base;
}
document.getElementById('nom-image').innerHTML = baseName(document.getElementById('image').src);
Bonne journée,
grosbb
Messages postés
4
Date d'inscription
samedi 4 mars 2017
Statut
Membre
Dernière intervention
14 mars 2017
13 mars 2017 à 14:48
13 mars 2017 à 14:48
Merci pour votre réponse. Mais étant un simple bricoleur j’ai un peu de mal. J’ai inséré le code tel que j'imagine qu’il fallait le faire; mais cela ne marche pas.
Pour bien faire comprendre ce que j’ai fait, j’ai fait une page au plus simple, affichant une photo nommée « 01.jpg » centrée en horizontal et avec son nom (« 01.jpg » ou « 01») juste en dessous.
J’en ai fait une capture d’écran ci-jointe.
Pouvez-vous me dire ce qui n’est pas bon ?
Merci à vous
Pour bien faire comprendre ce que j’ai fait, j’ai fait une page au plus simple, affichant une photo nommée « 01.jpg » centrée en horizontal et avec son nom (« 01.jpg » ou « 01») juste en dessous.
J’en ai fait une capture d’écran ci-jointe.
Pouvez-vous me dire ce qui n’est pas bon ?
Merci à vous
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
13 mars 2017 à 15:50
13 mars 2017 à 15:50
Le problème vient du fait que le javascript est actuellement exécuté avant le chargement complet de la page, l'instruction document.getElementById('nom-image') essaye donc de récupérer un élément qui n'est pas encore chargé ce qui provoque une erreur (tu peux voir les erreurs js dans la console de développement de ton navigateur).
Une solution simple est de déplacer le javascript juste avant la fermeture de la balise body.
Au passage quelques remarques :
- tu peux passer au html5 pour simplifier l'écriture de ton code html
- préfère copier directement le code sur le forum avec la coloration syntaxique via le bouton "<>" plutôt qu'une impression d'écran, c'est plus facile à visualiser et à reprendre
Exemple :
Une solution simple est de déplacer le javascript juste avant la fermeture de la balise body.
Au passage quelques remarques :
- tu peux passer au html5 pour simplifier l'écriture de ton code html
- préfère copier directement le code sur le forum avec la coloration syntaxique via le bouton "<>" plutôt qu'une impression d'écran, c'est plus facile à visualiser et à reprendre
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img id="image" src="test.png" />
<div id="nom-image"></div>
<script>
function baseName(str) {
var base = new String(str).substring(str.lastIndexOf('/') + 1);
if(base.lastIndexOf(".") != -1)
base = base.substring(0, base.lastIndexOf("."));
return base;
}
document.getElementById('nom-image').innerHTML = baseName(document.getElementById('image').src);
</script>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
grosbb
Messages postés
4
Date d'inscription
samedi 4 mars 2017
Statut
Membre
Dernière intervention
14 mars 2017
13 mars 2017 à 17:55
13 mars 2017 à 17:55
Il y avait un message d'erreur ce genre...
En tout cas avec le code java avant la fermeture de Body ça marche !! Je prends note soigneusement de tout ça...
Donc un grand merci pour ça et les quelques remarques annexes...
Allez! Ne soyons pas radin! 1000 Grands Mercis et très bonne journée à toi :)
En tout cas avec le code java avant la fermeture de Body ça marche !! Je prends note soigneusement de tout ça...
Donc un grand merci pour ça et les quelques remarques annexes...
Allez! Ne soyons pas radin! 1000 Grands Mercis et très bonne journée à toi :)
grosbb
Messages postés
4
Date d'inscription
samedi 4 mars 2017
Statut
Membre
Dernière intervention
14 mars 2017
14 mars 2017 à 11:49
14 mars 2017 à 11:49
Re bonjour à tous et à toi Pitet
Je m’aperçois maintenant que j’ai besoin de faire la même chose avec les contenus d’au moins deux des balises META.
J’ai bien essayé de refaire le coup avec « id= "..." » puis « div id="..." » là où où je veux faire apparaître le contenu (et en adaptant les références « ‘nom-image’ » et « ‘image’ » dans le code à la fin) mais ça ne marche pas évidemment… Pourriez-vous encore m’aider là-dessus ?
Par exemple dans ce cas simple…
Merci d'avance...
Je m’aperçois maintenant que j’ai besoin de faire la même chose avec les contenus d’au moins deux des balises META.
J’ai bien essayé de refaire le coup avec « id= "..." » puis « div id="..." » là où où je veux faire apparaître le contenu (et en adaptant les références « ‘nom-image’ » et « ‘image’ » dans le code à la fin) mais ça ne marche pas évidemment… Pourriez-vous encore m’aider là-dessus ?
Par exemple dans ce cas simple…
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>TITRE</TITLE>
<META NAME="Description" CONTENT="RESUME">
<META NAME="Keywords" CONTENT="">
</HEAD>
<BODY>
Ici je voudrais faire apparaître le contenu de la balise TITLE c'est à dire « TITRE »…
<BR>
…Et ici le contenu de la balise META NAME="Description" c'est à dire « RESUME »
<script>
…
</script>
</BODY>
</HTML>
Merci d'avance...
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
14 mars 2017 à 12:00
14 mars 2017 à 12:00
A partir de ton exemple :
- ajouter un attribut id unique pour chaque balise meta
- créer un div un id unique pour chaque meta
- en javascript, récupérer la valeur de l'attribut content des balises meta (document.getElementById('meta-page-title').content) et les insérer dans les div correspondant (via innerHTML)
- ajouter un attribut id unique pour chaque balise meta
- créer un div un id unique pour chaque meta
- en javascript, récupérer la valeur de l'attribut content des balises meta (document.getElementById('meta-page-title').content) et les insérer dans les div correspondant (via innerHTML)
