Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
12/10/2013, 13:29:32
(Modification du message : 16/10/2013, 22:54:24 par stefart.)
Citation :#~~~~~ 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 ?
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
12/10/2013, 13:29:32
(Modification du message : 16/10/2013, 22:54:24 par stefart.)
Citation :#~~~~~ 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 ?
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
13/10/2013, 10:38:07
(Modification du message : 18/10/2013, 18:03:30 par 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?
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
13/10/2013, 10:38:07
(Modification du message : 18/10/2013, 18:03:30 par 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?
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
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>
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
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>
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
13/10/2013, 17:15:42
(Modification du message : 13/10/2013, 17:18:58 par 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.
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
13/10/2013, 17:15:42
(Modification du message : 13/10/2013, 17:18:58 par 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.
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
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>")
}
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
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>")
}
Messages : 2,292
Sujets : 71
Inscription : Jan 2008
Réputation :
1
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.
Ouik - communication . outils numériques . design graphique
Messages : 2,292
Sujets : 71
Inscription : Jan 2008
Réputation :
1
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.
Ouik - communication . outils numériques . design graphique
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
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
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
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
Messages : 5,034
Sujets : 63
Inscription : Oct 2009
Réputation :
0
Bonjour,
c'est pas les plugins jquery qui manquent!
En cherchant un peu, tu vas certainement en trouver un qui va bien pour toi!
Messages : 5,034
Sujets : 63
Inscription : Oct 2009
Réputation :
0
Bonjour,
c'est pas les plugins jquery qui manquent!
En cherchant un peu, tu vas certainement en trouver un qui va bien pour toi!
Messages : 2,292
Sujets : 71
Inscription : Jan 2008
Réputation :
1
Des trucs nommés tooltip par exemple.
Ouik - communication . outils numériques . design graphique
Messages : 2,292
Sujets : 71
Inscription : Jan 2008
Réputation :
1
Des trucs nommés tooltip par exemple.
Ouik - communication . outils numériques . design graphique
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
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">
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
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">
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
21/10/2013, 19:25:24
(Modification du message : 21/10/2013, 19:36:44 par 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)
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
21/10/2013, 19:25:24
(Modification du message : 21/10/2013, 19:36:44 par 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)
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
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>
Messages : 66
Sujets : 9
Inscription : Apr 2013
Réputation :
0
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>
|