Javascript Alt to Caption

6,466 · May 14, 2006

I am workin on a script that will read in alt attributes of images and spit them out as the caption automatically, but apparently i'm not doin the for loop right because it's just display all the captions at the bottom, not after each individual image.

Right now it displays all the images, then all the captions. I need it to display 1 image, then it's caption ...and then continue through the page.

Also, but fairly minor: How can I get rid of the line break after "Caption: " before the actual Caption text?

Can anyone give me any pointers?

Here is the JS:

window.onload = function extractImageAlts()
{
	images = document.getElementsByTagName('img');
	for (var i = 0; i &lt; images.length; i++)
		{
		var title = images[i].getAttribute('alt');
		if ((title) &amp;&amp; (title != ''))
			{
				var newdiv = document.createElement('div');
				newdiv.className = 'caption';

				var para = document.createElement("p");
				newdiv.appendChild(para);
				var txt = document.createTextNode("Caption: ");
				para.appendChild(txt);

				newdiv.appendChild(document.createTextNode(title));
				images[i].parentNode.appendChild(newdiv);						
			}
		}
}

Here is the XHTML:

&lt;!DOCTYPE html PULIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">;html xmlns="http://w3.org/1999/xhtml" xml:lang="en"&gt;

&lt;head&gt;

&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
	&lt;title&gt;Gallery&lt;/title&gt;

  &lt;script type="text/javascript" src="altCaption.js"></script>t;/head&gt;



&lt;body&gt;

	&lt;img src="https://static.flickr.com/47/130388608_65c2fd0b82.jpg" title="Our Table" alt="THIS IS MY 1st ALT ATTRIBUTE"&gt;

	&lt;br /&gt;

	&lt;img src="https://static.flickr.com/47/130388608_65c2fd0b82.jpg" title="Our Table" alt="THIS IS MY 2nd ALT ATTRIBUTE"&gt;

	&lt;br /&gt;

	&lt;img src="https://static.flickr.com/47/130388608_65c2fd0b82.jpg" title="Our Table" alt="THIS IS MY 3rd ALT ATTRIBUTE"&gt;

&lt;/body&gt;


&lt;/html&gt;

1,765 · May 15, 2006

				newdiv.appendChild(document.createTextNode(title));
				images[i].parentNode.appendChild(newdiv);

==>

				newdiv.appendChild(document.createTextNode(title));
				images[i].parentNode.insertBefore(newdiv, images[i].nextSibling);

6,466 · May 15, 2006

wow, that does make sense. (Y)

6,466 · May 15, 2006

any idea how to get rid of the break return between "Caption: " and then the inserted alt text?

1,765 · May 15, 2006

xxdesmus said:

any idea how to get rid of the break return between "Caption: " and then the inserted alt text?

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

==>

 var para = document.createElement("span");

6,466 · May 15, 2006

my friend you rock :yes: :punk:

Here is (hopefully) my last question:

How can I target just the images in my "content" div for example? I want to apply this alt attribute --> Caption script only to images that are inside my "content" div, not the entire page. :blush: Thanks so much for all the wonderful help.

2,032 · May 15, 2006

with (document.getElementById("content")
 {
 // stoofs here
 }

1,765 · May 16, 2006

xxdesmus said:

my friend you rock :yes: :punk:

Here is (hopefully) my last question:

How can I target just the images in my "content" div for example? I want to apply this alt attribute --> Caption script only to images that are inside my "content" div, not the entire page. :blush: Thanks so much for all the wonderful help.

  images = document.getElementsByTagName('img');

==>

  images = document.getElementById('content').getElementsByTagName('img');

Sign In

Javascript Alt to Caption

Question

xxdesmus

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

em_te

Link to comment

Share on other sites

xxdesmus

Link to comment

Share on other sites

xxdesmus

Link to comment

Share on other sites

em_te

Link to comment

Share on other sites

xxdesmus

Link to comment

Share on other sites

JoeC

Link to comment

Share on other sites

em_te

Link to comment

Share on other sites

Recently Browsing 0 members

Posts

Recent Achievements

Popular Contributors

Tell a friend

Choose your Ad Blocker