CSS로 이미지 맵을 만드는 방법

옵션

나는 '괴짜'를 원했기 때문에 블로그의 모든 구독 방법을 담은 '포켓'그래픽을 결정했습니다.

Web 1.0 시대에는 이미지를 각 그래픽의 링크로 연결 한 다음 테이블과 함께 다시 연결하여 이와 같은 링크 모음을 만들 수있었습니다. 또한 다음을 활용하여 수행 할 수 있습니다. 이미지 맵 하지만 일반적으로 좌표계를 구축하기위한 도구가 필요합니다. 캐스 케이 딩 스타일 시트를 사용하면이 작업이 훨씬 쉬워집니다. 이미지를 연결하지 않고 좌표계를 구축 할 도구를 찾지 않아도됩니다!

  1. 사용하고 싶은 이미지를 만듭니다. 아래 그래픽을 활용할 수 있습니다 (마우스 오른쪽 버튼을 클릭하고 다른 이름으로 저장하여 다운로드).
    옵션 중
  2. CSS와 관련된 디렉토리에 이미지를 업로드합니다. WordPress에서는 테마 디렉토리의 이미지 폴더에 배치하면 가장 쉽게 수행 할 수 있습니다.
  3. HTML을 추가하십시오. 멋지고 간단합니다… XNUMX 개의 링크가있는 div :
    > div id = "subscribe">> a id = "rss"href = "[피드 링크]"title = "RSS로 구독">> span class = "hide"> RSS> / span >> / a>> a id = "email"href = "[귀하의 이메일 구독 링크]"title = "이메일로 구독">> span class = "hide"> 이메일> / span >> / a>> a id = "mobile"href = "[your mobile link]"title = "모바일 버전보기">> span class = "hide"> 모바일> / span >> / a>> / div>
    
  4. Cascading Style Sheet를 편집하십시오. 6 가지 스타일을 추가하게됩니다. 전체 div 용 스타일 1 개, a 태그 용 1 개, 텍스트 장식이 표시되지 않도록하기위한 스타일 1 개, 텍스트 숨기기 스타일 1 개 (접근성에 사용됨) 및 각 링크에 대한 스타일 사양 XNUMX 개 :
    #subscribe {/ * 배경 이미지 블록 * / display : block; 너비 : 215px; 높이 : 60px; 배경 : url (images / options.png) no-repeat; 여백-상단 : 0px; } # 구독 {text-decoration : none; } .hide {가시성 : 숨김; } #rss {/ * RSS 링크 * / float : left; 위치 : 절대; 너비 : 50px; 높이 : 50px; 여백-왼쪽 : 20px; margin-top : 5px; } #email {/ * 이메일 링크 * / float : left; 위치 : 절대; 너비 : 50px; 높이 : 50px; 여백-왼쪽 : 70px; margin-top : 5px; } #mobile {/ * 모바일 링크 * / float : left; 위치 : 절대; 너비 : 50px; 높이 : 50px; 여백-왼쪽 : 130px; margin-top : 5px; }

위치는 멋지고 간단합니다. 높이와 너비를 추가 한 다음 이미지 왼쪽에서 왼쪽 여백을 설정하고 이미지 위쪽에서 위쪽 여백을 설정합니다!

이 "방법"게시물은 Geeks are Sexy 궁극의 "How To"콘테스트! 참고로, 이미지 맵이 훨씬 더 복잡한 다각형을 가질 수 있다는 것은 사실이지만 필자는 그것이 꼭 있어야하는 곳을 너무 많이 보지 못했습니다. 나는 Geeks의 큰 RSS 이미지가 섹시한 사이드 바라는 것을 알아 챘습니다. 링크를위한 좋은 장소입니다. 😉

보다 나은 접근성을 위해 10 년 3 월 2007 일 업데이트 됨 !

스폰서 : 웹 디자인을 처음 접하는 분이라면 HTML 및 CSS를 사용하여 자신 만의 웹 사이트를 구축하십시오. 2nd Edition은 필수입니다. 따라하기 쉬운이 가이드에서는 웹 사이트를 직접 만들어서 가능한 최선의 방법으로 구축하는 방법을 배울 수 있습니다!

