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

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

주요 장점 :

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

작동 방식 :

1. 이미지에 대한 사용자 클릭.
2. 이 좌표는 Ajax를 통해 PHP 스크립트로 전송됩니다.
3. PHP 스크립트는 해당 좌표에서 픽셀 색상을 검색합니다.
4. Hex 색상 코드는 해당 국가의 해당 국가를 찾는 데 사용됩니다.
5. 해당 국가의 URL은 JavaScript로 반환됩니다.

구현 :

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

Database : 해당 시골 코드 및 해당 시골 코드 및 해당 시골 코드.

Code: The following code snippets demonstrate the jQuery and PHP components.

jQuery :

jQuery (document). reade (function ($) {$ ( '#####theworldMapImage'). on ( 'click', function (var x = $ (this)) .offset (). left; var y = $ (this) .OffSet (). // X Axis erorr 마진을 수정하십시오. // data (data! = ') {mousex if (isset ($ _ request [ 'x'])) {$ x = $ _request [ 'x']; $ y = $ _request [ 'y']; $ im = imageCreateFrompng ($ domain. "/images/worldMap-coloured.png"); $ rgb = imagecolorat ($ im, $ x, $ y); $ r = ($ rgb & gt; & gt; 16) & amp; 0xff; $ g = ($ rgb & gt; & gt; 8) & amp; 0xff; $ b = $ rgb & amp; 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 $ result = mysqli_query ($ conn, $ qry) 대신 mysqli를 사용합니다. while ($ row = mysqli_fetch_assoc ($ result)) {$ country_filename = convertTofilename ($ row [ 'country']); $ html = $ domain. "/". $ country_filename. "/"; $ debug. = "". $ country_filename; }} mysqli_close ($ conn); // mysqli 연결을 닫습니다. echo $ html; }? & gt;

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

데모를 클릭하십시오. Country).

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

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