Javascript

Sonntag, den 29. August 2010 um 12:32 Uhr

Bildunterschriften mit jQuery

Eine Bildunterschrift ist eine sehr sinnvolle Ergänzung für viele Bilder. Es gibt jedoch mit den HTML Bordmitteln keine Möglichkeit eine Bildunterschrift zu hinterlegen. Mit einem kleinen Javascript und dem jQuery Framework lässt sich auf einfach Weise Abhilfe schaffen.

Mir scheint der semantisch beste Ansatz ist ein Script, dass aus dem Attribute longdesc des img Tags eine Bildunterschrift unter die Grafik zaubert.

Das Javascript

  1.  
  2. $(document).ready(function(){
  3.   $('img').each(function(index, element){
  4.     if($(element).attr('longdesc') != undefined){
  5.                    $(element).wrapAll('<dl style=\"width: '
  6.                    + $(element).attr('width')
  7.                    +'px\"><dt></dt><dd>'
  8.                    + $(element).attr('longdesc')
  9.                    + '</dd> </dl>');
  10.       }
  11.     }
  12.   );
  13.  
  14. });
  15.  

Wird dieses Script in eine Webseite eingebunden, wird bei allen Bildern die einen Wert im Attribut longdesc hinterlegt haben die Bildunterschrift angezeigt. Damit die Anzeige auch appetitlich wird, muss noch mit ein wenig CSS nachgewürzt werden.

Das CSS

  1.  
  2. dl {
  3.   display:block;
  4.   float:left;
  5.   margin-bottom:0;
  6.   margin-right:10px;
  7.   margin-top:0;
  8.   padding:0;
  9.   width:auto;
  10. }
  11.  
  12. dt {
  13.   display:inline;
  14. }
  15.  
  16. dd {
  17.   color:#333;
  18.   float:left;    
  19.     font-style: normal;
  20.     font-variant: normal;
  21.     font-weight: normal;
  22.     background-color: #F3F8FE;
  23.     font-size: 11px;
  24.     line-height: 1.2em;
  25.     letter-spacing: 0.05em;
  26.     text-align: left;
  27.   margin-top: 0px;
  28.   margin-left: 0px;    
  29.   border: 1px solid #999;
  30.   padding: 4px;  
  31. }
  32.  

Das Ergebnis


< Zurück