login register Sysop! about ME  
qrcode
    최초 작성일 :    1998년 09월 01일
  최종 수정일 :    2001년 06월 12일
  작성자 :    taeyo
  편집자 :    Taeyo (김 태영)
  읽음수 :    378,641

강좌 목록으로 돌아가기

필자의 잡담~

..

카운터를 이미지로 이쁘게 나타내기

(태오 사이트에서 사용했었던 카운터 모습 )


안녕하세요? taeyo입니다.

이번에 해볼 것은 기본적으로 텍스트로 나타나게 되는 카운터를 이미지로 바꾸어서 조금은 이쁘게 나타내게 하는 것입니다. 여러분 스스로 해보세요 라고 하면... 머리를 벅벅... 긁을..수..도 ..있겠지만 그다지 어려운 것이 아닙니다.

뭐 벌써 혼자서 구현하신 분도 얼마든지 계시다는 것을 알지만 뒤늦게나마 혹 도움이 될까하여 올립니다. 이전 강좌들을 통해서 여러분이 만든 카운터. <%=application("visit")%> 를 ASP 페이지에 코딩하면 텍스트 기반의 카운터가 올라오지요??

텍스트이기에 속도도 빠르고 뭐 쓸만하지만... 웹페이지의 디자인에 더욱 중점을 두고 싶으신 분이라면 이런 카운터도 아름다운 이미지를 이용하여 만들어 보시고 싶으실 것입니다. 자.. 그럼 지금부터 시작해볼까요?

이미 스스로 구현을 해보신 썸바디들은 자신의 방법과 비교해 보도록 하세요

우선 자기가 맘에 드는 이미지를 만드시거나 구하세요. 숫자 한씩의 이미지를 0 부터 9 까지.저의 경우 밑의 이미지를 제가 만들었습니다만.. 그다지 깜찍하지는 않네요..쓸만하기만 하지. ^^  참아주십시요.. 전 프로그래머이지 디자이너는 아닙니다. 물론, 디자이너들이 울고 갈만한 드자인 능력은 갖추고 있습니다만...  -__-;

이름들은 0.gif, 1.gif, 2.gif....뭐 이런식으로 주었습니다.

그리고, 이 이미지들을 현재 디렉토리의 하위디렉토리로 images 라는것을 만들고 모두 거기에 카피해 두었지요...

현재의 카운터값은 아시다시피<%=application("visit")%>로 받아오지요??? 이전 강좌를 읽어보지않으신 분이라면...

"언제요? 무슨터무니없는 소릴..."

이라고 하시겠지만.. 이전 카운터 강좌에서 이미 했었습니다.모른척하면 안되여~~

좋습니다. 만일 그 값이 52407 이라는 값이라고 합시다. 전 강좌까지는 카운터를 그냥 52407 이라고 썰렁하게 찍어주었죠? 이제 위의 숫자대신에 글자마다 이미지로 대치해 보다는 것입니다. 그렇게 하게하는 소스를 볼까요???

<html><body>
<basefont size=2>
<%
Count = application("visit")
visitCount = ""

for i = 1 to len(Count)
   select case Mid(Count,i,1)
      case "1"
         visitCount = visitCount & "<img src=images/1.gif align=absmiddle>"
      case "2"
         visitCount = visitCount & "<img src=images/2.gif align=absmiddle>"
      case "3"
         visitCount = visitCount & "<img src=images/3.gif align=absmiddle>"
      case "4"
         visitCount = visitCount & "<img src=images/4.gif align=absmiddle>"
      case "5"
         visitCount = visitCount & "<img src=images/5.gif align=absmiddle>"
      case "6"
         visitCount = visitCount & "<img src=images/6.gif align=absmiddle>"
      case "7"
         visitCount = visitCount & "<img src=images/7.gif align=absmiddle>"
      case "8"
         visitCount = visitCount & "<img src=images/8.gif align=absmiddle>"
      case "9"
         visitCount = visitCount & "<img src=images/9.gif align=absmiddle>"
      case "0"
         visitCount = visitCount & "<img src=images/0.gif align=absmiddle>"
   End select
Next
%>       
현재 전체 카운트 : <%=visitCount%>
</body></html>


전 이 페이지의 이름을 main.asp 라고 주었구요. 이 페이지를 작성한 후에 브라우저를 열고 접근하면 다음과 같은 화면이 나올 것입니다. 물론, 카운터의 수치는 다를 수 있겠죠?

이렇습니다. 카운터가 필요한 곳에 위의 소스를 넣으시면 되겠지요?? 뭐... 더 설명드릴 필요도 없지요??? 너무나도 간단하니까요... 라고 말하니깐.. 바로 날아오는 야유를 느낄 수가 있네요...

알겠습니다. 소스에 대한 설명을 드리도록 하지요..

먼저, 우리는 어플리케이션 카운터값을 가져와서 Count 라는 로컬변수에 담습니다. 이유는 없습니다. -_-;  그냥....

그리고, 우리는 이제 이 카운터 문자열에서 각각의 문자를 뽑아내서리... 그 문자대신에 그 문제에 해당하는 이미지로 바꾸어 주려고 하는 것입니다. 만일, 숫자가 1 이라면 <img src= "images/1.gif">로 바꾸어서 태그가 적용된 모습인 로 나오게 하는 것이지요. 그렇게 하기 위해서는 52407 이라는 문자열에서 각각의 숫자를 뽑아내와서 바꾸어 주어야 할 것입니다. 이를 위해서는 mid라는 VBScript 함수가 있지요

Mid 함수는 특정문자열에서 지정된 위치부터 지정된 수만큼의 문자를 뽑아내는 함수입니다. 이것의 인자는 3개인데, 첫번째 인자는 원본 문자열이구요. 두번째 인자는 추출을 시작할 문자열의 인덱스 위치입니다. 세번째 인자는 지정된 위치에서부터 몇 글자나 뽑아올지 그 수를 지정하는 것이지요

해서 예를 들어....

Mid("taeyo", 4, 2)  라고 하게되면 "taeyo"라는 문자열에서 4번글자인 "y" 부터 2글자를 뽑아오게 되니깐  "yo"라는 문자가 나오게 될 것이랍니다.  ^^

우리는 52407 이라는 문자에서 첫번째 문자부터 1글자씩 떼어내서 각각의 숫자를 그와 대응되는 이미지태그로 바꾸어 줄 것이기에 위처럼 글자수 만큼 Loop 를 돌면서 각각 Mid 해내고 있는 것이지요 ^^

이제는 조금 이해가 가지요? ^^

이해가 가시는 분은 좋은 하루 되시구요..
이해가 가지 않는 분은 이해를 하시고 좋은 하루가 되세요...

Mid 함수에 대해서 조금 더 공부해야 하겠다 하시는 분은 다음 VBScript Online 사이트로 가셔서 공부를 해보도록 하세요..  반드시 알아두어야 하는 사이트이고, 이 사이트의 내용을 많이 알면 알수록 여러분의 내공은 일취월장할 것입니다.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/vtorifunctions.asp


authored by


 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})