픽셀 색상을 기반으로 한 동적 이미지 맵

이 기사는 Pixel Color를 사용하여 동적 이미지 맵을 만드는 방법에 대해 자세히 설명하며 전통적인 이미지 맵에 빠르고 유연한 대안을 제공합니다. 이 방법은 고정 크기 영역의 한계를 피하고 모든 모양이나 크기를 허용합니다.

주요 장점 :

• 속도 : 효율적인 설계로 인해 빠르게로드됩니다.
• 유연성 : 클릭 가능 영역을 사전 정의 할 필요가 없습니다. 모든 모양이나 크기가 가능합니다.
• 단순성 : 어떤 이미지 영역이 어떤 링크에 해당하는지 알 필요가 없습니다.

작동 방식 :

1. 사용자가 이미지를 클릭합니다.
2. jQuery는 클릭의 X 및 Y 좌표를 캡처합니다.
3. 이 좌표는 Ajax를 통해 PHP 스크립트로 전송됩니다.
4. PHP 스크립트는 해당 좌표에서 픽셀 색상을 검색합니다.
5. HEX 색상 코드는 데이터베이스에서 해당 국가를 찾는 데 사용됩니다.
6. 해당 국가 페이지의 URL은 JavaScript로 반환됩니다.
7. 페이지는 Ajax 호출을 통해로드됩니다.

구현:

이 솔루션에는 이미지, 데이터베이스 및 코드의 세 가지 구성 요소가 필요합니다.

1. 이미지 : 각 국가 (예 : Adobe Illustrator를 사용하여)에 대한 고유 한 16 진수 색상 코드가있는 이미지를 만듭니다.

2. 데이터베이스 : HEX 색상 코드와 해당 국가 URL을 저장하십시오.

3. 코드 : 다음 코드 스 니펫은 jQuery 및 PHP 구성 요소를 보여줍니다.

   jQuery :

    jQuery (document) .ready (function ($) {
       $ ( '##theworldmapimage'). on ( 'click', function (ev) {
          var x = $ (this) .offset (). 왼쪽;
          var y = $ (this) .offset (). 상단;
          Mousex = ev.pagex -x;
          Mousey = ev.pagey -y;
          // 수정 X 축 Erorr 마진
          // mousey- = 5;
          if (mousex> 500) {mousex- = 13; }
          // alert ( "x ="mousex "y ="mousey);
           $ .get ( "../ php/php-functions/phpfunc-imagemap.php", {x : mousex, y : mousey}, function (data) {
               // 경고 (데이터);
               if (data! = '') {
                   // alert (data "" "x ="mousex "y ="mousey);
                   Window.location.replace (데이터); // 클릭 된 국가의 URL을로드합니다
               }
               또 다른 {
                   // Alert ( "데이터 없음");
               }
           });
       });
   });

   PHP :

    if (isset ($ _ request [ 'x'])) {
       $ x = $ _request [ 'x']; $ y = $ _request [ 'y'];
       $ im = imageCreateFrompng ($ domain. "/images/worldMap-coloured.png");
       $ rgb = imagecolorat ($ im, $ x, $ y);
       $ r = ($ rgb >> 16) & 0xff;
       $ g = ($ rgb >> 8) & 0xff;
       $ b = $ rgb & 0xff;
   
       함수 rgb2html ($ r, $ g = -1, $ b = -1) {
           // ... (함수는 변경되지 않음) ...
       }
   
       $ hex = rgb2html ($ r, $ g, $ b);
       $ debug = ( "r". $ r. "g". $ g. "b". $ b. "hex =#". $ hex);
       $ html = "";
   
       $ qry = "``국가 '에서 hex_colour ='"에서 선택한 국가 선택. "$ hex." 'Limit 1; ";
       if (mysqli_query ($ conn, $ qry)) {// mySQL 대신 mysqli를 사용합니다.
           $ result = mysqli_query ($ conn, $ qry);
           while ($ row = mysqli_fetch_assoc ($ result)) {
              $ country_filename = convertTofilename ($ row [ 'country']);
               $ html = $ domain. "/". $ country_filename. "/";
               $ debug. = "". $ country_filename;
           }
       }
       mysqli_close ($ conn); // MySQLI 연결을 닫습니다
       echo $ html;
   }
   ?>

   참고 : PHP 코드는 데이터베이스 상호 작용에 mysqli 사용하도록 업데이트되어 더 이상 사용되지 않은 mysql 기능을 대체합니다. 데이터베이스 연결이 설정되어 있는지 확인하십시오 ( $conn ).

4. 최종 결과 : 결과 동적 이미지 맵.

데모를 참조하십시오 ( "세계지도 쇼"를 클릭하여 동적 이미지 맵을 표시 한 다음 모든 국가를 클릭하십시오).

이 접근법은 반응 형 디자인, SEO (대체 텍스트 및 제목 속성을 통해) 및 성능 최적화 (캐싱 및 이미지 압축)에 대한 이점을 제공합니다. FAQS 섹션은 오류 처리 및 최적화 기술에 대한 자세한 내용을 제공합니다.

위 내용은 픽셀 색상을 기반으로 한 동적 이미지 맵의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!