marquee(마퀴)코드 생성기

<style>
h3{background-color:#cc3366;color:#ffff00;font-size:15px;padding:3px;}
table{font-size:12px;}
#execArea{border:1px solid #cccccc;}
</style>

<script>
  function setWidth(objSel)
  {
     var objSel = objSel[objSel.selectedIndex]
     var optionValue = objSel.text;

     var objTextArea = document.getElementById('source');
     var source = objTextArea.value


     var marquee = String(source.match(/<marquee[^>]+>/)) //source.substring(0,source.indexOf("\n"));

         marquee = marquee.replace(/width="[^"]+"/,'width="'+optionValue+'"');


     objTextArea.value =  source.replace(/<marquee[^>]+>/,marquee) //


     document.getElementById('execArea').innerHTML = objTextArea.value;
  }

  function setHeight(objSel)
  {
     var objSel = objSel[objSel.selectedIndex]
     var optionValue = objSel.text;

     var objTextArea = document.getElementById('source');
     var source = objTextArea.value


     var marquee = String(source.match(/<marquee[^>]+>/)) //source.substring(0,source.indexOf("\n"));

     if(marquee.search(/height=/) == -1)
     {
         marquee = marquee.replace(/(width="[^"]+")/,'$1 height="'+optionValue+'"');
     }
     else
     {
         marquee = marquee.replace(/height="[^"]+"/,'height="'+optionValue+'"');
     }

     objTextArea.value =  source.replace(/<marquee[^>]+>/,marquee) //


     document.getElementById('execArea').innerHTML = objTextArea.value;
  }


  function setBehavior(objSel)
  {
     var objSel = objSel[objSel.selectedIndex]
     var optionValue = objSel.text;

     var objTextArea = document.getElementById('source');
     var source = objTextArea.value


     var marquee = String(source.match(/<marquee[^>]+>/)) //source.substring(0,source.indexOf("\n"));

         marquee = marquee.replace(/behavior="[^"]+"/,'behavior="'+optionValue+'"');


     objTextArea.value =  source.replace(/<marquee[^>]+>/,marquee) //


     document.getElementById('execArea').innerHTML = objTextArea.value;
  }


  function setDirection(objSel)
  {

     var objSelHeight = document.getElementById('intHeight');
     if(objSel.selectedIndex>1 && objSelHeight.selectedIndex<1)
     {
         alert('height=100 이상으로 선택해주셔야 올바른 실행을 보실 수 있습니다.');

     }

     var objSel = objSel[objSel.selectedIndex]
     var optionValue = objSel.text;

     var objTextArea = document.getElementById('source');
     var source = objTextArea.value


     var marquee = String(source.match(/<marquee[^>]+>/)) //source.substring(0,source.indexOf("\n"));

         marquee = marquee.replace(/direction="[^"]+"/,'direction="'+optionValue+'"');


     objTextArea.value =  source.replace(/<marquee[^>]+>/,marquee) //


     document.getElementById('execArea').innerHTML = objTextArea.value;
  }


  function setLoop(objSel)
  {
     var objSel = objSel[objSel.selectedIndex]
     var optionValue = objSel.text;

     var objTextArea = document.getElementById('source');
     var source = objTextArea.value


     var marquee = String(source.match(/<marquee[^>]+>/)) //source.substring(0,source.indexOf("\n"));

         marquee = marquee.replace(/loop="[^"]+"/,'loop="'+optionValue+'"');


     objTextArea.value =  source.replace(/<marquee[^>]+>/,marquee) //


     document.getElementById('execArea').innerHTML = objTextArea.value;
  }

  function setScrollAmount(objSel)
  {

     var objSel = objSel[objSel.selectedIndex]
     var optionValue = objSel.text;

     var objTextArea = document.getElementById('source');
     var source = objTextArea.value


     var marquee = String(source.match(/<marquee[^>]+>/)) //source.substring(0,source.indexOf("\n"));

         marquee = marquee.replace(/scrollamount="[^"]+"/,'scrollamount="'+optionValue+'"');


     objTextArea.value =  source.replace(/<marquee[^>]+>/,marquee) //


     document.getElementById('execArea').innerHTML = objTextArea.value;
  }


  function setScrollDelay(objSel)
  {

     var objSel = objSel[objSel.selectedIndex]
     var optionValue = objSel.text;

     var objTextArea = document.getElementById('source');
     var source = objTextArea.value


     var marquee = String(source.match(/<marquee[^>]+>/)) //source.substring(0,source.indexOf("\n"));

         marquee = marquee.replace(/scrolldelay="[^"]+"/,'scrolldelay="'+optionValue+'"');


     objTextArea.value =  source.replace(/<marquee[^>]+>/,marquee) //


     document.getElementById('execArea').innerHTML = objTextArea.value;
  }

  function setMoving(objSel)
  {

     var objSel = objSel[objSel.selectedIndex]
     var optionValue = objSel.text;

     var objTextArea = document.getElementById('source');
     var source = objTextArea.value

     var marquee = String(source.match(/<marquee[^>]+>/)) //source.substring(0,source.indexOf("\n"));

     if(optionValue == "Yes")
     {

           marquee = marquee.replace(/>/,' onmouseover="this.stop()" onmouseout="this.start()" >');
     }
     else
     {
            marquee = marquee.replace(/ onmouseover="this.stop\(\)" onmouseout="this.start\(\)"/,'');
     }

     objTextArea.value =  source.replace(/<marquee[^>]+>/,marquee) //

     document.getElementById('execArea').innerHTML = objTextArea.value;
  }
</script>

<body>


<b>출처</b> : <a href=http://home.hanmir.com/~epjang/>http://home.hanmir.com/~epjang/</a>


<table border="1">
<tr>
  <td rowspan="2">
    <h3>속성</h3>
    <ul>
      <li>
        width=<select onchange="setWidth(this)"><option>100</option><option selected>300</option><option>500</option></select> height=<select id="intHeight" onchange="setHeight(this)"><option>0</option><option>100</option><option>300</option></select>
      </li>
      <li>
        behavior = <select onchange="setBehavior(this)"><option>alternate</option><option selected>scroll</option><option>slide</option></select>
      </li>
      <li>
        direction = <select onchange="setDirection(this)"><option>left</option><option>right</option><option>down</option><option>up</option></select>
      </li>
      <li>
        loop=<select onchange="setLoop(this)"><option>-1</option><option>1</option><option>2</option><option>3</option></select>
      </li>
      <li>
        scrollamount = <select onchange="setScrollAmount(this)"><option>1</option><option>3</option><option selected>6</option><option>9</option></select>
      </li>
      <li>
        scrolldelay = <select onchange="setScrollDelay (this)"><option>20</option><option selected>85</option><option>300</option></select>
      </li>
    </ul>
    <h3>이벤트</h3>
    <ul>
     <li>마우스 올려놓으면 멈추고 벗어날때 다시 움직임  <select onchange="setMoving(this)"><option>No</option><option>Yes</option></select>
    </ul>
  </td>
  <td >
    <span id="execArea">
    <marquee width="300" height="0" behavior="scroll" direction="left"  loop="-1"
             scrollamount="6" scrolldelay="85">이 곳에 내용이 들어갑니다.</marquee>
    </span>
  </td>
</tr>
<tr>
  <td>
    <textarea id="source" style="width:500px;height:100px;">
<marquee width="300" height="0" behavior="scroll"
          direction="left" loop="-1"
          scrollamount="6" scrolldelay="85" >
   이 곳에 내용이 들어갑니다.
</marquee>
    </textarea>
  </td>
</tr>
</table>