コメントにカスタマイズ絵文字入力機能
2005/01/18 18:44コメントに絵文字を入れられるようになりました。
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”‘;
このままでも特に問題なし
２）編集後、</head>タグの上に挿入
３）画像リスト出力スクリプト
<!– 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" > —– （Ａ）
（省略）
<textarea name="description">･･･</textarea> —– （Ｂ）
</form>
４)下記の画像変換スクリプトを、HTMLの<!– END comment_area –>タグの上にコピー＆ペーストし、太字部分を編集。
<script type="text/javascript">
<!–
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = ‘comment_area’;
// （２）コメント全体のタグ名
var commentAreaTag = ‘div’;
// （３）各コメントの 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>
以上！
BLOGいじり | 
コメントは受け付けていません。 | 
sb & SereneBach |
