IMAGE MAP by BlueCanvas 에디터 열기

A PICTURE. A WORLD OF POSSIBILITIES.

보는 이미지를,
누르는 경험으로.

원하는 곳에 영역을 그리고 링크를 연결하세요.
한 장의 이미지가 여러 개의 시작점이 됩니다.

무료로 만들기 설치 없이 · 가입 없이 · 코딩 없이 만든 코드는 HTML을 붙여 넣을 수 있는 곳에서 사용합니다.

SCROLL TO CONNECT NO CODE. JUST CONNECTION.

01 / BEYOND THE IMAGE

그저 바라보던이미지 위에,다음 행동을.

사진 속 상품에는 상세 페이지를.
배너 속 혜택에는 이벤트 링크를.
클릭할 이유를 이미지 안에 담으세요.

02 / FROM IMAGE TO INTERACTION

그리면 연결되는
가장 쉬운 방법.

이미지를 불러오고, 영역을 지정하고, 코드를 복사하세요.
복잡한 작업은 도구에 맡기면 됩니다.

IMAGE MAP / PLAYGROUND01 — IMPORT

링크 영역 01

design-room.webp ✓

LINK SETTINGS

클릭하면, 어디로?

연결할 주소https://your-site.com/chair✓ 새 창으로 열기

X 132Y 350W 654H 490

영역마다 다른 주소를
연결할 수 있습니다.

READY TO GO

이제, 붙여 넣으세요.

<map name="lookbook">
  <area
    shape="rect"
    coords="132,350,786,840"
    href="/chair"
    alt="라운지체어"
  />
</map>

✓ HTML 코드 생성 완료

사용 과정을 설명하는 연출 화면입니다.

03 / A LITTLE CLICK, A NEW DISCOVERY

한 장인데,
갈 곳은 여러 곳.

사진 속 세 개의 점을 눌러 보세요.
각 영역에 연결할 링크 예시를 확인할 수 있습니다.

THE OBJECT COLLECTION / INTERACTIVE DEMO

하나의 이미지, 서로 다른 링크

시선이 머문 의자,
상품 페이지로.

룩북 속 마음에 드는 상품을 바로 살펴볼 수 있도록 상세 페이지를 연결하세요.

LINK DESTINATION / EXAMPLE/products/lounge-chair

이 화면은 링크 연결 방식을 보여 주는 예시입니다. 내 이미지로 만들기

04 / MADE FOR YOUR NEXT IDEA

어떤 이미지든,
가능성은 열려 있으니까.

SHOP
THE LOOK ↗

01 / COMMERCE

마음에 드는 순간,
상품으로 바로.

룩북과 카탈로그 속 제품을
각각의 상세 페이지로 연결하세요.

THE BLUE EDIT / SPECIAL EVENTMORE
TO CLICK.

컬렉션 보기 ↗이벤트 참여 ↗

02 / CAMPAIGN

하나의 배너에,
여러 개의 초대.

기획전부터 이벤트 참여까지.
각 메시지에 맞는 링크를 붙이세요.

EXPLORE
EVERY DETAIL.123

03 / GUIDE & LEARNING

설명이 필요한 곳에,
더 자세한 이야기를.

공간 안내도와 학습 이미지에서
필요한 설명으로 바로 이동하게 하세요.

이미지의 다음 장면을 직접 설계하세요.

YOUR NEXT CLICK STARTS HERE.

MAKE IT
CLICK.

준비물은 이미지 한 장.
다음은, 당신의 아이디어입니다.

지금 무료로 만들기 100% FREE · WEB BASED

A FEW MORE THINGS

시작하기 전에
궁금한 것들.

다른 질문이 있다면

01이미지 맵으로 무엇을 할 수 있나요?

한 장의 이미지에 여러 클릭 영역을 만들고, 영역마다 다른 링크를 연결할 수 있습니다. 상품이 모인 사진, 이벤트 배너, 안내 이미지 등에 활용하세요.

02정말 무료인가요?

회원가입이나 설치 없이 브라우저에서 무료로 사용할 수 있습니다. 이미지를 불러오고 영역을 지정한 뒤 생성된 코드를 복사하세요.

03만든 코드는 어디에 넣나요?

웹사이트의 HTML 파일이나 HTML 입력을 지원하는 에디터에 붙여 넣으면 됩니다. 방문자가 볼 수 있는 이미지 주소를 사용하고, 게시할 서비스에서 HTML 태그와 스크립트를 허용하는지 확인하세요.

04모바일 화면에도 맞출 수 있나요?

편집기에서 퍼센트 기반 반응형 모드를 선택할 수 있습니다. 코드를 적용한 페이지에서 이미지 크기와 링크 위치를 확인해 주세요. 정밀한 영역 편집은 마우스를 사용하는 PC 환경을 권장합니다.

05작업을 나중에 이어 할 수 있나요?

작업 내용은 사용 중인 브라우저에 임시 저장됩니다. 브라우저 데이터를 지우거나 다른 기기로 이동하면 복원되지 않을 수 있으니, 완성한 코드는 따로 보관해 주세요.

보는 이미지를,
누르는 경험으로.

그저 바라보던이미지 위에,다음 행동을.