라디오버튼 클릭시 input 박스 활성화 시키기

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:45
반응형

<input type="radio" name="ip" value="<?=$ip?>" checked onClick="this.form.anotherip.disabled=true"> 접속자 IP

<input type="radio" name="ip" value="myip_no" onClick="this.form.anotherip.disabled=false"> IP 지정

<input type="text" name="anotherip" size="15" disabled>


input 박스 여러개를 활성화 해야 할 경우엔 아래와 같이 ; 로 구분하여 내용을 추가하면 됩니다.


onClick="this.form.anotherip.disabled=true; this.form.anotherip.disabled=true;"

onClick="this.form.anotherip.disabled=close; this.form.anotherip.disabled=close;"


반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

table 내용 엑셀로 저장하기  (0) 2015.01.27
[JavaScript] 이미지를 방향키로 움직일 수 있고, 좌표가 표시됩니다.  (0) 2015.01.27
[javascript] 글자나 이미지에 마우스를 올리면 다른곳의 이미지가 변경  (0) 2015.01.27
[html] a 태그 밑줄 없애기  (0) 2015.01.27
[html] 테이블 테두리 얇게하기  (0) 2015.01.27

댓글()

[javascript] 글자나 이미지에 마우스를 올리면 다른곳의 이미지가 변경

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:44
반응형

<head> 와 </head> 사이에 입력

<script language="JavaScript">

<!--

pic0 = new Image();

pic0.src = "insert0.jpg";

pic1 = new Image();

pic1.src = "insert1.jpg";

pic2 = new Image();

pic2.src = "insert2.jpg";

pic3 = new Image();

pic3.src = "insert3.jpg";

// -->

</script>



<body> 와 </body> 사이에 입력

<table>

  <tr>

    <td>

<a href="" onmouseover="document.images.text.src=pic1.src" onmouseout="document.images.text.src=pic0.src" target="_top"><img src="1.jpg" border="0"></a>

<a href="" onmouseover="document.images.text.src=pic2.src" onmouseout="document.images.text.src=pic0.src" target="_top"><img src="2.jpg" border="0"></a>

<a href="" onmouseover="document.images.text.src=pic3.src" onmouseout="document.images.text.src=pic0.src" target="_top"><img src="3.jpg" border="0"></a> 

    </td>

  </tr>


  <tr>

    <td id="textbox">

      <img src="insert0.jpg" name="text" border="0">

    </td>

  </tr>

</table>


1.jpg 나 2.jpg 나 3.jpg 에 마우스를 올리면 별도의 위치에 insert1.jpg, insert2.jpg, insert3.jpg 이미지가 뜹니다.

그리고 마우스가 위치를 벗어나면 insert0.jpg 기본 이미지 출력됩니다.


반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

[JavaScript] 이미지를 방향키로 움직일 수 있고, 좌표가 표시됩니다.  (0) 2015.01.27
라디오버튼 클릭시 input 박스 활성화 시키기  (0) 2015.01.27
[html] a 태그 밑줄 없애기  (0) 2015.01.27
[html] 테이블 테두리 얇게하기  (0) 2015.01.27
[html] 이미지와 텍스트 높이 맞추기 (이미지 높이 지정)  (0) 2015.01.27

댓글()

[html] a 태그 밑줄 없애기

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:44
반응형

HTML의 a태그로 만들어진 링크에는, 기본적으로 항상 밑줄(Underline)이 붙습니다.

요즘에는 링크에서 밑줄을 지우는 것이 일반적입니다. 링크에서 밑줄을 삭제하려면

style="text-decoration:none"

이라는 스타일을 지정하면 됩니다. 또는 클래스를 만들어 지정해 주어도 됩니다.


그런데 text-decoration:none 을 지정해도, 아주 복잡한 웹페이지의 경우에는 링크가 없어지지 않는 경우가 있습니다. CSS 속성들이 서로 뒤엉켜 있기 때문입니다. 이때는

!important

이라는 (느낌표+important) 구문을 추가하여 강제로 지정해야 합니다. 다음 예제와 같습니다:

링크 텍스트에서, 언더라인(밑줄) 삭제 예제


파일명: example.html

<html>
<head>
<style type="text/css">

/* 링크에서 밑줄 없애기 */
a.no-uline { text-decoration:none }

/* 마우스 지나갈 때만 삭제 + 강제로 없애기 */
a.noul:hover { text-decoration:none !important }

</style>
</head>


<body>


<!-- 스타일을 직접 지정하여, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" style="text-decoration:none">Google 검색</a>


<br />


<!-- a.no-uline 클래스를 이용하여, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" class="no-uline">Google 검색</a>


<br />


<!-- 마우스를 가져갔을 때에만, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" class="noul">Google 검색</a>


</body>
</html>


▶▶ HTML-CSS] 마우스 가져갔을 때에만, 밑줄(언더라인) 표시; Mouse Hover Underline

