Webbdesign

Automatiska bildtexter med JavaScript och CSS

2007-04-07 01:13 #0 av: johan

Med några enkla knep kan du få bilderna på din hemsida att bli ännu snyggare och automatiskt visa bildtexter.

Exempel på hur bildtexterna kan se ut.När jag tycker hemsidor vill jag behöva göra så lite arbete som möjligt. Tråkigast av allt är att upprepa samma sak om och om igen. Med lite CSS och JavaScript kan jag med ett helt vanlig IMG-element skapa snygga bildtexter, lägga till skuggor eller egentligen vad jag vill.

Det finns många varianter på script som detta. Det är ett utmärkt exempel på hur man kan använda JavaScript och DOM Scripting för att göra små förbättringar av sidan dynamiskt.

I mitt exempel kommer en bildtext lägga sig under bilden. Bilden och bildtexten kommer dessutom få en skugga under sig.

HTML-koden är väldigt enkel. Det är ett helt vanlig IMG-element.

<img src="Images/vanja.jpg" alt="Helidoggen Vanja solar på trappan"

         title="Även en helidog måste vila ibland"

         style="width: 300px; height: 300px;" class="ImageWithCaption" />

 

Attributet "title" används för att bestämma bildtexten under bilden. Titel-attributet ska inte blandas ihop med alt-attributet. Alt-attributet är en beskrivning av vad bilden föreställer och ska vara en hjälp för synskadade eller t ex sökmotorer. Bildtexten behöver däremot inte beskriva bilden utan svarare vara ett komplement till bilden.

Jag har även tilldelat bilden en css-klass. Det är med denna klass som jag i mitt JavaScript kommer kunna veta vilka bilder som ska fixas till och få bildtexter. Bilden bör också ha en bestämd bredd och höjd.

JavaScriptet kommer hitta alla bilder med css-klassen ImageWithCaption, skapa ett DIV-element runt bilden och ett P-element efter bilden. Bredden från bilden och css-klassen ImageWithCaption kommer sättas på DIV-elementet.

Den automatiskt genererade HTML-koden kommer att se ut så här:

<div style="width: 300px;" class="ImageWithCaption">

   <img src="Images/vanja.jpg" alt="Helidoggen Vanja solar på trappan"

      title="Även en helidog måste vila ibland"

      style="width: 300px; height: 300px;" class="" />

   <p>Även en helidog måste vila ibland</p>

</div>

 

Utseendet på DIV-elementet, bilden och bildtexten kan jag bestämma med CSS. I detta exempel kommer jag låta DIV-elementet få en skugga, som jag förberett som en bakgrundsbild.  Jag kommer att ha lite utrymme mellan bilden och skuggan. Bildtexten kommer att ligga centrerad under bilden.

Funktion - JavaScript

Nu har vi kommit till JavaScriptet. Det gör inget konstigt:

  1. Hitta alla IMG-element som har klassen ImageWithCaption
  2. Loopa igenom alla funna bilder
  3. Skapa ett DIV-element
  4. Sätta klassen ImageWithCaption på DIV-elementet
  5. Lägga till DIV-elementet till sidan precis innan bilden
  6. Lägga till bilden som barn till DIV-elementet
  7. Skapa ett P-element för bildtexten
  8. Hämta bildens title-attribut och sätta som text i P-elementet
  9. Lägga till P-elementet som barn till DIV-elementet
  10. Sätta bildens bredd som bredd på DIV-elementet (så att inte DIV-elementet är lika bred som sidan/föräldern)
  11. Ta bort klassen ImageWithCaption från bilden.
  12. Se till att scriptet körs när sidan har laddat klart

Så här ser Javascriptet ut:

function makeImageCaption()

{

   var imageArray = getElementsByClassName("ImageWithCaption", "img");

   for(var i = 0; i < imageArray.length; i++)

   {

      var container = document.createElement("div");

     

      container.className = "ImageWithCaption";

      imageArray[i].parentNode.insertBefore(container, imageArray[i]);

      container.appendChild(imageArray[i]);

     

      if(imageArray[i].getAttribute("title") != "")

      {

         var caption = document.createElement("p");

         caption.appendChild(

           document.createTextNode(

              imageArray[i].getAttribute("title")));

         container.appendChild(caption);

      }

     

      container.style.width = imageArray[i].style.width;

      removeClassName(imageArray[i], "ImageWithCaption");

   }

}

 

addLoadEvent(makeImageCaption);

 

JavaScriptet har jag sparat i en egen fil som fick namnet ImageCaption.js. Denna fil länkar jag in på alla HTML-sidor som ska kunna få bildtexter.

Scriptet använder några funktioner som vi också behöver lägga med i sidan. Först och främst den oumbärlige funktionen getElementsByClassName. Denna funktion hittar alla element som har en viss CSS-klass. Den här definitivt bland min fem främst JavaScript-favoriter och borde varit inbyggd från början.

Utöver getElementsByClassName använder jag funktionen removeClassName. Denna tar bort en bestämd klass från ett element. IMG-elementet kan mycket väl ha fler än en klass, därför måste vi vara lite försiktiga och artiga innan vi tar bort för mycket.

Slutligen så använder jag den absolut vanligaste lilla tillägget som absolut borde funnits inbyggt. Funktionen addLoadEvent går helt enkelt inte att vara utan.

Alla dessa funktioner (plus en addClassName) har jag lagt i en egen JavaScript-fil som jag kan använda i alla mina projekt.

Utseende - CSS

Nu när vi är klara med JavaScriptet ska vi avsluta med att lägga till utseendet. Skuggan till bilden har jag gjort i Photoshop. Denna bild lägger jag som bakgrundsbild till DIV-elementet. Bakgrunden placerar jag i nedre högra hörnet.

Så här ser CSS-koden ut:

 

.ImageWithCaption

{

   background: url(../Images/shadow.gif) bottom right no-repeat;

   padding: 3px 10px 10px 3px;

}

 

.ImageWithCaption p

{

   margin: 0px;

   padding: 0.5em 5px 0.5em 0;

   font-family: Georgia;

   text-align: center;

   font-size: 1em;

}

 

Slutligen

Det sista jag behöver göra är att länka in JavaScript och CSS i sidan som ska ha bildtexterna. Så här ser min HTML-fil ut.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Bildtexter</title>

    <link rel="stylesheet" type="text/css" href="Styles/ImageCaption.css" />

    <script type="text/javascript" src="Scripts/Global.js"></script>

    <script type="text/javascript" src="Scripts/ImageCaption.js"></script>

</head>

<body>

    <div>

      <img src="Images/vanja.jpg" alt="Helidoggen Vanja solar på trappan"

         title="Även en helidog måste vila ibland"

         style="width: 300px; height: 300px;" class="ImageWithCaption" />

    </div>

</body>

</html>

 

>> Ladda ned ett fungerande exempel

 

 

Av: johan

Datum för publicering

  • 2007-04-06
Anmäl
2007-04-07 01:14 #1 av: johan
bildtexter.zip

Här är en zip-fil med alla kod och alla bilder som behövs för exemplet.

 

Anmäl
2007-04-08 01:40 #2 av: Zpookey

Toppentips....men finns det ett enklare sätt att lägga in texten än att "hacka" html?

Anmäl
2007-04-08 04:13 #3 av: johan

#2: Hur tänker du? T ex genom att läsa från en XML-fil eller databas?

 

Anmäl
2007-08-12 08:24 #4 av: JimJ

Den här artikeln har jag missat. De här tipsen kommer väl till användning på min nya hemsida. Tack Johan! :-)

Vänliga hälsningar
- Jim Johansson

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.