JavaScript ~ create caption from alt tag

Freeway
1

WebYep image element has an option to add alt text to an image. Earlier IE versions used to display the ALT tag the same as as TITLE tag as a pop up text. Later version do not as the title should only appear as a pop-up.

Does anyone know of a script to recommend that could either…

  1. Create a title tag from the alt tag
  2. Create a div under the image with the alt tag duplicated as a caption.

WebYeb allows you to add a class to the image element to target it.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

On Aug 6, 2011, at 9:26 AM, David Owen wrote:

WebYep image element has an option to add alt text to an image.
Earlier IE versions used to display the ALT tag the same as as TITLE
tag as a pop up text. Later version do not as the title should only
appear as a pop-up.

Right. This was a bug, and they properly fixed it. There used to be an
Action (probably still is out there) to clean this up, otherwise every
time your mouse even slows down over a photograph, you have an ugly
tooltip popping up in the middle of your lovely design.

Does anyone know of a script to recommend that could either…

  1. Create a title tag from the alt tag

I don’t recommend this, see above.

  1. Create a div under the image with the alt tag duplicated as a
    caption.

Sure. Protaculous on your page, and set to prototype-packed. In the
top Function Body button editor, paste this:

$$('img.yourClass').invoke(function(elm){
	elm.insert({after:'<span>' + elm.alt + '</span>'});
});

The rest is just CSS – figure out what the parent element of that
img.yourClass is, and create a style that sets any child span to
display:block and give it some padding so it doesn’t whack into the
photo. So if your img.yourClass is always inside a div.WYbox or
something like that, your style would look like this:

.WYbox span {
	display:block;
	padding: 8px 0;
	font-style: italic;
	font-size: 11px;
	text-align:center;
}

Walter

WebYeb allows you to add a class to the image element to target it.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thanks Walter

I’ll have a go (again I need to get to grips with JavaScript and spend some time on it ~ now if it was CSS I would not need any help being an every day thing these days).

David

On 6 Aug 2011, at 15:15, Walter Lee Davis email@hidden wrote:

On Aug 6, 2011, at 9:26 AM, David Owen wrote:

WebYep image element has an option to add alt text to an image. Earlier IE versions used to display the ALT tag the same as as TITLE tag as a pop up text. Later version do not as the title should only appear as a pop-up.

Right. This was a bug, and they properly fixed it. There used to be an Action (probably still is out there) to clean this up, otherwise every time your mouse even slows down over a photograph, you have an ugly tooltip popping up in the middle of your lovely design.

Does anyone know of a script to recommend that could either…

  1. Create a title tag from the alt tag

I don’t recommend this, see above.

  1. Create a div under the image with the alt tag duplicated as a caption.

Sure. Protaculous on your page, and set to prototype-packed. In the top Function Body button editor, paste this:

$$('img.yourClass').invoke(function(elm){
   elm.insert({after:'<span>' + elm.alt + '</span>'});
});

The rest is just CSS – figure out what the parent element of that img.yourClass is, and create a style that sets any child span to display:block and give it some padding so it doesn’t whack into the photo. So if your img.yourClass is always inside a div.WYbox or something like that, your style would look like this:

.WYbox span {
   display:block;
   padding: 8px 0;
   font-style: italic;
   font-size: 11px;
   text-align:center;
}

Walter

WebYeb allows you to add a class to the image element to target it.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Sounds good. I thought of a clearer technique right after I wrote this:

$$('img.yourClass').invoke(function(elm){
   elm.insert({after:'<span class="caption">' + elm.alt + '</span>'});
});

.caption {
   display:block;
   padding: 8px 0;
   font-style: italic;
   font-size: 11px;
   text-align:center;
}

That way you don’t have to fiddle around with parent classes, and you
don’t have to worry about WebYep inserting a styled span (to make
something a different color) and having it suddenly become a caption
block.

Walter

On Aug 6, 2011, at 3:18 PM, David Owen wrote:

I’ll have a go (again I need to get to grips with JavaScript and
spend some time on it ~ now if it was CSS I would not need any help
being an every day thing these days).

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options