alt & title for smileys

[Niko]

On my site I use FCKeditor for a user-commentbox, the users can also insert smileys. FCKeditor works just fine with inserting the smileys but some of the smileys look the same or aren't really clear on what they represent. The smiley popup doesn't give any information about the smiley, so I modified the script a bit to include the attributes alt and title to the img tag. It's just a small adjustment but (at least in my case) very helpful.

I changed the javascript function InsertSmiley in fck_smiley.html (fckeditor/editor/dialog) to this:

function InsertSmiley( url, alt )
{
	oEditor.FCKUndo.SaveUndoStep() ;

	var oImg = oEditor.FCK.InsertElement( 'img' ) ;
	oImg.src = url ;
	oImg.alt = alt ;
	oImg.title = alt ;
	oImg.setAttribute( '_fcksavedurl', url ) ;

	// For long smileys list, it seams that IE continues loading the images in
	// the background when you quickly select one image. so, let's clear
	// everything before closing.
	document.body.innerHTML = '' ;

	dialog.Cancel() ;
}

changes:
1 added argument alt to the function
2 added alt and title to oImg object.

In the same file I changed the javascript that displays the emoticons to this:

<script type="text/javascript">
	var FCKConfig = oEditor.FCKConfig ;

	var sBasePath  = FCKConfig.SmileyPath ;
	var aImages    = FCKConfig.SmileyImages ;
	var aAlts      = FCKConfig.SmileyAlts ;
	var iCols      = FCKConfig.SmileyColumns ;
	var iColWidth  = parseInt( 100 / iCols, 10 ) ;

	var i = 0 ;
	while (i < aImages.length)
	{
		document.write( '<tr>' ) ;
		for(var j = 0 ; j < iCols ; j++)
		{
			if (aImages[i])
			{
				var sUrl = sBasePath + aImages[i] ;
				document.write( '<td width="' + iColWidth + '%" align="center" class="DarkBackground Hand" onclick="InsertSmiley(\'' + sUrl.replace(/'/g, "\\'" ) + '\', \''+ aAlts[i] +'\')" onmouseover="over(this)" onmouseout="out(this)">' ) ;
				document.write( '<img src="' + sUrl + '" title="'+ aAlts[i] +'" alt="'+ aAlts[i] +'" border="0" />' ) ;
			}
			else
				document.write( '<td width="' + iColWidth + '%" class="DarkBackground">&nbsp;' ) ;
			document.write( '<\/td>' ) ;
			i++ ;
		}
		document.write('<\/tr>') ;
	}
</script>

changes:
1 new var aAlts
2 argument aAlts added in call to InsertSmiley function
3 alt and title attributes added to img tag

In fckconfig.js I have put an array FCKConfig.SmileyAlts which contains the names I want to give the smileys. This array has to be in the same order and contain the same amount of elements as FCKConfig.SmileyImages.
Example:

FCKConfig.SmileyImages = ['big_grin.png','blink.png','blush.png','yawn.png'] ;
FCKConfig.SmileyAlts   = ['big grin','blink','blush','yawn'] ;

[Artur Formella]

Great idea. Thank you for reporting.

[Artur Formella]

Fixed with [2873]