个人中心
gpt4 book ai didi

php - 在悬停时显示来自谷歌图像搜索的数据属性的图像

转载 作者：行者123 更新时间：2023-11-30 23:01:30 25 4
gpt4 key购买 nike

我正在尝试合并一个代码，该代码允许我将一个类分配给一个“hoverme”表，然后一旦用户将鼠标悬停在该单元格上，它就会执行 ajax 查询以将数据属性与信息一起使用存储在那里进行谷歌搜索。

这是一个模拟表:

<table>
<thead>
    <tr><td>Test</td><td>Name</td></tr>
</thead>
<tbody>
    <tr><td data-info="Samsung NP200A5B" class="hoverme">ABC123</td><td>Test Name</td>   </tr>
</tbody>
</table>

一旦用户将鼠标悬停在名称 abc123 上，它应该会在其上方显示一张图片，显示数据信息标签中的内容。

我不确定 jquery 将如何工作，也不知道它是否会工作，因为所有内容都是从 MySQL 数据库生成的。

这是我的 PHP 代码:

<?php 

        $qry = "SELECT * FROM `assets` WHERE cust_id='$custID'";
        $rs = mysqli_query($mysqli,$qry) or die("Error: ".mysqli_error($mysqli));
        if(mysqli_num_rows($rs) > 0)
        while($rowa = mysqli_fetch_array($rs)) {
        echo '
    <tr>
        <td>'.$rowa['asset_tag'].'</td>
        <td>'.ucwords ($rowa['type']).'</td>
        <td>'.ucwords ($rowa['vendor']).'</td>
        <td>'.ucwords ($rowa['model']).'</td>
        <td>'.ucwords ($rowa['platform']).'</td>
        <td>'.ucwords ($rowa['location']).'</td>
        <td>'.ucwords ($rowa['status']).'</td>
        <td>'.ucwords ($rowa['user']).'</td>
        <td><a data-toggle="modal" href="#myModal" id="'.$rowa['id'].'">View</a></td>
        <td><a href="editasset.php?assetID='.$rowa['id'].'">Edit</a></td>
        <td>'?> <?php if($rowa['del_flag'] == 0){ echo' <a href="'.$_SERVER['PHP_SELF'].'?del=1&amp;assetID='.$rowa['id'].'&amp;asset_tag='.$rowa['asset_tag'].'" name="setDelete" id="'.$rowa['id'].'">Delete</a>'; }else{ echo '<a href="'.$_SERVER['PHP_SELF'].'?undoDEL=1&amp;assetID='.$rowa['id'].'&amp;asset_tag='.$rowa['asset_tag'].'" name="undoDel" id="'.$rowa['id'].'">Undo Delete</a>'; }?> <?php echo '</td>
        <td><a href="javascript: void(0)" onclick="window.open(\'qrcode.php?EID='.$rowa['id'].'\',\'width=300, height=300\'); return false;"><span class="glyphicon glyphicon-qrcode"></span></a></td>
    </tr>'.PHP_EOL;
        }else
            echo "
        <tr>
            <td>No assets found</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr> ".PHP_EOL;
        ?>

我应该提到的最后一件事是我正在使用 Jquery 的 DataTable。

最佳答案

这可以通过 Google Image Search API 实现，但有每日使用限制(或每 100 次搜索支付 5 美元)。

参见:https://developers.google.com/image-search/

即使使用此 API，您也无法确保搜索到的每张图片都与您希望在页面中显示的图片相匹配。

示例 API:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Search API Sample</title>
    <script src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      google.load('search', '1');

      var imageSearch;

      function addPaginationLinks() {

        // To paginate search results, use the cursor function.
        var cursor = imageSearch.cursor;
        var curPage = cursor.currentPageIndex; // check what page the app is on
        var pagesDiv = document.createElement('div');
        for (var i = 0; i < cursor.pages.length; i++) {
          var page = cursor.pages[i];
          if (curPage == i) { 

          // If we are on the current page, then don't make a link.
            var label = document.createTextNode(' ' + page.label + ' ');
            pagesDiv.appendChild(label);
          } else {

            // Create links to other pages using gotoPage() on the searcher.
            var link = document.createElement('a');
            link.href="/image-search/v1/javascript:imageSearch.gotoPage("+i+');';
            link.innerHTML = page.label;
            link.style.marginRight = '2px';
            pagesDiv.appendChild(link);
          }
        }

        var contentDiv = document.getElementById('content');
        contentDiv.appendChild(pagesDiv);
      }

      function searchComplete() {

        // Check that we got results
        if (imageSearch.results && imageSearch.results.length > 0) {

          // Grab our content div, clear it.
          var contentDiv = document.getElementById('content');
          contentDiv.innerHTML = '';

          // Loop through our results, printing them to the page.
          var results = imageSearch.results;
          for (var i = 0; i < results.length; i++) {
            // For each result write it's title and image to the screen
            var result = results[i];
            var imgContainer = document.createElement('div');
            var title = document.createElement('div');

            // We use titleNoFormatting so that no HTML tags are left in the 
            // title
            title.innerHTML = result.titleNoFormatting;
            var newImg = document.createElement('img');

            // There is also a result.url property which has the escaped version
            newImg.src="/image-search/v1/result.tbUrl;"
            imgContainer.appendChild(title);
            imgContainer.appendChild(newImg);

            // Put our title + image in the content
            contentDiv.appendChild(imgContainer);
          }

          // Now add links to additional pages of search results.
          addPaginationLinks(imageSearch);
        }
      }

      function OnLoad() {

        // Create an Image Search instance.
        imageSearch = new google.search.ImageSearch();

        // Set searchComplete as the callback function when a search is 
        // complete.  The imageSearch object will have results in it.
        imageSearch.setSearchCompleteCallback(this, searchComplete, null);

        // Find me a beautiful car.
        imageSearch.execute("Subaru STI");

        // Include the required Google branding
        google.search.Search.getBranding('branding');
      }
      google.setOnLoadCallback(OnLoad);
    </script>

  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="branding"  style="float: left;"></div><br />
    <div id="content">Loading...</div>
  </body>
</html>

关于php - 在悬停时显示来自谷歌图像搜索的数据属性的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23787464/

25 4 0
文章推荐： mysql - 无法将新数据库连接转换为旧数据库连接
文章推荐： python - IndexError : string index out of range, 索引在范围内
文章推荐： C# 在类实例中显示总金额
文章推荐： python - 从 python 生成的文本文件中删除双方括号和单方括号
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com