Eyes Of Siche

innerHTML & 표시

Posted at 2009/09/14 12:33
Filed under html & javascript

생각하지도 못했다.. 이런 경우도 있군..
innerHTML를 했을때 & 표시가 안돼더라.. -_-;;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> eyes of siche</title>
</head>
<body>
<div id="div" style="height: 15px; border: 1px solid red"></div>
<br />
<input type="button" onclick="document.getElementById('div').innerHTML = '&'" value="click 1" />
<input type="button" onclick="document.getElementById('div').innerHTML = '&amp;'" value="click 2" />
<input type="button" onclick="document.getElementById('div').innerHTML = '&amp;amp;'" value="click 3" />
</body>
</html>

흠... 왜 이럴까... -_-;; 거참..
방법은 이렇지만 왜 이래야 하는지 모르겠다.. -_-;;

Posted by siche

Tag: &, innerHTML, javascript, 자바스크립트
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/142

이미지 미리보기. 파폭은 안됨

Posted at 2008/12/14 19:17
Filed under html & javascript

일단.. 이소스는 파이어폭스에서 지원이 안된다. 보안때문에 막아 놓았다고 한다. 제길..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> eyes of siche </title>
</head>

<body>
<script type="text/javascript">
<!--
    function imgPreview(img){
        var imgObj = document.getElementById('previewImg');
        if(img.value.match(/\.(gif|jpg|jpeg|png)$/i)){
            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.value + "',sizingMethod=scale)";
        } else {
            img.outerHTML = img.outerHTML;
            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod=scale)";
            alert('이미지파일만 올릴수 있습니다.');
        }
    }
//-->
</script>
<div id="previewImg" style="width: 150px; height: 150px;"></div>
<input type="file" onchange="imgPreview(this);">
</body>
</html>

파이어 폭스도 예전에는 앞에 file:/// 를 붙이면 되었지만 지금은 그것 조차 안된다.
파이어 폭스에서도 동일한 기능을 사용을 하고 싶다면 onchage 이벤트에 파일을 이미 업로드 하고
그 업로드한 파일을 불러오는 수 밖에 없다.. -_-;

Posted by siche

Tag: javascript, 스크립트, 이미지 미리보기, 이미지 업로드
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/110

탭, 내용과 같이 자동롤링

Posted at 2008/11/28 21:26
Filed under html & javascript

탭이 있고 탭에 해당된 내용이 있고 탭이 자동롤링 되야 한다.
그럼 탭이 자동롤링이 되면서 해당 내용도 보여줘야 할 것이다.
그리고 onmouseover 가 되면 자동롤링이 멈추며 onmouseout 이벤트에 다시 자동롤링이 되어야 할 것 이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> eyes of siche </title>
</head>

<body>
<script type="text/javascript">
<!--
    var cnum=1;
    function contabroll(num){
        var knum;
        if(num){
            knum = num;
            cnum = num;
        } else {
            knum = cnum;
        }

        var con = document.getElementById('contabroll').getElementsByTagName('dt');
        var tab = document.getElementById('contabroll').getElementsByTagName('dd');

        for(i=1;i<=con.length;i++){
            con[i-1].className = (knum==i)? 'on' : '';
            tab[i-1].className = (knum==i)? 'on' : '';
        }
        cnum++;
        if(cnum>con.length) cnum = 1;
    }

    function contabrolling(type){
        (type=='start')? ctr = setInterval(contabroll,2000) : clearTimeout(ctr);
    }
