웹마스터 팁
댓글(코멘트) 입력창에 이미지 넣기
2008.08.29 03:25
안녕하세요...이곳에 처음으로 글을 작성합니다.
제가 하려고 했던 기능은....
댓글 부분에 글을 미리 넣어두고 onFocus 이벤트를 줘서 클릭하면 문장이 사라지게 하려고 했습니다.
그런데 댓글 부분이 textarea 가 아니고 iframe 으로 되어있어서...이벤트를 줄수가 없더라구요...
질문게시판을 통해서 여러번 질문드렸는데 답변 주는 분이 없어서 어쩔수 없이... 배경으로 처리했습니다.
(결정적인 단서를 제공해주신
님께 감사드립니다!)적용된 예시를 미리 보여드리자면... 아래 그림과 같은 식으로 작동합니다.
배경이기때문에 글을 써도 저 부분은 남아있구요...
에디터 배경으로 넣었기때문에 글쓰기를 하면 배경으로 깔려있습니다.
단, 글쓰기를 완료하면 보이지 않습니다.
적용 방법은 아래와 같습니다. (zbxe는 제로보드가 설치된 폴더를 뜻합니다.)
/zbxe/modules/editor/skins/default/editor.html 의 중간 136줄(에디트플러스 기준)을 보면 아래와 같은 코드가 있습니다.
<!-- 에디터 출력 -->
<div class="editor_iframe_box"><iframe id="editor_iframe_{$editor_sequence}" frameborder="0" height="{$editor_height}" style="background-color:transparent;" allowTransparency="true"></iframe></div>
<textarea id="editor_textarea_{$editor_sequence}" class="editor_iframe_textarea" style="display:none; height:{$editor_height}" rows="10" cols="10"></textarea>
<div class="editor_iframe_box"><iframe id="editor_iframe_{$editor_sequence}" frameborder="0" height="{$editor_height}" style="background-color:transparent;" allowTransparency="true"></iframe></div>
<textarea id="editor_textarea_{$editor_sequence}" class="editor_iframe_textarea" style="display:none; height:{$editor_height}" rows="10" cols="10"></textarea>
빨간색 부분을 이미지 경로에 맞게 변경해줍니다.
야래 예시의 경우
/zbxe/modules/editor/skins/default/images 경로에 ABC.gif 이미지를 저장했을 경우입니다.
<!-- 에디터 출력 -->
<div class="editor_iframe_box"><iframe id="editor_iframe_{$editor_sequence}" frameborder="0" height="{$editor_height}" style="background:transparent url(./modules/editor/skins/default/images/ABC.gif) no-repeat right top;" allowTransparency="true"></iframe></div>
<textarea id="editor_textarea_{$editor_sequence}" class="editor_iframe_textarea" style="display:none; height:{$editor_height}" rows="10" cols="10"></textarea>
<div class="editor_iframe_box"><iframe id="editor_iframe_{$editor_sequence}" frameborder="0" height="{$editor_height}" style="background:transparent url(./modules/editor/skins/default/images/ABC.gif) no-repeat right top;" allowTransparency="true"></iframe></div>
<textarea id="editor_textarea_{$editor_sequence}" class="editor_iframe_textarea" style="display:none; height:{$editor_height}" rows="10" cols="10"></textarea>
끝입니다...간단하죠?? ^^;;;
다시 한번 말씀드리지만
에디터 배경으로 넣었기때문에 글쓰기(게시물)를 하면 배경으로 깔려있습니다.
적용하실 분들은 이점을 꼭 미리 알고 게셔야 나중에 당황하는 일이 발생하지 않습니다..-_-
그리고 혹시...댓글을 쓰기 위해서 댓글창에 마우스를 갖다대면... 배경 사라지게 할줄 아는 분 계시면...
팁 공개를 정중히 요청드립니다...(__ )
이상 허접 팁이었습니다~
적용페이지 미리보기 <-- 직접 보실 분들은 링크를 클릭하세요~ (제 홈페이지가 좀 느리니...이해해주시길..)
