웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
도트 이모티콘 생성기
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
제목 | 글쓴이 | 날짜 |
---|---|---|
배경 음악 연주기(다기능/스틱형) [1] | 이민주 | 2006.10.09 |
{로그인}관리자 로그인 폼 간단함 [2] | 김민환 | 2006.10.10 |
일반 시간...... [1] | 김민환 | 2006.10.10 |
위의 메뉴에 마우스를 올리면 밑에 메뉴가 나오는 소스 [1] | 김민환 | 2006.10.10 |
당신은~째 방문자 이십니다.<카운터> [11] | 김민환 | 2006.10.10 |
즐겨찾기 추가방법 [2] | 김민환 | 2006.10.10 |
앗 불꽃놀이다 구경가자 [3] | 김민환 | 2006.10.14 |
졸리시면 이것을 한번 써보세요.......(큰창 필수!!)지진이다 [2] | 김민환 | 2006.10.14 |
홈페이지의 필수!! 뮤직 플레이어!! [3] | 김민환 | 2006.10.14 |
앗!! 내별!! 내별날라가네 [3] | 김민환 | 2006.10.14 |
고글검색하기!! [7] | 김민환 | 2006.10.30 |
셀렉트 박스를 이용한 콘트롤 만들기 ( 위로 이동 ) [1] | 예뜨락 | 2006.10.30 |
셀렉트 박스를 이용한 콘트롤 만들기 ( 아래로 이동 ) | 예뜨락 | 2006.10.30 |
context menu - 마리홈 이름 팝업 레이어 [3] | 예뜨락 | 2006.10.30 |
도트 이모티콘 생성기 [21] | 예뜨락 | 2006.10.30 |
로딩 레이어 만들기 [6] | 이진수 | 2006.11.27 |
처음 만들어본 자바 스크립트.. 나이 알아 맞추기 [2] | 김동헌 | 2006.12.05 |
[동영상강좌] 홈페이지에 BGM을 달아보자 [5] | 서기 | 2007.01.10 |
슬라이딩 레이어 메뉴!! 메뉴가 상하로 따라다녀요!! [4] | TiZa | 2007.02.03 |
간단한 덧셈 뺄셈 계산 | 예뜨락 | 2007.02.14 |