Faire apparaître le nom d'un fichier image dans une page

grosbb Messages postés 4 Date d'inscription   Statut Membre Dernière intervention   -  
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
Je suis en train de créer une succession de pages pour présenter des photos ; une photo par page.
Dans chacune de ces pages j’ai 4 images :
les 3 petites flèches de navigation et la photo proprement dite (IMG src=""quot;nom-du-fichier.jpg" BORDER=0 etc…)
Je souhaite faire apparaître dans la page le nom du fichier comme référence
Ref : nom-du-fichier (de préférence sans l’extension)

Quelqu’un pourrait-il m’indiquer un code (simple) pour cela ?

Merci
A voir également:

6 réponses

Réponse 1 / 6
bg62 Messages postés 23732 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
lut;)
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
0
Réponse 2 / 6
grosbb
 
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 ;)
0
Réponse 3 / 6
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Salut,

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,
0
Réponse 4 / 6
grosbb Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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 : 
 <!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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
grosbb Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
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 :)
0
Réponse 6 / 6
grosbb Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
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… 

<!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...
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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)
0

Discussions similaires

Annuaire portable gratuit à partir d'un nom
dani26 -
Authority -

9 réponses