웹마스터 팁

  2. Support
  3. 웹마스터 팁

도트 이모티콘 생성기

2006.10.30 21:07

예뜨락

네이버의 붐업 게시판을 보면 댓글에 이모티콘등으로 글자나 그림의 형태를 만들어 넣는걸 간혹
볼수 있습니다 뭐라고 하는지는 잘 모르겠네요 ^^;

그거 보구 재미있어서 한번 만들어봤습니다

크게 신경써서 만든것이 아니므로 다소 불완전할 수도 있습니다
가로와 넓이등은 대략 신경써서 조절해야 제대로된 형태가 나옵니다



<html>

<head>
<title>제목 아직 안정했음 :)</title>
<script type="text/javascript">
// 만든이 : 예뜨락

  var col="43"//가로
  var row="12"//세로


//문서 로드후 표기
function dot_write(dot_img){
     var dot="";

     for(j=0;j<row;j++){

        for(i=1;i<=col;i++){
           if(i<col){
              dot = dot +"<a onclick="change("+parseInt(col*j+i)+")" style="cursor: pointer;"><span id=""  +parseInt(col*j+i)+ "">"+dot_img+"</span></a>";
           }
           else
           if(i==col){
              dot = dot +"<a onclick="change("+parseInt(col*j+i)+")" style="cursor: pointer;"><span id=""  +parseInt(col*j+i)+ "">"+dot_img+"</span><br /></a>";
           }
       }
     }
     m = document.getElementById('memo');
     m.innerHTML =dot;
}

//도트 하나당 반전
function change(i){
     main = document.getElementById(i);
     var f=document.getElementById('ch');
     var sindex=f.selectedIndex;
     var fir= f.options[sindex].value.split("|")[0];
     var sec= f.options[sindex].value.split("|")[1];
     if(main.innerHTML ==fir){
        main.innerHTML =sec;
     }
     else
     if(main.innerHTML ==sec){
        main.innerHTML =fir;
     }
}


//전체 반전
function turns(){
     var f=document.getElementById('ch');
     var sindex=f.selectedIndex;
     var fir= f.options[sindex].value.split("|")[0];
     var sec= f.options[sindex].value.split("|")[1];
     for(j=1;j<=row*col;j++){
     main = document.getElementById(j);
     if(main.innerHTML ==fir){
        main.innerHTML =sec;
     }
     else
     if(main.innerHTML ==sec){
        main.innerHTML =fir;
     }
     }
}


// 셀렉트 박스의 도트로 체인지
function select(){
     var f=document.getElementById('ch');
     var sindex=f.selectedIndex;
     var fir= f.options[sindex].value.split("|")[0];
     var sec= f.options[sindex].value.split("|")[1];
     dot_img= document.getElementById('ch').value;
     dot_write(fir)
}




// 카피
function copyit() {
        document.dfd.memo2.value= document.getElementById('memo').innerText;
        var tempval=eval("document.dfd.memo2");
        tempval.select();
        therange=tempval.createTextRange();
        therange.execCommand("Copy");
        alert('토트가 복사되었습니다 n 입력창에 붙여 넣기 하세요 !');
}

</script>


</head>

<body onload="dot_write('□')">
<center>

  <select id="ch" onChange="select();">
    <option value="□|■">사용할 도트를 선택하세요!</option>
    <option value="□|■">□</option>
    <option value="☆|★">☆</option>
    <option value="○|●">○</option>
    <option value="◇|◆">◇</option>
    <option value="■|□">■</option>
    <option value="★|☆">★</option>
    <option value="●|○">●</option>
    <option value="◆|◇">◆</option>
  </select>
<a onclick="turns()"; style="cursor:pointer">전체 반전</a>

  <form name="dfd">
     <textarea name="memo2" style="visibility:hidden;"></textarea>
     <div id="memo"></div>
  </form>
  <input type=submit  value="복사" onclick="copyit()">

</center>
</body>
</html>

사용법은 행과 열의 숫자만 잘 조합해서 올리구
토트마다 마우스로 클릭해서 모양새를 만들면 됩니다
다한 다음 복사해서 게시판에 붙여넣기 하면 되구요
한번 클릭하면 색이 채워지구 한번 더 누르면 반전 됩니다
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
휴대폰 결재 활용 (최종) 한꼬마 2002.11.26
카드 결재 개요 (텔렉) [2] 한꼬마 2002.11.26
카드 결재시 사용되는 자바스크립트와 html [3] file 한꼬마 2002.11.28
제로카운터 접속자 수 조정, 최고 간편한 팁(5초 소요, DB보존) [4] 고광욱 2002.12.01
파일처리 - fseek [3] 위선OSE 2002.12.03
MYSQL CLASS 위선OSE 2002.12.03
PHP 각종 오류 정리 [15] TheMics 2002.12.04
왕초보용 개판 오분전 황당 쿠키(1) [4] 미친개 2002.12.09
왕초보용 개판 오분전 황당 쿠키(2) [6] 미친개 2002.12.09
왕초보용 개판 오분전 황당 쿠키(3) [2] 미친개 2002.12.09
왕초보용 개판 오분전 황당 쿠키(4) [2] 미친개 2002.12.09
if 문으로 xxx.php?db=src 이런식으로 해보자..(제1탄 기초를 확!) [14] inging-zb41 2002.12.12
[동주아빠] PHP 게시판 만들기 기초 (1) 준비 [8] 손병목 2002.12.25
[동주아빠] PHP 게시판 만들기 기초 (2) [12] 손병목 2002.12.25
[동주아빠] PHP 게시판 만들기 기초 (3) 변수와 배열 [6] 손병목 2002.12.25
[동주아빠] PHP 게시판 만들기 기초 (4) 연산자 [10] 손병목 2002.12.25
[동주아빠] PHP 게시판 만들기 기초 (5) 제어문(上) [9] 손병목 2002.12.25
[동주아빠] PHP 게시판 만들기 기초 (5) 제어문(下) [10] 손병목 2002.12.25
[동주아빠] PHP 게시판 만들기 기초 (6) require,include [5] 손병목 2002.12.25
[동주아빠] PHP 게시판 만들기 기초 (7) 사용자정의함수 [4] 손병목 2002.12.25
태그 쓰기