동동이의 블러그

checkbox
radio
button
listbox

invalid-file

말하는 원칙에 대해

언뜻 생각하면 말하는 것, 즉, '커뮤니케이션' 하는 것이 쉽다고 생각될 수 있습니다. 그러나 '내가 말해야 하는 것 (나의 아이디어, 컨셉, fact)'을 제 3자인 청중에게 '말하는 (커뮤니케이션)'하는 기술은 결코 쉬은 일은 아닙니다. 프리젠테이션 시작에 앞서 우선, 프리젠테이션에 대한 'agenda'나 프리젠테이션의 목표가 포함되는 소개로 시작하시기 바랍니다. 그리고 내용, 정보를 제공하고 프리젠테이션을 요약합니다.

마지막이 처음입니다 - 요약/결론 슬라이드
한 조사에 의하면 프리젠테이션에 참석하는 사람들은 5개 이하의 중요한 점만을 "기억"한다고 합니다. 이상적으로, 발표자는 기억해야 할 5개 이상의 중요한 점, 컨셉(concept), 사실(fact)에 대한 목록을 가지고 있어야 합니다. 그리고 참석자들에게는 자신이 기억하는 5가지 점에 대한 목록이 있어야 합니다. 전달이 중요하단 의미입니다.

그러면 상관관계란?
당신의 메시지가 관중들에게 피드백이 있습니까? 또는 참석자들이 중요하지 않는 점을 기억하고 당신의 중요한 아이디어는 놓치고 있지는 않습니까? 그들이 5가지 점만을 기억한다는 것은 좋은 사인이 아닙니다. 그들은 당신이 중요하다고 생각하는 것을 중요하게 생각하지 않을 수도 있습니다. 당신이 중요하다고 생각하는 점을 그들이 하나도 기억하지 못한다면? 당신의 청중이 기억하기를 원하는 것을 그들이 기억하게 하려면?

마지막 슬라이드로 시작하십시오! 정말입니다. 프리젠테이션을 할 준비가 되어 있을 때 당분간 자세한 점들은 잊기 바랍니다. 그리고 프리젠테이션의 구성도 잊으십시오, 대신,

결론이나 요약을 먼저 적으십시오! 그러면 당신이 계획하는 가장 중요한 점이 강조됩니다. 이러한 점을 눈에 띄게 만들게 되면, 요점을 향해 당신의 프리젠테이션을 상대적으로 쉽게 이끌어갈 수 있습니다.

The Basic Rules of Good Presentations

KISS - Keep It Simple Stupid (간단하고 짧게)
SES 법칙 (Simple, Easy, Short)라고도 합니다. 요점부터 말하자면, 더 복잡하게 만들게 되면 더 많은 곤란을 격게 된다는 것입니다. 메시지 전달에 프리젠테이션이 집중하도록 하며, 특별 효과와 현란한 기교를 많은 정렬을 쏟지 마시기 바랍니다. 너무 현란한 그래픽과 효과는 청중을 산만하게 하고, 청중들로 하여금 당신의 메시지가 아닌 그림을 보게 하는 결과를 가지고 옵니다. 명심하십시오! 프리젠테이션의 목적은 메시지의 전달입니다. 그리고 어떤 경우에도 프리젠테이션을 시작하기 10분 전에는 임대장비가 도착해야 합니다. 와야 할 장비가 제 시간에 도착하지 않아 당황하게 되면 중요한 프리젠테이션을 망치게 됩니다.

프리젠테이션 리허설하기
가장 프로다운 이미지를 주기 위해서는, 바로 당신이 자신의 프리젠테이션 내용을 알아야 합니다. 발표자가 이해하지 못하는, 받아들이지 못하는 아이디어와 컨셉은 청중에게 전혀 먹히지 않습니다. 초점이 없고, 노트 내용과 무관하고, 연설 중 생각을 정리하기 위해서 긴 간격을 두는 것과 같이, 갈팡질팡하는 프리젠테이션은 또한 청중들에게 결코 받아들여지지 않습니다.