모든 밑줄 한꺼번에 없애는 법: ▶▶ A태그에서 밑줄을 없애려면? 링크 언더라인 지우려면? Link Underline Remove


[출처] http://mwultong.blogspot.com/2007/02/html-css-links-without-underline.html

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

라디오버튼 클릭시 input 박스 활성화 시키기  (0) 2015.01.27
[javascript] 글자나 이미지에 마우스를 올리면 다른곳의 이미지가 변경  (0) 2015.01.27
[html] 테이블 테두리 얇게하기  (0) 2015.01.27
[html] 이미지와 텍스트 높이 맞추기 (이미지 높이 지정)  (0) 2015.01.27
[html] 마우스 올려놓았을때 이미지 변경시키는 방법  (0) 2015.01.27

댓글()

[html] 테이블 테두리 얇게하기

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:41
반응형
<table width="100" height="50" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse; border:1px gray solid;">
  <tr>
    <td>내용</td>
  </tr>
</table>
 

 

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

[javascript] 글자나 이미지에 마우스를 올리면 다른곳의 이미지가 변경  (0) 2015.01.27
[html] a 태그 밑줄 없애기  (0) 2015.01.27
[html] 이미지와 텍스트 높이 맞추기 (이미지 높이 지정)  (0) 2015.01.27
[html] 마우스 올려놓았을때 이미지 변경시키는 방법  (0) 2015.01.27
로그인 박스 안에 텍스트(이미지)넣기  (0) 2015.01.27

댓글()

[html] 이미지와 텍스트 높이 맞추기 (이미지 높이 지정)

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:40
반응형

이미지와 문자의 높이를 맞춰주는 옵션입니다.

 

<img src="/images/sysdocu.png" align="absmiddle"> 내용


그래도 높이가 안맞을 경우 아래와 같이 이미지 하단 여백을 주어 맞출 수 있습니다.


<img src="/images/sysdocu.png" align="absmiddle" style="margin-bottom:8px"> 내용

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

[html] a 태그 밑줄 없애기  (0) 2015.01.27
[html] 테이블 테두리 얇게하기  (0) 2015.01.27
[html] 마우스 올려놓았을때 이미지 변경시키는 방법  (0) 2015.01.27
로그인 박스 안에 텍스트(이미지)넣기  (0) 2015.01.27
input 입력상자 사이즈 고정시키기  (0) 2015.01.27

댓글()

[html] 마우스 올려놓았을때 이미지 변경시키는 방법

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:38
반응형

<img src="sysdocu_off.gif" onmouseover="this.src='sysdocu_on.gif';" onmouseout="this.src='sysdocu_off.gif';">

 

sysdocu_off.gif 는 마우스 올리기전의 이미지이고

sysdocu_on.gif 는 마우스 올리면 변경될 이미지입니다.

 

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

[html] 테이블 테두리 얇게하기  (0) 2015.01.27
[html] 이미지와 텍스트 높이 맞추기 (이미지 높이 지정)  (0) 2015.01.27
로그인 박스 안에 텍스트(이미지)넣기  (0) 2015.01.27
input 입력상자 사이즈 고정시키기  (0) 2015.01.27
쿠키를 이용한 팝업창 소스  (0) 2015.01.27

댓글()

로그인 박스 안에 텍스트(이미지)넣기

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:37
반응형

네이버나 다음 등 포털 사이트들의 로그인 박스를 보면 박스안에 아이디/비밀번호 이런 글씨가 들어가 있고

클릭하면 사라졌다 클릭 해제하면 다시 나오는 효과를 볼수 있습니다.


 

일단 스타일부분 입니다. 아래소스를 페이지 head와 head 사이 또는 css 파일에 넣어주세요.

id_blur / id_focus 부분이 아이디 input 효과

pw_blur / pw_focus 부분이 비밀번호 input 효과입니다.

 