댓글 41

  1. 1

    Doug, 좋은 방법처럼 보이지만 접근하기가 매우 어렵습니다.

    스크린 리더가있는 시각 장애인, 텍스트 전용 브라우저를 사용하는 사용자 또는 CSS 또는 이미지를 사용하지 않고 사이트를 방문하는 모든 사람 (예 : 모바일 친화적 인 사이트에 대한 링크를 찾는 모바일 사용자)을 고려하십시오. 그들 중 누구도 텍스트가 없기 때문에이 세 개의 링크에 대해 알 수 없습니다. 이미지가 꺼져 있으면 사용자는 배경 이미지이기 때문에 거기에 있었던 내용을 설명하는 대체 텍스트도 볼 수 없습니다.

    이미지를 슬라이스하고 연결하고 목록에 넣고 서로 옆에 띄우는 것이 더 좋습니다. 또는 링크에 텍스트를 사용하고 표준 이미지 대체 기술을 사용하여 텍스트를 바꿉니다. 이것은 편리해 보이지만 표준 그래픽 브라우저를 사용하지 않는 사람들에게는 일을 훨씬 어렵게 / 불가능하게 만듭니다.

    • 2
      • 3

        더그,

        JAWS는 기본적으로 링크 제목을 읽지 않지만 맞습니다. 링크 제목이 거기에 있는지 몰랐을 때 왜 찾겠습니까? 그렇다고하더라도 확실히 이것은 유용성 문제로 떨어집니다. 즉, 능력이 낮은 사용자에게 사이트 사용에 대한 두 번째 경험을 제공한다는 의미입니다.

        텍스트 브라우저의 경우 Lynx를 가리키는 기사를 통해 링크 제목 목록을 가져올 수도 있지만 처음에는 텍스트가 없었기 때문에 링크가 있는지 몰랐을 때 내 요점은 남아 있습니다. , 제목 텍스트를 찾는 이유는 무엇입니까?

        마지막으로 링크 제목 속성은 이미지가 활성화되지 않았거나 CSS가 활성화되지 않은 브라우징하는 사람에게는 나타나지 않습니다.

        예, 제목이있는 링크가없는 링크보다 낫지 만이 경우에는 한계에 불과합니다.

        그렇기 때문에 대체 텍스트를 읽을 수 있도록 이미지를 사용하거나 텍스트를 읽을 수 있도록 이미지를 대체하는 것이 훨씬 더 안전하고 접근하기 쉽고 사용하기 쉬운 옵션입니다.

        • 4

          좋은 정보, 필. 나는 이것을 텍스트로 향상 시키려고하지만 단순히 텍스트를 숨기려고 할 것이다. JAWS와 같은 접근 가능한 제품이 링크 텍스트를 읽고 CSS 나 이미지가 비활성화 된 경우 텍스트가 표시되는 방식이다.

          그러나 액세스 가능한 유일한 해결책은 링크가있는 이미지를 넣는 것입니다.

  2. 5
    • 6
      • 7

        우리가 종종 신경 쓰지 않는 것입니다, 필! 또한 응용 프로그램에 액세스 할 수 있도록하면 검색 엔진 결과도 좋은 경우가 많습니다.

        전문성과 피드백에 정말 감사드립니다!

  3. 8

    내가 훔쳤다. 거기, 나는 그것을 말했다.

    Doug, 그래픽이 환상적이고 코딩이 너무나 단순해서 저를 무서워합니다 (CSS를 가지고 놀았는데 이제 마침내 "얻었습니다").

    내 필요를 충족시키기 위해 코드를 수정하고 HTML 비트를 어디에 넣을지 알아 냈고 솔직히 멋지게 보이며 나를 미치게 만든 사이드 바의 상단을 정리했습니다.

    아직 그 커피를 사야 할지도 몰라요!

  4. 10

    더그,

    나는 내 경험을 예로 들어 반대하는 목소리가 될 것입니다. 제 홈 이메일이 변경되었을 때 이메일을 기억하고 귀하는 제가 새 이메일로 간단히 옵트 인해야한다고 언급하셨습니다. 다시 옵트 인하기 위해 귀하의 사이트에서 새로운 기능을 "발견"하는 데 시간이 많이 걸렸다는 것을 인정해야합니다. 이것의 일부는 원래 링크가 좀 더 전통적이었고 나는 그것을 막연하게 기억했기 때문입니다. 다른 하나는 옆쪽 반쪽 봉투가 처음에는 제게 봉투처럼 보이지 않았기 때문입니다. 약 5 분 이상 후 모든 이미지 위에 마우스를 올리기 시작했고 "이메일로 구독"제목이 표시되었을 때 제가 사업을하고 있다는 것을 알았습니다. 내 뇌는 링크 그림이 무엇인지 알아 냈습니다.

    그러나 적어도 나에게는 옆쪽 봉투가 이메일 알림을 구독하는 장소로서 직관적이지 않았습니다. 그리고 (항상 멋진 것으로 끝내라고 들었 기 때문에) 위의 Phil에 동의합니다. 방법은 정말 간단하고 전체 항목이 훌륭하게 작동합니다. 귀하의 디자인 도구가 3 개 섹션의 정확한 치수를 제공하는 데 도움이되었다고 생각합니다. 그것은 올바른 가정입니까? 예를 들어 400 픽셀 너비의 이미지가 있다면 올바른 설정 등을 알아야하므로 그렇게 가정해야합니다.

    • 11
  5. 12
    • 13

      윌리엄,

      주석 클래스 이름과 사이드 바 그래픽의 클래스 이름 사이에 충돌이있는 것 같습니다. 충돌을 해결하기 위해 이름을 다르게 지정할 수 있습니다. 도움이 필요하면 알려주세요!

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

    좋은 접근 방식이지만 지형도를위한 무언가가 필요해서 직사각형 영역을 사용할 수 없습니다. 좌표가있는 이전 스타일 이미지 맵을 사용해야한다고 생각하지만 조금 더 깊이 파고들 것입니다.

  11. 19

    이 정보에 감사드립니다, 더그. 나는 전에 여기에 있었고 어떻게했는지 궁금했습니다. 포스트 뒤에 삽입 할지도를 만들고 싶었는데 이제 수단이 생겼으니 할 수 있습니다. 브라보!

  12. 20

    워드 프레스에서 작업 할 때 우리는 어디에 "HTML을 드롭"합니까? 내가 가진 것은 CSS와 PHP 페이지뿐입니다.

  13. 21

    하이 더그,
    이전 댓글을 남겼지 만 내 딜레마에 대한 통찰력을 거의 제공하지 않는다는 것을 깨달았습니다. 온라인 시트콤을 시작하는 데 도움이되도록 워드 프레스 테마를 수정했습니다.

    http://www.phaylen.com/blog/

    이제 상단에 내비게이션 배너가있는 것을 볼 수 있습니다.이 이미지는 이전에 수십 번처럼 매핑하려고했습니다. / palmforehad. 우리 중 누구도 CSS를 이해하지 못하지만 충분히 우연히 우연히 우연히 만났고 지금까지이 시점까지 괜찮 았습니다. 제공된 수십 개 중 유일한 기사는 CSS에서 이미지 매핑을 쉽게 활용하는 방법에 대한 진정한 통찰력입니다. 귀하의 지시에 따라 스타일 시트를 내보냈지만 HTML을 어디에 둘지 모르겠습니다. 당신이 말한 모든 것은 "당신의 html을 추가하십시오… 그것은 멋지고 간단합니다"그리고 나는 생각했기 때문에 cringed .. "나에게는 충분히 간단하지 않다!" 테마 편집기에서 이러한 PHP 페이지에 html을 추가 할 수 있다는 것을 몰랐습니다. 헤더에 HTML을 배치합니까? 메인 인덱스 템플릿? 기능? 모든 워드 프레스 사용자가 대시 보드 편집기에서 테마를 편집 할 수있는 옵션이 있다고 가정합니다. html을 배치 할 위치를 제안 할 수 있다면 내 탐색 표시 줄에 oru 코드를 적용하고 싶습니다.

    커뮤니티와 지식을 공유해 주셔서 감사합니다. 나는 당신에게 커피를 줄 수있어서 기쁩니다.

    • 22

      안녕 Phay!

      블로그 테마의 모든 파일은 관리자 패널을 통해 편집 할 수 있습니다. 프레젠테이션을 클릭 한 다음 테마 편집기를 클릭하면 오른쪽에는 파일 목록이, 왼쪽에는 편집기가 표시됩니다.

      이것을 사이드 바에 넣으려면 사이드 바 페이지가있을 것입니다. 클릭하여 편집 한 다음 제공된 HTML을 원하는 페이지에 넣으십시오.

      참고 : 스타일 시트 편집은 페이지와 관련이 있으므로 테마의 다른 이미지처럼 참조하는 경우 테마 이미지 디렉토리에 그림을 업로드해야합니다.

      그 도움이 되었으면 좋겠습니다!

    • 23

      파이,
      나는 오늘이 사이트를 보았고 당신과 같은 딜레마를 겪었습니다. 또한 헤더 이미지에 이미지 맵을 추가하고 싶었습니다. 한동안 가지고 놀다가 바로 잡았습니다. header.php 파일에 div HTML을 넣으십시오. 과 사이에 넣었습니다. 템플릿에 정확한 코딩이 있는지 확실하지 않지만 header.php 파일에서 놀아 보면 알아낼 수 있습니다.
      -

  14. 24

    빠른 응답에 감사드립니다!

    아니요, 사이드 바에있는 것을 원하지 않았습니다. 페이지 상단에 있습니다 (제가 제공 한 링크에서 볼 수 있습니다. 쇼 요법에 대해 contant라고 표시된 분홍색 탐색 모음 ..)

    나는 아침 내내 대시 보드에서 작업 해 왔지만, 불행히도 위에서 언급했듯이 어떤 파일에 html을 넣었는지 잘 모르겠습니다. header.php, main index.php, functions.php, footer.php가 있습니다. HTML 코드를 어디에 삽입해야할지 모르겠습니다. (당신이 제공 한 첫 번째 부분, 나는 이미 내 스타일 시트에 나머지 부분을 삽입했습니다.) 웹 사이트에 내 이미지가 있고, 모든 것이 준비되어 있습니다. 적응을 위해 코드의 html 부분을 어디에 추가해야하는지 알면됩니다.

    시간을내어 초보자로부터 질문을 해주셔서 감사합니다.

    파이

  15. 25

    … 아니면 누군가 우리가 코드의 html 부분을 어떤 파일에 넣었는지에 대한 댓글에 글을 올릴 수도 있습니다. 몇 개의 글을 올린 신사가 그가 알아 냈다고 말했습니다. 나는 그렇게 운이 좋지 않았습니다.

    파이렌

  16. 26
  17. 27

    html지도 태그를 제거하기 때문에 워드 프레스에 클릭 가능한 이미지지도를 삽입하는 방법을 찾는 데 시간이 많이 걸립니다. 당신의 방식은 작동하지만 미국의지도는 분명히 이런 방식으로 복잡하게 만드는 방법입니다. 나는 길을 잃었다.

    도움.

    플래시가 유일한 옵션 인 것 같습니까?

    • 28

      데이브,

      템플릿에 이미지를 넣으면 괜찮습니다. 실제 콘텐츠에 이미지 맵을 넣으면 필터 문제가 발생할 수 있습니다. 이 문제를 해결하는 방식은 끔찍하지만 때때로 iframe을 활용했습니다.

  18. 29

    안녕,

    이미지 맵과 링크는 서로 다른 것 같습니다. HTML의 이미지 맵이하는 것처럼 함께 작동하지 않습니다.

    이미지 맵에 배경 위치 지정 (왼쪽 가운데)을 포함하면 링크 위치가 추적되지 않습니다.

    이 문제를 해결할 방법이 있습니까? im 매우 아마추어. 감사합니다.

  19. 31

    내가 사용하려는 것처럼 더 크고 복잡한 이미지 맵에 유사한 접근 방식을 사용할 수 있습니까?

    내 사이트를 볼 경우 왼쪽에있는 링크를 클릭하면 이미지 맵으로 사용하려는 이미지 (텍스트 알파벳 아래)를 볼 수 있습니다.

    기본적으로 이미지를 사용하여이 목록의 각 섹션으로 문자로 이동하려고합니다.

    분명히 김프를 사용하여지도를 만드는 데 20 분을 보냈고 WP가지도 태그를 제거하여 사이트를 찾았습니다.

    그러나 플래시 사용을 고려할 수 있습니다.

    감사.

  20. 33

    나는 현재 템플릿 레이아웃을 사용하고 있으며 내 물건으로 편집하고 있습니다. 이미지 맵을 추가하고 싶지만 CSS에서 어디에 배치해야할지 모르겠습니다. 지도를 만들고 싶은 이미지는 헤더 부분에 있습니다.

  21. 34

    안녕하세요, 저는 joomla에 제 웹 사이트를 구축했습니다… 저는이 방법을 사용하여 제 페이지의 로고를 홈 링크로 만들고 싶습니다. 저는 Joomla로 이것을 할 수 없다고 들었습니다. 그러나이 기사는 저에게 희망을줍니다! 이메일을 통해 도움을 주시면 대단히 감사하겠습니다…. 감사합니다

  22. 35

    안녕하세요 Doug – 저는 원격 롤오버도 포함하는 다소 복잡한 CSS 기반 이미지 맵을 구축하고 있습니다 (이 경우 이미지 핫스팟 중 하나를 가리키면 텍스트가 페이지의 다른 곳에 표시됨). 어쨌든, 나는 그것을 조사하는 동안 여기에서 당신의 예를 보았습니다. 그리고 나는 다음과 같은 의견을 공유 할 것이라고 생각했습니다.

    1. 접근성을 위해, 당신은 여기에서 텍스트를 숨기는 데 visible : none (또는 display : none)을 사용하지 말아야합니다. .

    대신 더 강력한 이미지 대체 기술을 사용하십시오. Phark 방법 또는 Gilder / Levin을 제안합니다. 기본 기술을 찾기 위해 Google에 더 잘 문서화 된 이름입니다. CSS가 활성화 된 상태에서도 작동하지만 이미지가 꺼져 있으므로 G / L을 선호합니다.

    2. 나는 그것이 깨지는 것을 보지는 못하지만 (FF3 사용), 당신의 포지셔닝 구현은 또한 내재 된 위험을 가지고 있습니다. 절대 위치 요소는 가장 가까운 위치에있는 상위 요소를 기준으로 위치합니다. 기본적으로 #subscription에 'position : relative'를 적용하여 위치 지정 컨텍스트를 명시 적으로 설정하고 싶습니다. 그런 다음 자식 (위치 지정된 링크)을 해당 부모 내에 배치 할 수 있습니다. 이 방법은 브라우저에서보다 안정적인 결과를 보장하는 데 도움이됩니다.

    또한 여백 대신 "top : x"및 "left : x"(x는 오프셋 값, 즉 px)의 위치 지정 선언을 사용하여 해당 위치를 처리해야합니다. 다시 말하지만, 나는 그것이 당신이 가지고있는 방식을 반드시 깨뜨리는 것을 보지는 않지만, 위와 왼쪽은 이것을 의미하므로 왜 사용하지 않습니까? 또한 동일한 요소에 부동 및 여백이 설정되어 특정 조건에서 IE6에서 "이중 여백"버그가 발생합니다 (여기서 테스트 했습니까?) – 수정 사항이 있지만 top을 사용하여 해당 문제를 완전히 피할 수 있습니다. 이 경우 위치 지정을 위해 여백 대신 왼쪽.

    3. 마지막으로, 의미없는 div 대신 이러한 링크에 대해 의미 론적으로 건전한 순서없는 목록을 사용하지 않는 이유는 무엇입니까?

    계속해서 죄송합니다… 저는 공유하고 싶습니다. b / c 원하는 결과를 얻기 위해 CSS를 사용하는 방법에는 여러 가지가 있다는 것을 경험으로 알고 있지만 어떤 방법은 다른 것보다 확실히 더 잘 작동합니다 (더 신뢰할 수 있고 브라우저 간). . HTH.

  23. 36
  24. 37
  25. 38

    정말 고맙습니다!! 당신의 지시로 저에게 몇 시간의 작업이 절약되었습니다. 저는 웹 개발을 처음 접했고 첫 번째 대규모 프로젝트를 통해 어려움을 겪었습니다. 나는 그것을 만들었다… 클라이언트는 실제로 행복하고 황홀하며, 나도 그렇다!

  26. 39

    안녕하세요, 게시 해주셔서 감사합니다! 몇 년이 지난 지금도 여전히 도움이되고 있습니다. 내 이미지 맵을 올바른 위치에 연결하는 데 어려움을 겪고 있습니다. 배너가 있고 배너 오른쪽 상단의 소셜 아이콘이 제공 한 코드를 사용하여 연결되기를 원합니다. 내 링크가 소셜 아이콘이 아니라 로고 위로 화면의 맨 왼쪽 상단에 나타나기 때문에 내가 뭔가 잘못하고 있다는 점을 제외하면 훌륭하게 작동합니다. 단순한 일이라고 확신하지만 이해할 수 없습니다. 당신이 어떤 통찰력이 있다면 여기에서 공유하겠다고 생각했습니다. 게시 해 주셔서 다시 한 번 감사드립니다!

당신은 어떻게 생각하십니까?

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.