프리젠테이션 리허설에서는 실제로 프리젠테이션을 진행할 상황에서 연습하시기 바랍니다. 또한 실제와 같은 장비인 슬리이드, 프로젝트 빔을 사용하고 프리젠테이션이 있을 같은 방에서 리허설을 하십시오. 무선 마우스, 레이져 포인터 또는 마이크로폰을 사용할 지 결정합니다. 이러한 실제 장비로 프리젠테이션을 리허설합니다. 그리고 시작 전에 모든 장비를 점검하고 사용법을 숙지하여야 합니다.

개인적인 경험으로 프리젠테이션이 직업이라고 할 수 있을 정도로 여러 국가를 다니면서 프리젠테이션을 했던 상사들 중에서도 치명적인 실수를 하는 적을 간혹 보았습니다. 비행기 안에서 프리젠테이션에 대한 준비 중 빠진 점이 없는가 다시 생각하면서도 예측하지 못할 상황들이 발생합니다. 노트북을 이용하고 해외에서 프리젠테이션을 한다면 그 국가에 맞는 전기 어탭터를 준비하시기 바랍니다. 그리고 바테리 충전을 반드시 점검합니다. 때에 따라 여분의 긴 전기 익스텐션 라인도 필요합니다. 인터넷과 연결하여 실시간으로 데모가 필요하다면 인터넷 설정을 확인합니다. 경우에 따라 달팽이처럼 느린 인터넷 라인이 현장에 연결되었을 경우 대안 B로 만든 캡처 화면을 이용하시기 바랍니다. 청중들은 기다려 주지 않습니다. 청중들은 인내를 용인하지 않습니다.

내용을 외우지 마십시오 -- 가슴으로 이해하십시오!
리허설을 통해 프리젠테이션 내용을 기억하고 가슴으로 이해해야 합니다. 명심하십시오! 당신은 프리젠테이션 내용을 암송하는 것이 아니라 발표하여야 합니다. 그를 위해서는 자신이 발표하는 내용을 믿고, 마음으로 인정하는 브래인스토밍을 하여야 합니다.

메모한 노트는 아껴서 사용합니다.
노트를 읽는데 너무 많은 시간을 할애하게 되면 듣는 사람들은 당신이 준비가 되지 않았다, 프로가 아니라고 판단하게 됩니다. 절제하여 준비한 노트를 사용하시기 바랍니다. 노트를 읽는 중에도 시선은 메모와 청중들을 번갈아가며 주어야 합니다.

정장보다는 성공을 입으십시오.
어떤 사람들은 프리젠테이션을 위해서 정장을 해야 한다고 말하고 어떤 사람들은 그렇지 않다고 합니다. 개인적으로 정답은 없다고 생각합니다. 어느 정도의 무게있는 정장을 입는 것이 좋지만, 필요에 따라서 프리젠테이션의 내용이나 상황에 따라 과감한 시도를 할 필요도 있기 때문입니다. 예로 청바지 홍보 프리젠테이션에서 직접 신제품을 입고 진행하는 것이 효과적일 수도 있습니다. 자신이 없다면 사람들에게 물어보십시오! 그리고 적절한 유모와 형식적인 진행을 신축성있게 사용합니다.

보조를 맞춥니다 -- 너무 빨리 또는 너무 늦게 진행하지 마십시오.
일반적으로 모든 "슬라이드"는 적어도 10초, 그리고 100초를 넘어서는 안됩니다. 한 장의 슬라이드로 몇 분을 소비한다면, 과감히 잘라야 합니다 (이것이 정답이라고 말하는 것은 아니지만 좋은 가이드라인입니다. 물론 일부 도표와 그래픽은 잘 보여주려면 몇 분도 걸릴 수 있습니다.) 그럴 경우, 긴 것은 몇 장의 "슬라이드"에 한해야 합니다. 한 장으로 몇 분을 설명하는 슬라이드가 늘어날 경우, 청중의 눈을 관찰하시기 바랍니다. 초점이 흐려지고, 많이 어수선해짐을 느낄 수 있을 것입니다. 그런 경우 스피드를 올려야 할 시간입니다.