<style>
ol,ul,li {list-style:none;}
.id_blur { border:#ddd 1px solid; background: transparent url(bg.gif) no-repeat; font-size:11px; font-family:돋움; width: 125px; height: 15px; line-height:14px; background-color:#f9f9f9;} 
.id_focus { border:#ddd 1px solid; background-color:#f9f9f9; color:#9e9e9e; font-size:11px; font-family:돋움; width: 125px; height: 15px; line-height:15px; } 
.pw_blur {border:#ddd 1px solid; background: transparent url(bg2.gif) no-repeat; font-size:11px; font-family:돋움; width: 125px; height: 15px; line-height:15px; background-color:#f9f9f9;} 
.pw_focus { border:#ddd 1px solid; background-color:#f9f9f9; color:#9e9e9e; width: 125px; height: 15px; font-size:10px; line-height:15px;}
</style>

페이지에 들어갈 소스입니다.
원하는 위치에 이 소스를 넣어주시면 됩니다.
 

<ul >
  <li>
    <input type="text" name="txtUserId" onFocus="this.className='id_focus'" onBlur="if ( this.value == '' ) { this.className='id_blur' }"  class='id_blur' />
  </li>
  <li>
    <input type="password" name="txtUserPw" onFocus="this.className='pw_focus'" onBlur="if ( this.value == '' ) { this.className='pw_blur' }"  class='pw_blur' />
  </li>
</ul>

[출처] HSBN 향사발 (http://blog.naver.com/shadk18/10125136905)

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

[html] 이미지와 텍스트 높이 맞추기 (이미지 높이 지정)  (0) 2015.01.27
[html] 마우스 올려놓았을때 이미지 변경시키는 방법  (0) 2015.01.27
input 입력상자 사이즈 고정시키기  (0) 2015.01.27
쿠키를 이용한 팝업창 소스  (0) 2015.01.27
이미지 클릭시 팝업창 뜨게 하기  (0) 2015.01.27

댓글()

input 입력상자 사이즈 고정시키기

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:37
반응형

특히 type=password 일 경우 text 와 다르게 높이가 약간 높아지게 되는데

text 와 높이를 같게 하려면 아래와 같이 style 을 이용해 높이를 고정 시키면 됩니다.

 

<input type="password" name="password" style="width:120px;height:20px">

 

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

[html] 마우스 올려놓았을때 이미지 변경시키는 방법  (0) 2015.01.27
로그인 박스 안에 텍스트(이미지)넣기  (0) 2015.01.27
쿠키를 이용한 팝업창 소스  (0) 2015.01.27
이미지 클릭시 팝업창 뜨게 하기  (0) 2015.01.27
html 기본 풀다운 메뉴 만들기  (0) 2015.01.27

댓글()

쿠키를 이용한 팝업창 소스

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:37
반응형

==팝업창을 여는 페이지==

<script>

//팝업창 함수 정의

function popup()
{
 winopen=window.open('popup.html','winopen','width=팝업창 폭,height=팝업창 넓이,scrollbars=no');
}

//쿠키 검사 함수 정의

function getCookie(name)
{
       var prefix = name + "=";
       var cookieStartIndex = document.cookie.indexOf(prefix);
       if (cookieStartIndex == -1) return null;
       var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
       if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length;
       return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
}

//쿠키가 존재하지 않으면 팝업창을 연다.

if(getCookie("쿠키이름")==null) 
{
 popup();
}

</script>

<html>

코딩...

</html>

 

 

==열릴 팝업창 소스==

<script>

//쿠키 생성 함수정의

function setCookie( name, value, expiredays ) 
{ 
var todayDate = new Date(); 
todayDate.setDate( todayDate.getDate() + expiredays ); 
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";" 

}

 

//오늘하루이창보지않음 체크시 창을 닫고 쿠키를 생성

function closeWin() 
{ 
        setCookie( "쿠키이름", "done" , 1); 
        self.close(); 
}

</script>

<a href='javascript:closeWin('>오늘하루이창열지않음</a>

 

[출처] Programmer's My Dream.. | 철마신 (http://ljmgood123.blog.me/53109660)

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

로그인 박스 안에 텍스트(이미지)넣기  (0) 2015.01.27
input 입력상자 사이즈 고정시키기  (0) 2015.01.27
이미지 클릭시 팝업창 뜨게 하기  (0) 2015.01.27
html 기본 풀다운 메뉴 만들기  (0) 2015.01.27
html img 태그의 alt 옵션 줄바꿈  (0) 2015.01.27

댓글()

이미지 클릭시 팝업창 뜨게 하기

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:37
반응형

<img style="cursor: pointer;" onclick="window.open('/html/gift.php', 'window', 'width=500; height=800; scrollbars=yes');" src="/images/images.jpg" border="0" complete="complete"/>

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

input 입력상자 사이즈 고정시키기  (0) 2015.01.27
쿠키를 이용한 팝업창 소스  (0) 2015.01.27
html 기본 풀다운 메뉴 만들기  (0) 2015.01.27
html img 태그의 alt 옵션 줄바꿈  (0) 2015.01.27
iframe 옵션들  (0) 2015.01.27

댓글()

html 기본 풀다운 메뉴 만들기

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:35
반응형

<form name="run1" method="post" action="">
날짜를 선택해 봅니다.
 

<label>
  <select name="c_year" id="c_year">
    <option>2011</option>
    <option>2012</option>
  </select>
</label>
 

<label>
  <select name="c_month" id="c_month">
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
  </select>
</label>

 
<input type="submit" name="send" id="send" value="선택">

</form>

 

<? echo "당신은 $c_year 년 $c_month 월을 선택하셨습니다."; ?>

 

반응형
저작자표시 비영리 변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

쿠키를 이용한 팝업창 소스  (0) 2015.01.27
이미지 클릭시 팝업창 뜨게 하기  (0) 2015.01.27
html img 태그의 alt 옵션 줄바꿈  (0) 2015.01.27
iframe 옵션들  (0) 2015.01.27
[팝업] window.open 속성 사용 예제  (0) 2015.01.27

댓글()
이전 1 2 3 4 5 6 7 다음

티스토리툴바