基于像素颜色的动态图像图

本文详细介绍了如何使用像素颜色创建动态图像映射，并为传统图像映射提供了快速，灵活的替代方案。该方法避免了固定尺寸区域的局限性，并允许任何形状或尺寸。

关键优势：

• 速度：由于其有效的设计，迅速加载。
• 灵活性：无需预定点击区域；任何形状或大小都是可能的。
• 简单性：无需知道哪些图像区域与哪些链接相对应。

它的工作原理：

1. 用户点击图像。
2. jQuery捕获了点击的X和Y坐标。
3. 这些坐标通过Ajax发送到PHP脚本。
4. PHP脚本在这些坐标处检索像素颜色。
5. 十六进制颜色代码用于在数据库中查找相应的国家。
6. 该国页面的URL返回到JavaScript。
7. 该页面通过AJAX调用加载。

执行：

该解决方案需要三个组件：图像，数据库和代码。

1. 图像：为每个国家 /地区创建具有独特的十六进制颜色代码的图像（例如，使用Adobe Illustrator）。

2. 数据库：存储十六进制颜色代码及其相应的国家 /地区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）{
               //警报（数据）;
               如果（data！=''）{
                   // alert（data“”“” x =“ mousex” y =“鼠标）;
                   window.location.replace（data）; //加载点击国家的URL
               }
               别的 {
                   //警报（“无数据”）;
               }
           }）;
       }）;
   }）;

   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进行数据库交互，以替换不弃用的mysql函数。确保您建立了数据库连接（ $conn ）。

4. 最终结果：由此产生的动态图像图。

请参阅演示（单击“显示世界地图”以显示动态图像地图，然后单击任何国家）。

这种方法为响应式设计，SEO（通过ALT文本和标题属性）以及性能优化（缓存和图像压缩）提供了好处。 FAQ部分提供了有关错误处理和优化技术的更多详细信息。

以上是基于像素颜色的动态图像图的详细内容。更多信息请关注PHP中文网其他相关文章！