HTML 멀티미디어와 이미지맵 적용하기

멀티 미디어

• Multi + Media
• 여러 형식의 정보 콘텐츠와 정보처리를 사용하여 사용자에게 정보를 제공하는 미디어
• 예 : 이미지, 사운드, 비디오, 애니메이션 등
• 웹 페이지는 종종 다양한 멀티미디어 요소를 포함

<video> 태그

• html5에 새로 추가됨 ( ActiveX -> video )
• <video controls> : 재생, 일시정지 등
• <source src=“파일.확장자”> : 코드와 같은 폴더에 위치
• 확장자 변경 ( avi -> mp4 )
• 다른 종류의 영상 파일이름 및 확장자 변경 (handong.avi -> handong.mp4 )
  • 다양한 종류의 동영상을 play 시킬 수 았음
• 속성 변경 ( controls -> autoplay )
  • 동영상 자동 재생, 웹 브라우저마다 안될 수도 있음

<audio> 태그

• html5에 새로 추가됨 ( ActiveX -> audio )

• <source src=“파일.확장자”> : 코드와 같은 폴더에 위치

이미지 맵(Image Map)

• 한 개의 이미지 파일에 여러 개의 링크를 할당하는 기술
• 그림을 단순히 연결 시킨 것이 아니라 그림의 부분들이 각기 다른 링크로 연결되어 있음
• 링크와 연결된 이미지의 영역: 핫스팟 (hotspot)
• 정의하고자 하는 영역 모양에 따라: 사각형, 원, 다각형로 설정

이미지 맵 태그 사용 방법

• <map name=“이름”> ... </map>
  • 이미지 맵을 사용하기 위한 정보 정의
    • 이름은 여러 이미지 맵을 사용할 경우 해당 이미지 맵
      정보를 찾을 수 있도록 함
• <area>
  • 이미지 맵의 링크 영역을 정의
  • 종료 태그 없이 단독 태그로 사용
  • <map> … </map> 내부에서만 사용

이미지 맵 태그 속성

• <map shape=“rect” 또는 “circle” 또는 “poly”>
  • 이미지에서 링크 시키고자 하는 영역의 모양을 지정
• <map href=“주소”>
  • 정의된 영역을 마우스로 클릭했을 때 연결된 문서를 지정
• <map coords=“좌표값”>
  • Shape에 따른 영역의 실제 좌표 정의
  • 실제 이미지에서 왼쪽 위의 좌표를 (0,0) 기준
    • 오른쪽 방향 : X좌표 증가, 아래쪽 방향 : Y좌표 증가

이미지 맵 태그 - shape

• Shape가 circle인 경우

  • coord=“X,Y,R”
  • 원 중심의 X좌표, Y좌표, 반지름

• Shape가 polygon인 경우

  • coord=“X1,Y1,X2,Y2, … Xn,Yn”
  • 꼭지점 개수만큼의 X좌표, Y좌표

• Shape가 rectangle인 경우

  • 좌측 상단 X, Y좌표와 우측하단 X,Y좌표