프리젠테이션 도구는?
슬라이드, LCD, LDP 프로젝터, 랩탑, LCD 패널, 비디오, 멀티미디어, 사운드, 레이저 포인터, 라펠 마이크로폰, 오버헤드, 포스터프린터 등… 발표자로 사용할 수 있는 프리젠테이션 도구는 넘쳐납니다. 당신의 커뮤니케이션 needs, 프리젠테이션 환경을 결정하고 당신의 메시지를 전할 수 있는 적절한 도구를 선택하시기 바랍니다.

유인물을 준비합니다.
프리젠테이션은 좋았고 참석자의 반응이 좋았습니다. 더 이상 좋을 수 없었습니다. So what? What's wrong?

몇 명의 참석자들이 자신의 회사로 돌아갑니다. 그들은 상사에게 프리젠테이션에 대한 질문을 받고 브리핑을 하러 상사방으로 들어갑니다. 그들은 자신이 프리젠테이션에 참가하고 그에 대한 컨셉이 생겼다고 자신하였습니다. 그러나 그들은 불행히도 구체적으로 설명을 못하고 맙니다. 왜일까요?

제공된 유인물 또는 handout이 없거나 그 내용이 좋지 않기 때문입니다. 당신의 메시지에만 힘을 싣지 마십시오. 적절한 유인물은 종종 성공적인 프리젠테이션의 큰 효자 역할을 합니다.

자, 이제는 효율적인 프리젠테이션을 할 때입니다.

Overcoming Fear and Shyness

많은 중역을 포함해서 대부분의 사람들이 많은 사람들 앞에서 프리젠테이션을 하는데 공포를 느낍니다.

프리젠테이션을 하는 것이 초조해지면, Art Feierman은 다음과 같이 조언합니다. "그럴 경우, 이전에 들은 오래된 기술이 있습니다. 그 장소에서 나가서 주위를 돌아보고 잠시 눈을 감고 첫번째 줄에 있는 옷을 입지 않거나 속옷차림의 사람들을 연상합니다 (당신의 윤리가 허락하는 한에서!). 이러면 긴장이 풀어지고 거의 유모스러운 효과까지 주게 됩니다."

저도 개인적으로 많은 프리젠테이션 경험이 없었을 때, 모 상공회의소에서 4-500명의 관중들 앞에서 프리젠테이션을 한 적이 있었습니다. 우선 앞에 서니 사람들이 보이지 않았습니다. 내 제품에 대해서, 내 서비스에 대해서는 꿰뚫고 있었는데, 무엇을 말해야 할지도 정리도 안 되었습니다. 내용을 마음으로 이해하기 보다는 외운 이유이기도 하였지만. 더욱 더 큰 문제는 우선 눈을 어디에 두어야 할 지 갈팡질팡 되었습니다. 대중공포증이었습니다. 사람들은 하나 둘 들어오고 강당은 가득 차고. 그 때 같이 간 상사의 말이었습니다."우선 눈에 잘 보이는 한 두 사람을 골라서 그들에게 말을 하세요. 다른 사람들도 관찰해야지 하지만, 몇 명에게만 집중해요. 그게 어려우면 나에게 시선을 주세요. 알았지요?" 이렇게 나의 편을 청중 속에 심어놓는 것도 대중공포증을 피하는 방법 중의 하나입니다.

그렇게 함으로 당신의 "대중공포증"이 사라질 수도, 아닐 수도 있지만, 적어도 당신의 청중과 지속적으로 연결이 될 것이고, 피드백이 있게 됩니다.

Your Place as a Presentor