//-->
</script>
<style type="text/css">
    dl { float: left; }
    dt { display: none; width: 283px; height: 100px; border: 1px solid red; margin-bottom: 10px; }
    dt.on { display: block; }
    dd { float: left; width: 50px; margin: 0 -1px 0 0; padding: 10px; border: 1px solid blue; text-align: center; }
    dd.on { background: blue; font-weight: bold; color: #fff; }
</style>
<dl id="contabroll" onmouseover="contabrolling('stop');" onmouseout="contabrolling('start');">
    <dt>tab 내용 1</dt>
    <dt>tab 내용 2</dt>
    <dt>tab 내용 3</dt>
    <dt>tab 내용 4</dt>

    <dd onclick="contabroll(1);">tab1</dd>
    <dd onclick="contabroll(2);">tab2</dd>
    <dd onclick="contabroll(3);">tab3</dd>
    <dd onclick="contabroll(4);">tab4</dd>
</dl>
<script type="text/javascript">
<!--
    contabroll(1);
    contabrolling('start');
//-->
</script>
</body>
</html>

전역변수 cnum에 현재 보여 주는 탭의 index number를 계속해서 저장해 주며 1씩 증가 시켜 준다.
탭의 갯수만큼 늘어 났다면 다시 1로 돌려 준다.
나머지는 cnum과 탭과 탭내용이 일치하면 className을 on으로 변경해 주고
setInterval 로 반복적으로 다시 호출한다. clearTimeout 은 setInterval를 정지 시켜 준다.

Posted by siche

Tag: javascript, setInterval, 스크립트, 탭 내용 자동롤링, 탭 자동롤링
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/109

투명이미지(png) IE6.0에서도 보이게 하기

Posted at 2008/11/25 08:38
Filed under html & javascript

png 이미지는 gif와 다르게 투명 이미지로 사용할 수 있다.
허나 IE6.0 버젼에서는 fiter를 사용해야 png의 특징을 살려서 사용할수 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> eyes of siche </title>
</head>

<body>
<script type="text/javascript">
<!--
    function setPng24(obj) {
        obj.width=obj.height=1;
        obj.className=obj.className.replace(/\bpng24\b/i,'');
        obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+obj.src+"',sizingMethod='image');"
        obj.src='';
        return '';
    }
//-->
</script>
<style type="text/css">
    body { background: yellow; }
    .png24 { tmp: expression(setPng24(this)); }
</style>
<img src="http://eos.pe.kr/ex/png/png.png" class="png24">
</body>
</html>

예제에서 사용한 이미지는 빨간색 동그라미에 투명한 그림자가 들어간 이미지 입니다.
보시다시피 그림자가 투명해서 바탕의 노란색을 살짝 살짝 보여주는 걸 볼수 있습니다.

Posted by siche

Tag: css, javascript, png, png24, 투명이미지
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/107

탭 토글 스크립트 [이미지]

Posted at 2008/11/21 11:00
Filed under html & javascript

전에 올린 탭 토글 스크립트는 class를 적용한 것이고
이번 것은 롤오버 이미지를 사용한 것 이다. 사용 방법은 동일 하며 롤오버 이미지 네이밍 규칙이 있다.
끝부분 on.gif , off.gif

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> eyes of siche </title>
</head>

<body>
<style type="text/css">
    .tab1 { padding: 0px; margin: 0px; list-style: none; }
    .tab1 li { float:left; margin-right: -1px; cursor: pointer; }
    .tab1 li img { display: block; }

    .con1 { position: relative; top: -1px; clear: both; width: 400px; padding: 50px 0; border: 1px solid #000; }

    #tab_con_2 { display: none; }
</style>
<script type="text/javascript">
<!--
    function tabtoggle(obj,tab){
        var tab_list = document.getElementById(obj).getElementsByTagName('li');
        for(i=1;i<=tab_list.length;i++){
            var imgEl=tab_list[i-1].getElementsByTagName("img").item(0);
            imgEl.src = (tab==i)? imgEl.src.replace("off.gif", "on.gif"):imgEl.src.replace("on.gif", "off.gif");
            document.getElementById('tab_con_'+i).style.display = (tab==i)? 'block' : 'none';
        }
    }
//-->
</script>
<ul id="tab_list_1" class="tab1">
    <li onclick="tabtoggle('tab_list_1',1);"><img src="http://eos.pe.kr/ex/imgover/tab1_on.gif" alt="tab1"></li>
    <li onclick="tabtoggle('tab_list_1',2);"><img src="http://eos.pe.kr/ex/imgover/tab2_off.gif" alt="tab2"></li>
</ul>
<div id="tab_con_1" class="con1">
    내용1
</div>
<div id="tab_con_2" class="con1">
    내용2
</div>
</body>
</html>

이번에는 내용 부분도 넣어 보았다. class를 사용하는 탭 토글도
document.getElementById('tab_con_'+i).style.display = (tab==i)? 'block' : 'none';
해당 소스로 내용 부분의 display를 조정 할수 있을 것 이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> eyes of siche </title>
</head>

<body>
<style type="text/css">
    .tab1 { padding: 0px; margin: 0px; list-style: none; }
    .tab1 li { float:left; margin-right: -1px; cursor: pointer; }
    .tab1 li img { display: block; }

    .con1 { position: relative; top: -1px; clear: both; width: 400px; padding: 50px 0; border: 1px solid #000; }

    #tab_con_2 { display: none; }
</style>
<script type="text/javascript">
<!--
    function tabtoggle(obj,tab){
        var tab_list = document.getElementById(obj).getElementsByTagName('li');
        for(i=1;i<=tab_list.length;i++){
            var imgEl=tab_list[i-1].getElementsByTagName("img").item(0);
            imgEl.src = (tab==i)? imgEl.src.replace("off.gif", "on.gif"):imgEl.src.replace("on.gif", "off.gif");
            document.getElementById('tab_con_'+i).style.display = (tab==i)? 'block' : 'none';
        }
    }
//-->
</script>
<ul id="tab_list_1" class="tab1">
    <li onclick="tabtoggle('tab_list_1',1);"><img src="http://eos.pe.kr/ex/imgover/tab1_on.gif" alt="tab1"></li>
    <li onclick="tabtoggle('tab_list_1',2);"><img src="http://eos.pe.kr/ex/imgover/tab2_off.gif" alt="tab2"></li>
</ul>
<div id="tab_con_1" class="con1">
    내용1
</div>
<div id="tab_con_2" class="con1">
    내용2
</div>
<script type="text/javascript">
<!--
    tabtoggle('tab_list_1',2);
//-->
</script>
</body>
</html>

이것 역시 처음 보여질 탭을 설정할수 있다. [개발고려]

Posted by siche

Tag: javascript, 탭 토글
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/106

디자인 셀렉트박스

Posted at 2008/11/18 10:54
Filed under html & javascript

확실하게 크로스브라우징이 되는 것들은 못본 것 같다.
밑에 이 소스는 select box의 style을 따라 같다거나 값을 넘겨준다거나 하는 것은 없다.
값을 넘기려면 type이 hidden인 input 을 만들어서 선택하는 function selecttxt 안에 해당 value를 넣어 주면 될 것이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> eyes of siche </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { margin:0px; font-size:12px; color:#c2cad8; }
ul { margin:0px; list-style:none; padding:0px; }
a { color:#c2cad8; }
div { width:130px; padding:3px; border:1px solid #000; background-color:#314c7b; }
div.selectlist { position: absolute; top:5px; left:5px; display:none; }
div.selectlist li { padding-bottom:5px; }
div.select { float:left; margin:5px; display: inline; }
</style>
<script type="text/javascript">
<!--
function disblock(obj){
var div = document.getElementById(obj);
div.style.display = 'block';
}
function disnone(obj){
var div = document.getElementById(obj);
div.style.display = 'none';
}
function selecttxt(txt){
var seltxt = document.getElementById('searchseltxt');
seltxt.innerHTML = txt;
disnone('selectlist');
}
//-->
</script>
</head>
<body>
<div id="selectlist" class="selectlist">
<ul>
<li class="start"><a href="javascript:void(0)" onclick="selecttxt('전체검색');">전체검색</a></li>
<li><a href="javascript:void(0)" onclick="selecttxt('검색1');">검색1</a></li>
<li><a href="javascript:void(0)" onclick="selecttxt('검색2');">검색2</a></li>
<li><a href="javascript:void(0)" onclick="selecttxt('검색3');">검색3</a></li>
<li><a href="javascript:void(0)" onclick="selecttxt('검색4');">검색4</a></li>
<li><a href="javascript:void(0)" onclick="selecttxt('검색5');">검색5</a></li>
</ul>
</div>
<div class="select" onclick="disblock('selectlist');">
<span id="searchseltxt">전체검색</span>
</div>
</body>
</html>

모르는 부분은 없을 것이다.
포인트는 선택 했을때 innerHTML로 선택한 값을 보여준다.

Posted by siche

Tag: html, innerHTML, javascript, select, 셀렉트박스
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/104

탭 토글 스크립트

Posted at 2008/11/12 17:13
Filed under html & javascript

클릭한 탭 선택 스크립트.
특별히 스크립트 함수를 쓰거나 한것은 없는 일반적인 탭 이다.
ul에 아이디로 구분하여 한페이지에 중첩해서 사용할수 있으며 처음 로딩시 탭을 임의로 선택할 수 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> eyes of siche </title>
</head>

<body>
<style type="text/css">
    .tab1 { margin: 0px; list-style: none; }
    .tab1 li { float:left; width: 100px; text-align: center; padding: 5px; border:1px solid red; margin-right: -1px; cursor: pointer; }
    .tab1 li.on { background-color: red; color: #fff; font-weight: bold; }
</style>
<script type="text/javascript">
    function tabToggle(obj,tab) {
        var tab_list = document.getElementById(obj).getElementsByTagName('li');
        for(i=1;i<=tab_list.length;i++){
            (tab==i)?tab_list[i-1].className='on':tab_list[i-1].className='';
        }
    }
</script>
<ul id="tab_list_1" class="tab1">
    <li onclick="tabToggle('tab_list_1',1);">tab1</li>
    <li onclick="tabToggle('tab_list_1',2);">tab2</li>
    <li onclick="tabToggle('tab_list_1',3);">tab3</li>
</ul>
</body>
</html>

on 이라는 class 명으로 탭 선택 표시를 한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> eyes of siche </title>
</head>

<body>
<style type="text/css">
    .tab1 { margin: 0px; list-style: none; }
    .tab1 li { float:left; width: 100px; text-align: center; padding: 5px; border:1px solid red; margin-right: -1px; cursor: pointer; }
    .tab1 li.on { background-color: red; color: #fff; font-weight: bold; }
</style>
<script type="text/javascript">
    function tabToggle(obj,tab) {
        var tab_list = document.getElementById(obj).getElementsByTagName('li');
        for(i=1;i<=tab_list.length;i++){
            (tab==i)?tab_list[i-1].className='on':tab_list[i-1].className='';
        }
    }
</script>
<ul id="tab_list_1" class="tab1">
    <li onclick="tabToggle('tab_list_1',1);">tab1</li>
    <li onclick="tabToggle('tab_list_1',2);">tab2</li>
    <li onclick="tabToggle('tab_list_1',3);">tab3</li>
</ul>
<script type="text/javascript">
    tabToggle('tab_list_1',2);
</script>
</body>
</html>

제일 하단에 tabToggle('tab_list_1',2); 으로 로딩시 선택을 할수 있다. [개발 고려]
당연히 li 태그 안에 class="on" 으로 첫 탭 선택을 할수 있다.

Posted by siche

Tag: javascript, 탭 토글
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/99

그래프를 그리는 JS

Posted at 2008/11/11 14:23
Filed under html & javascript

wwwroot.zip

jiab님께서 phpschool 에 올린 자료.

출처 : http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=53823

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE> New Document </TITLE>
        <META NAME="Generator" CONTENT="EditPlus">
        <META NAME="Author" CONTENT="">
        <META NAME="Keywords" CONTENT="">
        <META NAME="Description" CONTENT="">

        <script type="text/javascript" src="Noname13.js"></script>
        <script type="text/javascript" src="IECanvas.js"></script>
        <script type="text/javascript" src="Noname3.js"></script>    
        <script type="text/javascript">
            function draw() {
                var val = new Array();
                val[0] = new Array("스타크래프트","5000","검색");
                val[1] = new Array("와우","2000","검색");
                val[2] = new Array("프리스타일","1000","검색");
                val[3] = new Array("카트","2000","검색");
                val[4] = new Array("샤이야","1000","검색");

                var val2 = new Array();
                val2[0] = new Array("스타크래프트","4000","EP");
                val2[1] = new Array("와우","1000","EP");
                val2[2] = new Array("프리스타일","0","EP");
                val2[3] = new Array("카트","4000","EP");
                val2[4] = new Array("샤이야","0","EP");

                var xytitle = new Array("게임종류","인구수");
                
                var vg = new chartGallery(10,8);
                vg.addData(val);
                vg.addData(val2);
                vg.makeCanvas("#FFFFFF");
                vg.makeChartTitle("test", "yellow", "black");
                vg.make2DCoordinates("NONE",xytitle,"RIGHT_TOP");    
                vg.make2DScale("2",5);    
                vg.makeBar(true);
                var ss = vg.display();    

                //gArea.innerHTML = '<xml id="test">' + ss + '</xml>';    
                gArea.innerHTML = ss;    
                //alert(gArea.innerHTML);
            }
        </script>
    </HEAD>

    <BODY onload="draw();CanvaSVG(gArea, 'test2', 'canvas-container')">
        <canvas id="test2" width="1000" height="500" ></canvas>
        <div id="canvas-container"></div>
        <p id= "gArea" name="gArea" style="display:none"></p>
    </BODY>
</HTML>

view 클릭해도 나오지 않는 이유는 js 파일이 따로 있기 때문이다.
첨부자료를 다운 받아서 테스트 해보십시오.

Posted by siche

Tag: javascript, 그래프
Response: No Trackback , 10 Comments
RSS: http://eos.pe.kr/rss/response/97

Comments List

구자민 2009/02/28 13:18 # M/D Reply Permalink

d
siche 2009/03/02 10:59 # M/D Reply Permalink

??
증바리 2009/08/10 14:42 # M/D Reply Permalink

저기 질문이 있는데요.

이거 이대로 그대로 쓰면 xp에서는 잘 돌아 가는데, 문제는 vista에서는 문자열이 전부 깨져서 나오더라고요.

<b>태그를 썼더니 문자열이 전부 깨져서 나오더라고요.

비스타에선 뭔가 방법이 없는 건가요?
1. siche 2009/08/11 12:22 # M/D Permalink
  
  음.. OS 버젼 때문이 아니라 아마 인터넷 익스플로러 버젼 때문에 그런게 아닌지요?? 자바스크립트가 OS의 버젼 영향을 받을게 아니거든요..^^;;
  한글이 깨져 나왔을때 브라우져 상단 메뉴중 보기->인코딩 으로 가보십시요. 아마 파일형식이 ANSI 인데 유니코드로 되어 있던 UFT-8인데 한국어로 가있던 아님 뭐 이상하게 아랍어~ 이쪽으로 가있던 할것 입니다.
  해당 페이지 상단에 꼭 해당 인코딩 방식 메타 태그를 넣어 주시기 바랍니다~^^
증바리 2009/08/11 14:22 # M/D Reply Permalink

우....죄송합니다...;;
bold 넣은 건 되었는데, 지금 가장 문제는....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="content-type" content="text/html;charset=euc-kr">
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<script type="text/javascript" src="../script/Noname13.js"></script>
<script type="text/javascript" src="../script/IECanvas.js"></script>
<script type="text/javascript" src="../script/Noname3.js"></script>
<script type="text/javascript">
function draw() {
var val = new Array();
val[0] = new Array("스타크래프트","5000","검색");
val[1] = new Array("와우","2000","검색");
val[2] = new Array("프리스타일","1000","검색");
val[3] = new Array("카트","2000","검색");
val[4] = new Array("샤이야","1000","검색");

var val2 = new Array();
val2[0] = new Array("스타크래프트","4000","EP");
val2[1] = new Array("와우","1000","EP");
val2[2] = new Array("프리스타일","0","EP");
val2[3] = new Array("카트","4000","EP");
val2[4] = new Array("샤이야","0","EP");

var xytitle = new Array("게임종류","인구수");

var vg = new chartGallery(10,8);
vg.addData(val);
vg.addData(val2);
vg.makeCanvas("#FFFFFF");
vg.makeChartTitle("test", "yellow", "black");
vg.make2DCoordinates("NONE",xytitle,"RIGHT_TOP");
vg.make2DScale("2",5);
vg.makeBar(true);
var ss = vg.display();

//gArea.innerHTML = '<xml id="test">' + ss + '</xml>';
gArea.innerHTML = ss;
//alert(gArea.innerHTML);
}
</script>
</HEAD>

<BODY onload="draw();CanvaSVG(gArea, 'test2', 'canvas-container')">
<b>
<canvas id="test2" width="1000" height="500" ></canvas>
<div id="canvas-container"></div>
<p id= "gArea" name="gArea" style="display:none"></p>
</b>
</BODY>
</HTML>
이거인데요.
이건 저위에 있는 원문에다가 canvas 쓴데다가 <b>태그만을 집어 넣은 상태입니다.
문제는 <b>태그를 쓰지 않으면 글씨가 깨지지 않고 잘 나온다는 것이죠. xp와 비스타 전부에서 잘나옵니다.
그런데 <b>태그는 물론 bold를 줘도 비스타에서요 글씨가 깨지더라고요.
그래서 말씀 하신데로 인코딩이 문제인줄 알고 meta태그를 줘도 봤고, 제가 하는 페이지가 jsp라서 첨엔
<%@ page contentType="text/html;charset=euc-kr" %> 이런 설정을 해주는데도 안되더라고요.
아 참고로 비스타랑 제가 하는 xp 컴은 전부다 IE 7 버전입니다.;;
인코딩도 둘다 한글(EUC)로 되어 있습니다.;;
1. siche 2009/08/11 14:47 # M/D Permalink
  
  음.... 글쎄요..;; OS의 차이로 한글이 깨진다는 것 처음 들어 봐서요;;
  일단 <b> 태그는 정상적이 태그가 아니니 <strong> 으로 바꿔 보시고요. 음... 글쎄요.. 아무리 생각해도 제가 아는 것으로는 도움을 드리지 못할것 같습니다..^^;;;
증바리 2009/08/11 15:06 # M/D Reply Permalink

예 정말 감사합니다^^

정말 많은 도움이 되었습니다. 또 좋은글 올라오면 보러 오겠습니다.헤헤^^;;
1. siche 2009/08/13 01:58 # M/D Permalink
  
  허허;; 뭐.. 도움도 못드렸는데요.^^;;
증바리 2009/08/13 11:36 # M/D Reply Permalink

후 해결 했습니다.;;;;
아주 쉽게 해결을 했네요.;;;
font-weight:bolder;를 주니깐 안깨지고 잘 나오네요.;;
너무 너무 허무하네요.
더위 조심 하세요^^;;
1. siche 2009/08/13 13:21 # M/D Permalink
  
  헐;; 제가 봤을때는 font-weight 에 normal, bold, bolder, lighter 라는 속성이 있긴 하나 bold로 해서 글자가 깨지고 bolder로 해서 글자가 안깨지는건 아닌것 같고요. 무슨 다른 근본적인 이유가 있을듯 한데요..^^;;
  뭐 문제 없다고 생각하신다면 상관은 없다만.. 정말 희안한 일이네요..^^;;

또다른 이미지 롤오버

Posted at 2007/01/01 00:02
Filed under html & javascript

replace 문법 : [sVal=]String.replace(regexp,replaceText)
stringObj.replace(regexp,function)

stringObj = (문자열 개체)
필수적인 요소이며, 바꾸려는 String 개체나 문자열 리터럴이다.
이 문자열은 replace 메서드로는 수정할 수 없다.

regexp = (정규식)
필수적인 요소이며, 정규식 패턴과 적용 가능한 플래그를 포함하는 Regular Expression 개체의 인스턴스이다.
정규식 패턴과 플래그를 포함하는 String 개체나 리터럴도 가능하다.
regexp 가 Regular Expression 개체의 인스턴스가 아닐 경우 문자열로 변환되고 정확한 검색을 수행하지만, 문자열을 다시 정규식으로 바꾸지는 않는다.

replaceText = (대체 문자열)
필수적인 요소이며, stringObj에서 regexp와 일치하는 것으로 바꿀 문자열를 포함하는 String 개체나 문자열 리터럴이다. JScript 5.5 이후에서는 변환 문자열를 반환하는 기능함수도 replaceText 인수가 될 수 있다.

function = (기능함수)
두번째 인수는 일치, 대체가 수행된 후에 새로 생성된 문자열을 이용하여 추가적으로 수행할 기능함수가 될 수 있다

<script type="text/javascript">
function imgOver(obj) {
    obj.src = obj.src.replace(".gif", "_over.gif");
}
function imgOut(obj) {
    obj.src = obj.src.replace("_over.gif", ".gif");
}
</script>
<img src="/ex/imgover/con1.gif" onmouseover="imgOver(this)"
onmouseout="imgOut(this)" />

이거 역시 이미지 네이밍의 규칙을 줘야 한다.
걍 이미지, _over 된 이미지.

Posted by siche

Tag: javascript, 롤오버
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/49

다시 생각한 간단한 이미지 롤오버

Posted at 2007/01/01 00:02
Filed under html & javascript

split 문법 : [sVal=]String.split(separator[,limit])
문자열을 여러개의 부분 문자열로 분할할 때 만들어지는 문자열의 배열변수를 반환한다.

<script type="text/javascript">
function imgOver(obj,over){

    var objSrcOn = obj.src.split("_over.gif");
    objSrc = objSrcOn[0].split(".gif");

    if(over=='over')
    {
        obj.src = objSrc[0] + '_over.gif';
    }
    else
    {
        obj.src = objSrc[0] + '.gif';
    }

}
</script>
<img src="/ex/imgover/con1.gif" onmouseover="imgOver(this,'over')"
onmouseout="imgOver(this,'out')" />

위의 예제는 이미지 명의 규칙이 필요하다. 1.gif 그냥 이미지 1_over.gif 오버한 이미지.

_over 으로 오버인지 아닌지를 정한다. 해당 이미지를 오버든 아니든 _over.gif를 _over.gif 아닐경우에는
.gif를 제외한다. 즉 해당 이미지의 그냥 이미지의 파일명까지만 불러와서 오버일때는 _over.gif를 붙이고
아닐경우에는 .gif를 붙인다.

Posted by siche

Tag: javascript, 롤오버
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/48

Search Results for 'javascript'

22 POSTS

innerHTML & 표시

이미지 미리보기. 파폭은 안됨

탭, 내용과 같이 자동롤링

투명이미지(png) IE6.0에서도 보이게 하기

탭 토글 스크립트 [이미지]

디자인 셀렉트박스

탭 토글 스크립트

그래프를 그리는 JS

Comments List

또다른 이미지 롤오버

다시 생각한 간단한 이미지 롤오버

Tag Cloud

Categories

Archives

Bookmarks

Recent Posts

Recent Comments

Recent Trackbacks

Calendar

Site Stats

« 2012/05 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31