Category : BLOGいじり
2005-01-18

コメントにカスタマイズ絵文字入力機能

コメントに絵文字を入れられるようになりました。
stroll::blogさん、ありがとう。
以下自分メモとしてコピペさせていただきました。


1)画像設定スクリプトの編集

<script type="text/javascript">
<!–
// コメントにカスタマイズ絵文字入力機能:画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array(‘画像名’, ‘画像URL’);
list[list.length] = new Array(‘画像名’, ‘画像URL’);
list[list.length] = new Array(‘画像名’, ‘画像URL’);

return list;
}
function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値(alt属性以外)
var att = ‘border="0" style="vertical-align:middle"’;
// ***************** 設定ここまで *****************
att = (att != ”) ? (‘ ‘ + att) : ”;
return att;
}
// –>
</script>

○画像名、画像URLの設定
list[list.length] = new Array(‘画像名’, ‘画像URL’); に
画像名と画像のURLを設定。
○画像タグに含める属性値の設定
設定例)
var att = ‘border=”0″ style=”vertical-align:middle”‘;
このままでも特に問題なし
2)編集後、</head>タグの上に挿入
3)画像リスト出力スクリプト
<!– BEGIN comment_area –>?<!– END comment_area –>タグの中に以下の記述をコピー&ペーストし、太字部分を編集

<script type="text/javascript">
<!–
// コメントにカスタマイズ絵文字入力機能:画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = ‘document.comform.description’;

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
for (var i = 0; i < list.length; i++) {
window.document.write(‘<a href="javascript:;" onClick="addCustmizeEmoji(‘ + textarea + ‘, \” + list[i][0] + ‘\’);"><img src="’ + list[i][1] + ‘"’ + att + ‘ alt="’ + list[i][0] + ‘" /></a>’);
}
}
// reference from jugem.jp (c)
function addCustmizeEmoji(obj, tag) {
var item = ‘[‘ + tag + ‘]’;
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
} else if (obj.selectionStart || obj.selectionStart == ‘0’) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item + obj.value.substring(endPos, obj.value.length);
} else {
obj.value += item;
}
}
writeCustmizeEmojiTagList();
// –>
</script>

○コメントを入力するテキストエリアの設定
太字の部分(name=”・・・”)が無い場合は追加してください。

<form name="comform" action="・・・" method="post" > —– (A)
(省略)
<textarea name="description">・・・</textarea> —– (B)
</form>

4)下記の画像変換スクリプトを、HTMLの<!– END comment_area –>タグの上にコピー&ペーストし、太字部分を編集。

<script type="text/javascript">
<!–
// コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = ‘comment_area’;
// (2)コメント全体のタグ名
var commentAreaTag = ‘div’;
// (3)各コメントの class 属性
var commentBodyClassName = ‘comment_body’;

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != ”) {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName(‘*’);
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentBodyClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}
function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split(‘[‘ + list[i][0] + ‘]’).join(‘<img src="’ + list[i][1] + ‘"’ + att + ‘ alt="’ + list[i][0] + ‘" />’);
}
return s;
}
changeCustmizeEmojiTag();
// –>
</script>

以上!

Tags: Comments Closed 

関連記事