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

關(guān)鍵優(yōu)勢(shì)：

• 速度：由于其有效的設(shè)計(jì)，迅速加載。
• 靈活性：無需預(yù)定點(diǎn)擊區(qū)域；任何形狀或大小都是可能的。
• 簡(jiǎn)單性：無需知道哪些圖像區(qū)域與哪些鏈接相對(duì)應(yīng)。

它的工作原理：

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

執(zhí)行：

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

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

2. 數(shù)據(jù)庫(kù)：存儲(chǔ)十六進(jìn)制顏色代碼及其相應(yīng)的國(guó)家 /地區(qū)URL。

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

   jQuery：

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

   PHP：

    if（isset（$ _請(qǐng)求['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）; //關(guān)閉Mysqli連接
       echo $ html;
   }
   ？>

   注意： PHP代碼已更新以使用mysqli進(jìn)行數(shù)據(jù)庫(kù)交互，以替換不棄用的mysql函數(shù)。確保您建立了數(shù)據(jù)庫(kù)連接（ $conn ）。

4. 最終結(jié)果：由此產(chǎn)生的動(dòng)態(tài)圖像圖。

請(qǐng)參閱演示（單擊“顯示世界地圖”以顯示動(dòng)態(tài)圖像地圖，然后單擊任何國(guó)家）。

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

以上是基于像素顏色的動(dòng)態(tài)圖像圖的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！