Html 사용법, 팁

1. 개채의 속성 출력

<img id='id1' src='test.gif'>

<script type="text/javascript">
for (propName in id1.style) {
    document.write('id1.',propName,'="',id1.style[propName],'"<BR>');
}
</script>


2. 마우스가 올라가면 그림이 변함

<script language="JavaScript">
if (document.images) {
    var go_on = "on.gif";
    go_off= "off.gif";
}
function SwapImage (id, name) {
    if (document.images) document.images[id].src=eval(name);
}
</script>

<img name="id1" src="off.gif"
    onMouseOver="SwapImage ('id1', 'go_on');"
    onMouseOut ="SwapImage ('id1', 'go_off');"
>


3. 입력폼이 타당한지 검사

<script language=JavaScript>
function check_form () {
    if (document.form.name.value == "") {
        alert ('error');
        form.name.focus();
        return false;
    }
    return true;
}
</script>

<form name='form' method='post' action='$pgname;' onsubmit='return check_form ()'>
...
</form>



4. 타이머 설정

<script language=JavaScript>
var ident;
function TimeOutFunction () {
    window.clearTimeout (ident);
    window.status="timer off";
}
ident = window.setTimeout ("TimeOutFunction ()", 3000);
window.status="set 3,000ms timer";
</script>



5. iframe 크기조절

<iframe name='border_iframe' scrolling='no' frameborder='0' width='652' height='500' src='board.cgi'></iframe>

iframe 의 마지막 부분에 다음을 넣으면 된다.

<div id='endofhtml'></div>
<script language=JavaScript>
parent.document.all.border_iframe.height = endofhtml.offsetTop;
</script>



6. 파일 올리기

<form enctype="multipart/form-data" method=post action="http://Localhost/Scripts/CGI.exe">
<input type=file name="file" size=40>
</form>



7. select 에서 값을 가져오기

<script language=JavaScript>
function ChangeSelectOption1() {
    spp = document.form.selitem.selectedIndex;
    alert ("Method1="+document.form.selitem.options[spp].value);
    return;
}
function ChangeSelectOption2() {
    alert ("Method2="+document.form.selitem2.value);
    return;
}
</script>

<form name="form">
<SELECT name='selitem' OnChange='javascript:ChangeSelectOption()'>
        <option label="3.7.0" value="pm3_3.7.1">ALL</option>
    <OPTGROUP label="PortMaster 3">
        <option label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
        <option label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
    </OPTGROUP>
    <OPTGROUP label="IRX">
        <option label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
        <option label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
    </OPTGROUP>
</SELECT>
</form>