컴퓨터가 아니라 당신의 청중을 조절하십시오.

  - 당신의 청중과 마주하고,

  - 그들을관찰하고,

  - 눈을 마주칩니다 - 방 주위를 배회하거나 아래를 보지 마십시오. 방황은 초조의 사인이며, 아래를 쳐다볼 때 "다음에 할 것이 무엇인지 알아보려는 것"이라고 생각 할 수 있습니다. (기억하세요 - 당신은 연사입니다).

  - 컴퓨터를 의식하지 마시기 바랍니다. 즉, 그 뒤에 숨지 말란 말입니다. 무선 마우스를 가지고 청중의 앞에 서서 발표자, 리더, 중개자, 전달자로서 자신있게 섭니다.

질문을 미루는 방법과 지속적인 follow-up이 필요합니다.
당신이 발표하는 프리젠테이션의 성격에 따라, 프리젠테이션 중에 질문을 받는 것이 좋을 수도 있습니다. 어떤 경우 그 자리에서 질문에 답을 주는 것이 적절하기도 합니다. 그렇지 않을 경우, 그 점을 나중에 설명하는 것이 산만한 진행을 피할 수 있는 좋은 방법이 될 수 있습니다. 또는 회의가 끝난 후 설명할 수도 있습니다. 당신이 이 점을 어떻게 다룰 지 결정하는 것이 최상입니다.

프리젠테이션의 흐름을 조절하는 것. 적절할 경우, 질의응답 시간을 프리젠테이션 끝 부분에 Q&A 세션에서, 또는 끝난 후로 연기합니다. 다음과 같이 답을 하는 것이 좋을 것입니다. "제가 …을 다룬 후에 당신의 질문에 답을 하도록 하겠습니다." 또는 "이 프리젠테이션의 결론이 난 후에 당신과 제가 의논할 수 있습니다. 또는 "죄송하지만 지금 가능한 정보가 저에게 없습니다. 미팅이 끝난 후 만나서 당신의 이름을 받고… 다음 주에 연락드리겠습니다."

당신의 청중의 반응을 알 수 있는 방법은?
힌트: 코를 골며 자는 것은 정말로 나쁜 조짐입니다!

앞에서 청중 중에서 몇 명의 사람에게만 초점을 맞추라고 제안하였습니다. 그들이 경청하고 있습니까? 당신의 Body language는 어떻습니까? 청중들이 안절부절 못하거나 시계를 보고 있습니까? 필기는 하고 있나요? 졸고 있지는 않은지요? 중요한 것은, 당신의 프리젠테이션의 어떤 부분이 그들에게 감동을 주는지, 그리고 어떤 부분을 청취자들이 놓치고 있는지를 필기를 해야 하는 사람은 바로 당신입니다.

프리젠테이션 장비의 기술 발전으로...
지금 여러분에게는 랩탑과 프로젝터가 있습니다. 몇 년 내로 프리젠테이션 제품은 큰 성장을 보였습니다. 예로 오늘날 프로젝터는 컴퓨터가 지난 5년 내에 발전한 것처럼 지난 2년 사이에 많이 발전했습니다. 기능의 큰 향상으로 모든 사람들은 당신과 당신의 프리젠테이션에서 더 많은 것을 기대하는 것이 사실입니다.

프리젠테이션의 목적은 정보와 지식의 제공이지, 현란한 그래픽의 제공은 아닙니다.
이것은 아마도 KISS의 결론일 것입니다. 당신의 프리젠테이션의 목적은 아이디어와 정보를 커뮤니케이션하는 것이지 현란한 그래픽으로 사람들을 어지럽게 하는 것이 아닙니다. 프리젠테이션이 끝나게 되면, 깔끔한 그래픽, 특수 효과와 같은 것에 대해서가 아니라 당신이 설명한 아이디어에 대해 의논하려고 청중이 당신에게 걸어나오기를 당신은 원할 것입니다.

당신의 프리젠테이션에는 '의식'이 있습니다, 그러나 당신의 청중에게는 '무의식'이 있습니다.

