本文詳細介紹瞭如何使用像素顏色創(chuàng)建動態(tài)圖像映射，並為傳統(tǒng)圖像映射提供了快速，靈活的替代方案。該方法避免了固定尺寸區(qū)域的局限性，並允許任何形狀或尺寸。

關鍵優(yōu)勢：

• 速度：由於其有效的設計，迅速加載。
• 靈活性：無需預定點擊區(qū)域；任何形狀或大小都是可能的。
• 簡單性：無需知道哪些圖像區(qū)域與哪些鏈接相對應。

它的工作原理：

1. 用戶點擊圖像。
2. jQuery捕獲了點擊的X和Y坐標。
3. 這些坐標通過Ajax發(fā)送到PHP腳本。
4. PHP腳本在這些坐標處檢索像素顏色。
5. 十六進制顏色代碼用於在數(shù)據(jù)庫中查找相應的國家。
6. 該國頁面的URL返回到JavaScript。
7. 該頁面通過AJAX調用加載。

執(zhí)行：

該解決方案需要三個組件：圖像，數(shù)據(jù)庫和代碼。

1. 圖像：為每個國家 /地區(qū)創(chuàng)建具有獨特的十六進制顏色代碼的圖像（例如，使用Adobe Illustrator）。

2. 數(shù)據(jù)庫：存儲十六進制顏色代碼及其相應的國家 /地區(qū)URL。

3. 代碼：以下代碼片段演示了jQuery和PHP組件。

   jQuery：

    jQuery（document）.ready（function（$）{
       $（'＃theworldmapimage'）。on（'click'，function（ev）{
          var x = $（this）.offset（）。左;
          var y = $（this）.offset（）。top;
          鼠標= ev.pagex -x;
          鼠標= ev.pagey -y;
          //修復X軸ERORR邊距
          // Mousey- = 5;
          if（MouseX> 500）{MouseX- = 13; }
          // alert（“ x =“鼠標” y =“鼠標）;
           $ .get（“ ../ php/php/php-functions/phpfunc-imagemap.php”，{x：mousex，y：mousey}，function（data）{
               //警報（數(shù)據(jù)）;
               如果（data！=''）{
                   // alert（data“”“” x =“ mousex” y =“鼠標）;
                   window.location.replace（data）; //加載點擊國家的URL
               }
               別的 {
                   //警報（“無數(shù)據(jù)”）;
               }
           }）;
       }）;
   }）;

   PHP：

    if（isset（$ _請求['x']））{
       $ x = $ _request ['x']; $ y = $ _request ['y'];
       $ im = imagecreatefrompng（$域?！?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 =“從``shex_colour =''''select ofert country。$ hex。
       if（mysqli_query（$ conn，$ qry））{//使用mysqli代替棄用mysql
           $ 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進行數(shù)據(jù)庫交互，以替換不棄用的mysql函數(shù)。確保您建立了數(shù)據(jù)庫連接（ $conn ）。

4. 最終結果：由此產生的動態(tài)圖像圖。

請參閱演示（單擊“顯示世界地圖”以顯示動態(tài)圖像地圖，然後單擊任何國家）。

這種方法為響應式設計，SEO（通過ALT文本和標題屬性）以及性能優(yōu)化（緩存和圖像壓縮）提供了好處。 FAQ部分提供了有關錯誤處理和優(yōu)化技術的更多詳細信息。

以上是基於像素顏色的動態(tài)圖像圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！