I've made a script which copies the alt attribute of an image and puts it into a <span>. It also formulates the information divided by a hyphen. It works like a charm, but only with one image.

I would also like to wrap a <div> around the image to prevent unnecessary markup.

Script snippets:

HTML:

<div id="hoejre">
    <p>
         <span class="alignright">
             <img src="tommy_stor.jpg" alt="Name - Title" 
                  width="162" height="219" />
             <span></span>
         </span>
   </p>
</div>

jQuery:

var alt = $("#hoejre p span img").attr("alt");
$('#hoejre p span span')
 .html("<strong>" + alt.replace("-", "</strong> <em>") + "</em>");

Output:

<span class="alignright">
    <img height="219" width="162" alt="Name - Title"                  
         src="tommy_stor.jpg">
        <span>
            <strong>Name</strong><em>Title</em>
        </span>
</span>

How do you I repeat the effect on several images, with different information within?