웹마스터 팁
도트 이모티콘 생성기
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>
사용법은 행과 열의 숫자만 잘 조합해서 올리구
토트마다 마우스로 클릭해서 모양새를 만들면 됩니다
다한 다음 복사해서 게시판에 붙여넣기 하면 되구요
한번 클릭하면 색이 채워지구 한번 더 누르면 반전 됩니다
볼수 있습니다 뭐라고 하는지는 잘 모르겠네요 ^^;
그거 보구 재미있어서 한번 만들어봤습니다
크게 신경써서 만든것이 아니므로 다소 불완전할 수도 있습니다
가로와 넓이등은 대략 신경써서 조절해야 제대로된 형태가 나옵니다
<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>
사용법은 행과 열의 숫자만 잘 조합해서 올리구
토트마다 마우스로 클릭해서 모양새를 만들면 됩니다
다한 다음 복사해서 게시판에 붙여넣기 하면 되구요
한번 클릭하면 색이 채워지구 한번 더 누르면 반전 됩니다
댓글 21
-
예뜨락
2006.10.30 21:09
-
이솝나라
2006.10.31 20:04
복사는 어떻게 하죠? -
예뜨락
2006.10.31 22:02
토트 찍고 나서 밑에 복사란 버튼이 있습니다 그걸 클릭한 후 그대로 글쓰는 공간에
붙여넣기 하시면 됩니다 되도록 글쓰는 공간보다 작게 넓이를 지정해야 도트그림이
깨지지 않습니다 -
자쿠아
2006.11.01 11:13
만든넘? : 예뜨락
/........
/ㅋㅋㅋ -
자쿠아
2006.11.01 11:14
아~
저런식으로 하는군요~/ㅎ -
NaCl
2006.11.01 18:29
저는 예전에 델파이로 '그림을 글자로'라고 저거랑 거의 비슷한 프로그램을 만든적이 있었죠.
다운로드 폭주로 미리내 계정에 얹어서 사용하던 홈페이지 트래픽오버.
그림을 그리고 생성을 누르면 저게 바로... -
이명우
2006.11.21 21:54
잘 만드셧네요..ㅎ -
권미애
2007.01.25 15:34
재밌네요. 아이들이 좋아 해요. -
Black_moon
2007.02.05 11:55
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
☆☆☆☆☆☆★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆★☆☆☆☆☆☆☆☆☆☆
☆☆☆☆☆★☆★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆★☆★☆☆☆☆☆☆☆☆☆
☆☆☆☆★☆☆☆★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆★☆☆☆★☆☆☆☆☆☆☆☆
☆☆☆★☆☆☆☆☆★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆★☆☆☆☆☆★☆☆☆☆☆☆☆
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
☆☆☆☆☆★☆★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆★☆★☆☆☆☆☆☆☆☆
☆☆☆☆★☆★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆★☆★☆☆☆☆☆☆☆☆☆
☆☆☆★☆★☆☆☆☆★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆★☆☆★☆★☆☆☆☆☆☆☆☆☆☆
☆☆☆☆☆☆☆☆☆☆☆★☆☆☆☆☆☆☆☆☆☆☆☆☆☆★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
☆☆☆☆☆☆☆☆☆☆☆☆★★★★★★★★★★★★★★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
므흣
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◆◆◆◆◆◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◆◆◆◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◆◆◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◆◇◇◇◆◆◆◇◇◇
◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◆◇◇◆◇◇◇◆◇◇◆◇◇◇◇◆◆◇◆◇◇◇◆◆◆◇◇◇
◇◇◇◇◇◆◇◇◇◇◇◇◇◇◆◇◇◇◇◆◇◆◇◇◇◇◆◇◇◆◇◇◆◆◇◇◇◇◆◇◇◇◇
◇◇◇◇◇◆◇◇◇◆◆◆◇◇◆◇◇◇◇◆◇◆◇◇◇◇◆◇◇◆◇◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◇◇◆◇◇◆◇◇◇◆◇◇◆◇◇◇◆◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◆◆◇◇◇
◇◇◇◇◇◇◆◇◇◇◆◇◇◇◇◇◆◆◇◇◇◇◇◆◆◇◇◇◇◇◆◆◆◆◇◇◇◆◇◆◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇ -
조정현
2007.02.28 13:45
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□■■■■■■■■□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□■□□□□□□□■□□□□■□■□□□□□■■■■□□□□□□□□□□□□□□
□□□■□■■■■□□□■□□□□■□■□□□□■□□□□■□□□□□□□□□□□□□
□■□□■□□□□□□□■□□□□■□■□□□□■□□□□■□□□□□□□□□□□□□
□□■■■■■■■□□□■□□■■■□■□□□□□■■■■□□□□□□□□□□□□□□
□□□□■□□□□□□□■□□□□■□■□□□□□□□□□□□□□□□□□□□□□□□
□□□■■■■□□□□□■■■□□■□■□□□□□□■□■□□□□□□□□□□□□□□
□□□□■■■□□□□□□□□□□■□■□□□□□□■□■□□□□□□□□□□□□□□
□□□□■□■□□□□□□□□□□■□■□□□■■■■■■■■■■□□□□□□□□□□
□□□□□■□□□□□□□□□□□■□■□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ -
Goldcocktail
2007.06.28 23:38
-
hansol
2007.07.03 11:45
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□■□□□■□□■■■□□■□□□■□□■■■□□□■■■□□■□□□□□□□□□□□
□■□□□■□■□□□■□■■□□■□■□□□■□■□□□■□■□□□□□□□□□□□
□■□□□■□■□□□■□■□■□■□■□□□□□■□□□■□■□□□□□□□□□□□
□■■■■■□■■■■■□■□■□■□□■■■□□■□□□■□■□□□□□□□□□□□
□■□□□■□■□□□■□■□■□■□□□□□■□■□□□■□■□□□□□□□□□□□
□■□□□■□■□□□■□■□■□■□■□□□■□■□□□■□■□□□□□□□□□□□
□■□□□■□■□□□■□■□□■■□□■■■□□□■■■□□■■■■■□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ -
이재훈
2007.08.01 21:47
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□■■■■□□□□■■■■□□□□■■■■□□□■■■□□□□□□□□■■■□□
□□■□□□□■□□■□□□□■□□■□□□□■□□■□□■□□□□□□■■■■□□
□□■□□□□■□□■□□□□■□□■□□□□■□□■□□□■□□□□□■■■■□□
□□■□□□□□□□■□□□□■□□■□□□□■□□■□□□■□□□□■■■■□□□
□□■□□□□□□□■□□□□■□□■□□□□■□□■□□□■□□□□■■■□□□□
□□■□□□□□□□■□□□□■□□■□□□□■□□■□□□■□□□■■■□□□□□
□□■□□■■■□□■□□□□■□□■□□□□■□□■□□□■□□□■■□□□□□□
□□■□□□□■□□■□□□□■□□■□□□□■□□■□□□■□□□□□□□□□□□
□□■□□□■■□□■□□□□■□□■□□□□■□□■□□■□□■■□□□□□□□□
□□□■■■□■□□□■■■■□□□□■■■■□□□■■■□□□■■□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ -
영~!
2007.09.17 15:37
근데 이걸 어떻게 사용하는거죠 @.@? -
ㅇ
2007.10.21 12:51
제목 아직 안정했음 :) 전체 반전 -
ㄴㅇㄹ
2007.10.24 16:21
ㄴㅇㄹㄴ -
ㅇ
2007.10.21 12:51
제목 아직 안정했음 :) 전체 반전 -
지나가던손님이빈다.
2007.11.12 18:15
흠. 지나가다 헛소리 하겟습니다.
그 네이버 상에서 퍼진 프로그램은
저와 친한 'Unused' 라는 분이 만들엇습니다.
못믿겟으면
cafe.naver.com/stardev의
자유게시판의 글을 뒤져보십시오. -
예뜨락
2007.11.12 18:44
그래서 어쨌다는거죠 ^^
그러한 글을 읽기 위해서 카페에 가입해야 하나요
자유게시판 최초 글이 2007.03.31 일에 쓴 글이던데 ...
이 글이 게시된 날짜와 비교하면 그리 헛소리 들을만한 코드는 아닌거 같은데요 ^^;;;
여하튼 여기 게시된 코드는 자바스크립트 기초 정도만 알면 누구나 한시간 이내에 코딩할수 있는 겁니다
그러기에 카피라이터를 넣기가 멋적어 얼렁뚱땅 넣은거구
혹시 낚시글 ^_______________^ -
d
2008.04.22 15:20
-
예뜨락
2013.11.26 16:26
//문서 로드후 표기
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;
}위의 부분에 dot를 가져오는 부분에서 쌍따옴표를 감싸주는 곳이 본문에는 오류가 있습니다
아마 xe업데이트 하면서 자료가 깨지지 않았나 싶습니다
□□■■■■□□□□■■■■□□□■■■■□□■■■□□□□□□□■■□□□□□
□■□□□□■□□■□□□□■□■□□□□■□■□□■□□□□□□□□■□□□□
□■□□□□■□□■□□□□■□■□□□□■□■□□□■□□■■□□□□■□□□
□■□□□□□□□■□□□□■□■□□□□■□■□□□■□□■■□□□□■□□□
□■□□□□□□□■□□□□■□■□□□□■□■□□□■□□□□□□□□■□□□
□■□□■■■□□■□□□□■□■□□□□■□■□□□■□□□□□□□□■□□□
□■□□□□■□□■□□□□■□■□□□□■□■□□□■□□■■□□□□■□□□
□■□□□□■□□■□□□□■□■□□□□■□■□□□■□□■■□□□□■□□□
□■□□□■■□□■□□□□■□■□□□□■□■□□■□□□□□□□□■□□□□
□□■■■□■□□□■■■■□□□■■■■□□■■■□□□□□□□■■□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
위와 같이 쉽게 도트를 찍을수 있습니다