내용 진행이 되었고 당신은 모든 규칙 - 프리젠테이션에서 지켜야 할 모든 것 - 즉, 방향, 초점, 정보, 강조 - 를 따랐습니다.

그러나 어떻게 하면 더 잘 할 수 있을 것인가?
열정 - 당신의 열정과 믿음을 커뮤니케이션 하는 것 외의 그 어떤 것도 당신의 프리젠테이션에 더 큰 도움이 될 수 없습니다. 이것은 복음사의 "당신은 믿습니까 - 저는 믿습니다"식은 아니지만, 청중은 당신의 믿음, 신뢰를 알게 되고, 이 점은 당신의 메시지에 신용을 추가하게 됩니다.

언어의 힘에 대해서...
당신이 선택하는 단어는 당신의 청중의 반응 - 발표자로서 당신의 아이디어와 당신의 효율성 모두에 -- 에 극적인 영향을 줍니다.

요즘 워드 프로세스에는 동의어 사전이 있습니다. 사용법을 효율적으로 배우시기 바랍니다. 청중의 주의를 끌고 신뢰와 능력이라는 인상을 줄 수 있는 "힘이 있고" "지배적인" 단어를 사용합니다.

일례로, "저는 생각하고 동의합니다"라는 말 대신에 "저는 당신이 동의할 것임을 확신합니다".
"저는 당신이 그렇게 생각할 것을 원합니다" 대신에 "저는 당신이 그렇게 생각하도록 추천합니다".
"당신"이라는 이인칭으로 당신의 청중을 대하기 바랍니다. "당신"은 매우 강한 단어입니다. 일반적으로 제 삼자로서 보다는 "당신"으로 칭할 때 청중들의 반응은 좋습니다. "참석자들은 이런 이익을 받게 됩니다". 대신 "참석자로서 당신은 이런 이익을 받습니다" 식으로 말합니다.

더 강한 영향력을 가진 더 "좋은" 단어를 찾아내기 위해서 뿐 아니라, 계속적으로 같은 단어를 과도하게 사용하지 않기 위해서 동의어 사전을 사용해야 합니다.

적시적절한 유머는 효과적입니다.
현명하게 사용된 적절한 양의 유머는 당신과 청중의 관계를 형성하고 당신의 청중이 계속 당신의 메시지에 관심을 갖고 주의를 기울이는데 많은 도움이 됩니다.

원칙적으로, 농담을 위한 농담을 하지 말고 어떠한 사항에 대해서 적절할 때 또는 휴식 시간 중에 농담을 하기 바랍니다. 약간의 유머나 때로의 관계없는 코멘트는 프리젠테이션을 생동감 있게 합니다. 기억하십시오. 졸고 있는 청중은 메시지를 거의 기억하지 못합니다. 졸고 있다면 적절한 유모로 그들을 깨우십시오. 저의 경험으로 발표자로서 청중을 볼 때 마치 그들은 어린아이와도 같습니다. 지루하면 이내 그 모습이 얼굴에 드러나게 됩니다. 이내 얼굴은 짜증어린 표정이 서리고, 졸기도 하고, 그리고 시계를 보게 됩니다.

행운을 잡는 것에 너무 서두르지 마시기 바랍니다. 진짜 사람들 앞에서 당신의 프리젠테이션을 리허설하는 것은 당신의 유머가 "먹히는지"를 시험할 수 있는 좋은 방법입니다. 어설픈 유모는 안 하니만 못합니다. "먹히고" "효과있는" 유머만을 하시기 바랍니다. 그것은 리허설 할 때 시험하시기 바랍니다.

유머파워 (Humor Power)의 저자인 심리학자 허브 트루는 유머의 중요성에 대하여 이렇게 언급하였습니다. "효과적인 의사 전달에서의 적절한 유머 사용은 상호간의 긴장을 없애주거나 적의를 없애주는데 절대적인 도움을 줍니다."

다음은 유머 사용에 대한 몇 가지 주의사항입니다.

