[stefart]

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.9
#~ Url du site :
#~ Hébergeur / Soft : 1and1
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11
#~ Installed Modules:
#~ CMSMailer: 5.2.1
#~ CMSPrinting: 1.0.2
#~ FileManager: 1.4.0
#~ MenuManager: 1.8.2
#~ MicroTiny: 1.2.3
#~ ModuleManager: 1.5.5
#~ News: 2.12.7
#~ ThemeManager: 1.1.7
#~ CGExtensions: 1.31
#~ Uploads: 1.14.3
#~ EnhancedXSPF: 0.6.0
#~ Gallery: 1.6.1
#~ FormBuilder: 0.7.4
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ output_compression:
#~ max_upload_size: 40000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.4.20
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 90M
#~ max_execution_time: 50000
#~ output_buffering: 0
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 8M
#~ upload_max_filesize: 40M
#~ session_save_path: /tmp (1777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.1.71
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,

Je souhaite mettre la balise alt de img en forme pour l'affichier comme une legende sous les photos.


j'ai ce code

Code :

[== CSS ==]
div#content p img
{
border: 0;
alt-visibility: visible; /* afficher texte alternatif d'image*/
alt-position: bottom; /* ou l'afficher par rapport à l'image */
alt-style: italic #red; /* le style de la légende de l'image */
}

mais il n'affiche rien ?

[stefart]

Je voudrais utiliser le contenu de la balise alt de img pour mettre en legende des photos. Soit sous ou sur l'image avec une mise en forme.

voici le code Html

Code :

[== HTML ==]
<div id="content"><p>
    <img src="image.jpg" alt="legende photo A"></p>
</div>

voici le css

Code :

[== CSS ==]
div#content p img {
alt-visibility: visible;
    alt-position: bottom;
    alt-style: bold #green;
}

j'ai testé aussi le css comme ca :

Code :

[== CSS ==]
div#content p img[alt] {
    visibility:visible;
    position: bottom;
    style: bold #green;
}

Mais dans les 2 Css rien ne s'affiche.

je me demande si je ne suis pas entreint de me planter de solution pour obtenir le resultat que je souhaite.

Deja si c'est possible?

[bess]

la balise alt n'a jamais été prévue en HTML pour faire une légende, c'est alt pour alternative : un texte alternatif à afficher si l'image est introuvable

<div id="content">
<img src="image.jpg" alt="photo A">
<span class='legende'>Legende photo A</span>
</div>

[stefart]

ok merci,
je me doutais bien que ca collerais pas.
Mais il y a bien une solution pour utiliser l'attibut alt ou title de img, pour le mettre en legende? et en suite le mettre en forme en Css.

Parce que j'ai 250 photos aumoins avec des legende a ajouter, et ca risque de prendre du temps a faire pour chaqu'une.

[bess]

Jquery ou toute autre lib javascript pourrait faire du post-traitement efficacement sur le client.

du genre


foreach (imgs as img){
variable = $('img').att('alt');
$('img').after().html("<span variable ...</span>")
}

[Ouik]

Il serait largement préférable d'utiliser les nouveaux HTML5 <figure> et <figcaption> pour ça. http://www.alsacreations.com/article/lir...ption.html

D'autre part, l'attribut alt est là en alternative à l'image, soit si elle ne s'affiche pas, soit surtout pour les personnes aveugles qui ne voient pas l'illustration. Mais s'il faut qu'il soit toujours présent, il ne faut pas remplir systématiquement l'attribut, il doit être signifiant et là uniquement s'il est utile à la compréhension de la page.

[stefart]

Bonsoir et merci de vos reponse,

Les solutions Jquery + Css me semble bien. Malheureusement je ne suis pas fort en dev jquery. Je ne suis pas sur d'obtenir un resultat...
je sais que c'est beaucoup demander mais avez vous un script complet pour le post-traitement. Je me changerai du CSS.


Merci

[jissey]

Bonjour,
c'est pas les plugins jquery qui manquent!
En cherchant un peu, tu vas certainement en trouver un qui va bien pour toi!

[Ouik]

Des trucs nommés tooltip par exemple.

[stefart]

Oui en effet Tooltip ressemble bien a ce que je souhaite obtenir, si bien sur le script permet de prendre le contenu de la balise ALT de IMG de toutes les images contenu dans <div id="content">

[stefart]

Voila je pense avoir trouvé le script qui conviendrait ici

Code :

[== JavaScript ==]
// Permet de générer dynamiquement une tooltip
$("#demo_9").simpletooltip({
                customTooltip: function(target){
                    return '<p style="width:200px;height:50px;margin:0;padding:10px;background:#fff;border:1px solid #000;">Texte de l\'élément survolé :<br /> "'+ $(target).text() +'" </p>';
                },

A présent il faudrait que l'effet s'applique a chaque image qui possèdent une légende (alt) ou (title)

[bess]

foreach de Jquery comme déjà suggéré http://www.cmsmadesimple.fr/forum/viewto...032#p37032

[stefart]

Ok merci pour le code mais je ne sais franchement pas comment le finaliser pour qu'il fonctionne?

Code :

[== JavaScript ==]
<script type="text/javascript">
$(function(){
foreach (imgs as img){
  variable = $('img').att('alt');
  $('img').after().html("<p id='legend'>variable</p>")
}
);
</script>

[bess]

tu as pris le temps de lire la doc de Jquery ?

https://duckduckgo.com/?q=jquery+foreach