프리젠테이션의 의도나 목적, 진행 내용과 반드시 연관이 있어야 한다.
  - 가능하면 새롭고 신선하고 예측하지 못한 것을 준비하여야 한다.
  - 유머는 간단 명료하면서도 전달하는 이미지가 강해야 한다.
  - 격의있는 고상한 유머를 준비하는 것이 좋다.
  - 가끔 자신의 실패담이나 성공담을 적절히 섞어 사용하여 청중들에게 감동을 준다.

청중을 집중시킬 수 잇는 효과적인 인용 또는 testimonial을 사용합니다.
적절한 인용은 당신의 청중에게 눈에띄는 영향을 줄 수 있습니다. 당신의 프리젠테이션에 직접적으로 관련있는 인용을 찾는 것은 늘 가능한 것은 아닙니다. 그러나 당신의 프리젠테이션의 개념을 보완하거나 도움을 주는 일련의 인용을 찾는 것은 때로 어렵지 않습니다. 이러한 인용이나 고객의 증언과 같은 것은 당신이 제안하는 아이디어와 fact를 뒷받침하는 좋은 증거가 될 수 있으며 이로 인하여 청중들은 신뢰로 이르게 됩니다.

예로, 한 발표자가 그의 프리젠테이션에서 토마스 왓슨(IBM), 켄 올슨(DEC), 빌 게이츠(Microsoft)…를 포함한 컴퓨터 "공상가"들에서 인용하기를 좋아한다고 합시다. 인용은 다음과 같습니다.

  - 토마스 왓슨 (이전 IBM 회장)은 컴퓨터가 이렇게 대중화 될지 생각하지 못했습니다.

  - 켄 올슨 (DEC의 창시자이지 이전 사장)은 모든 사람들이 집에 컴퓨터를 원하는지 알아내지 못했습니다.

  - 빌 게이츠는 640k 메모리가 모든 사람들에게 충분하리라 생각했습니다.

일단 인용을 한 후에, 청중은 더 많이 "보게"되고 - 그런 인용은 청중에게 영향력을 주게 됩니다.
당신의 청중과 코끼리 사이의 차이는 무엇인가? 코끼리는 잊는 일이 없는데 - 청중은 때때로 기억한다는 것!

Art's Rule of Five

리허설 시 해야 할 5가지

1. 실제 프리젠테이션 전 리허설을 할 때, 개요와 요약 슬라이드를 삭제하십시오. 대신 청중에게 관심있고, 기억되고, 혼동을 주는 것을 찾아냅니다. 그들이 매우 중요하다고 생각하는 것을 나열합니다. 당신의 메시지를 그들이 접수했습니까?

2. 프리젠테이션 전에 모든 당신의 장비를 테스트합니다.

3. 실제 프리젠테이션 중에 사용할 가능하면 모든 장비를 사용하여 리허설합니다.

4. 백업 플랜을 만듭니다. 프로젝터가 죽는다면, 컴퓨터가 망가진다면, 슬라이드 판에 이상이 있을 경우 어떻게 할 것인지. 대안 B는 무엇인지 (그리고 연습은 했는지?)

5. 소개, 목적, 개요,. 프리젠테이션, 요약 (결론)

청중이 해야 할 5가지

1. 깨어 있어야 한다.

2. 그들이 찾는 정보를 받는다.

3. 메시지를 받는다.

4. 당신이 발표하는 정보를 볼 수 있는 유인물을 옆으로 치운다.

5. 당신의 정보에 반응한다.

끝난 후 당신이 해야 할 5가지

1. 청중에게 감사한다!

2. 자료를 준비한다.

3. 당신 자신을 준비한다.

4. 청중에게 당신과 연락할 수 있는 방법을 전달한다.

5. 피드백을 받는다 - 그들이 당신에게 대해 생각하는 것, 그들이 알게 된 것, 배우길 원했는데 그렇게 하지 못한 것, 당신의 프리젠테이션을 향상시키는 방법, 당신의 커뮤니케이션 기술을 향상시키는 방법은 무엇인지.

일단 내가 만든 datagrid control이다..

일단 WPF ToolKit에서 제공하는 DataGrid를 수정하기 위해서는 2가지를 수정해야한다

기본적인것은 아주쉽다 그냥 Style하나 입혀놓고 Datagrid에서 지원해주는 properties를 하나의 스타일로 입히는것이다.

그냥 app.xaml에서

     <Style x:Key="dataGridBlack" TargetType="{x:Type Custom:DataGrid}">
                <Setter Property="RowBackground" Value="#171717" />
                <Setter Property="Foreground" Value="#FF999999" />
                <Setter Property="HorizontalGridLinesBrush" Value="#FF2F2F2F" />
                <Setter Property="VerticalGridLinesBrush" Value="#FF2F2F2F" />
                <Setter Property="RowHeight" Value="34" />
                <Setter Property="ColumnHeaderHeight" Value="34"/>
                <Setter Property="RowHeaderWidth" Value="0"/>
                <Setter Property="BorderBrush" Value="#FF2F2F2F"/>
                <Setter Property="MaxHeight" Value="500"/>
                <Setter Property="Background" Value="#FF171717"/>
            </Style>

이런식으로 dataGridBlack을 하나 만들어서 스타일을 적용하면 된다......

자이제 헤더를 입혀보자 헤더입히는법은 blend로는 이미 사용법을 썻었고

<Style x:Key="HeaderStyle" TargetType="{x:Type Custom:DataGridColumnHeader}">
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Background" Value="#FF202020"/>
                <Setter Property="BorderBrush" Value="#2f2f2f" />
                <Setter Property="BorderThickness" Value="1 1 1 1" />
                <Setter Property="Foreground" Value="#666666"/>
                <Setter Property="Margin" Value="0,0,0,0"/>               
            </Style>

헤더 스타일을 정의를 이렇게 해놓으면 blend에 보여서 수정하면 된다

이제 제일 힘든 스크롤바

일단 template 을 정의 해야한다.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>

<HTML>

<head>
 <script>
  var step = 100;
  var cell = 100, total = 4, width = cell * total;
  var imageCount = 8;

  function do_left(){
    var obj = document.getElementById("photo_layer").style;
   
    var obj_left = obj.left;
    var obj_left_without_px = obj_left.substring(0,obj_left.lastIndexOf("px"));
    if (obj_left_without_px < 0)
   {
      var obj_left_calculate = (Number(obj_left_without_px)+step)+"px";   
      obj.left= obj_left_calculate;
     
   }   
  }

  function do_right(){
    var obj = document.getElementById("photo_layer").style;
   
    var obj_left = obj.left;
    var obj_left_without_px = obj_left.substring(0,obj_left.lastIndexOf("px"));
   
   if (obj_left_without_px > (imageCount*cell*(-1)+width))
   {
      var obj_left_calculate = (Number(obj_left_without_px)-step)+"px";   
         obj.left= obj_left_calculate;
   }
  
  }
 </script>
</head>
<body>
<table border="1">
 <tr align="center" style="height: 100px" bgcolor="#ffffff">
  <td><img src="./image/01.jpg" style = "width: 98px; height: 100px" onclick="do_left()"></img></td>
  <td>
    <div style="top: 0px; left: 0px; height: 100px; width: 400px; overflow:hidden; position: relative" >
    <div id="photo_layer" style="top: 0px; left: 0px; width: 800px; height: 80px; position: relative">
     <table style="height: 100px" cellspacing="0"  cellpadding="0">
      <tr align="center" bgcolor="#cccccc">
       <td width='100'><IMG src="./image/01.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/02.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/03.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/04.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/05.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/06.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/07.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/08.jpg" width='98'></img></td>
      </tr>
     </table>
    </div>
   </div>
  </td>
  <td><img src="./image/01.jpg" width="98" height="100" onclick="do_right()"></img></td>
 </tr>
</table>
</body>
</HTML>