javascript - 简单的图像标记页面，如 facebook 图像标记-6ren

javascript - 简单的图像标记页面，如 facebook 图像标记

转载作者：可可西里更新时间：2023-11-01 13:10:45

<html>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <title>IMAGE TAGGING</title>
    <body>
    <center>
        <div id="container" style="width:800px">
            <div id="header" style="background-color:#FFA500;">
                <h1 style="margin-bottom:0;">Tag Your Friends</h1>
            </div>

            <div id="content" style="background-color:#EEEEEE; height:450px; width:800px; float:left;">
                <div style="color:#0000FF">
                    <center>
                        <!--<img border="0" src="clock.jpg" onclick="myFunction(e)" width="800px" height="450">-->
                        <div id="pointer_div" onclick="myFunction(event)" style = "background-image:url('clock.jpg');width:800px;height:450px;">
                        </div>
                    </center>
                </div>
            </div>
            <div id="planetmap">

            </div>
            <div id='form_panel'>
                <div class='row'>
                    <div class='label' id='label'>Title</div><div class='field' id='field'><input type='text' id='title' name='title' /></div>
                </div>
                <div class='row'>
                    <div class='label'></div>
                    <div class='field'>
                        <input type='button' value='Add Tag' onclick='addTag()' id='addTag'/>
                    </div>
                </div>

            </div>

            <div id="footer" style="background-color:#ADFF85; clear:both; text-align:center;" >
                <h3>Your Friends Here: </h3><div id="demo" ></div>
            </div>
        </div>
    </center>
    <script>
    var pos_x;
    var pos_y;
        function myFunction(e)  // called when click on image to create span and textbox
        {
            $("#title").val("");
            pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
            pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
            x_pos = event.pageX;
            y_pos = event.pageY;
            x_pos = x_pos - 50;
            y_pos = y_pos - 50;
            var element = document.createElement('div');
            element.id = "someID";
            document.body.appendChild(element);
            document.getElementById('someID').style.width='100px';
            document.getElementById('someID').style.height='100px';
            document.getElementById('someID').style.background='transparent';
            document.getElementById('someID').style.border='thick solid #0000FF';
            document.getElementById('someID').style.position = "absolute";
            x = document.getElementById('someID').style.left=x_pos+'px';
            y = document.getElementById('someID').style.top=y_pos+'px';
            form(x_pos,y_pos);
        }
    </script>

    <script>
        jQuery(window).load(function(){
              jQuery("#form_panel").hide();

             $('#addTag').on('click',function (e) {  //creates span dynamically
                $('#demo').append('<span class="tags" id="'+$('#title').val()+'" data-y="'+'this.pos_y'+'" data-x="'+'this.pos_x'+'">'+$('#title').val()+', </span>');
                console.log("#addTag'");
                console.log(pos_x);console.log(this.data-y);

            });


            jQuery(".tags").live("mouseover",function(){
                // $(this).find(".tagged_box").css("background-color","yellow");
                console.log("mouseover");console.log(this.id);console.log(pos_y);
                console.log(this.data-y);  // here i have stuck
                //over();


            });
        })

        function over(){

            console.log("demo over");

        }

        function form(x_pos,y_pos){   // to create textbox, call from myFunction()
            jQuery("#someID").show();
            var ele = document.getElementById('form_panel');
            x_pos = x_pos - 25;
            y_pos = y_pos - 80;
            document.body.appendChild(form_panel);
            document.getElementById('form_panel').style.width='180px';
            document.getElementById('form_panel').style.height='70px';
            document.getElementById('form_panel').style.background='#eee';
            document.getElementById('form_panel').style.position = "absolute";
            document.getElementById('form_panel').style.left=x_pos+'px';
            document.getElementById('form_panel').style.top=y_pos+'px';
            //console.log("form is showing in form()");
            jQuery("#form_panel").show();
        }

        function addTag(){

            var text = document.getElementById('title').value; //value of text box 
            //console.log(text);
            var demoid = document.getElementById('demo'); //html of #demo
            //console.log(demoid);
            jQuery("#form_panel").hide();
            jQuery("#someID").hide();
            //console.log("in addTag");

        }
    </script>
    </body>
</html>

我想制作一个简单的图像标记页面，例如 facebook 图像标记功能，我可以标记名称，但我还想添加一项功能。每当我将鼠标悬停在已标记的名称上时，它应该会显示它在图像上的标记位置。

最佳答案

这是我为图像标记所做的。您可以添加标签和删除标签。并将这些标记名称保存在文本文件中，以便在刷新标记名称时不会消失。

<html>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <title>IMAGE TAGGING</title>
    <body>
    <center>
        <div id="container" style="width:800px">
            <div id="header" style="background-color:#FFA500;">
                <h1 style="margin-bottom:0;">Tag Your Friends</h1>
            </div>

            <div id="content" style="background-color:#EEEEEE; height:450px; width:800px; float:left;">
                <div style="color:gray">
                    <center>
                        <div id="pointer_div" class="pointer_div" onclick="myFunction(event)" style = "background-image:url('abstract-hd-wallpaper-24.jpg');width:800px;height:450px;">
              <?php
              $filetxt = 'data/data.txt';
              if(file_exists($filetxt)) 
              {
                $jsondata = file_get_contents($filetxt);

                $arr_data = json_decode($jsondata, true);
                $length=sizeof($arr_data);
                $i=0;
                while ( $i< $length) 
                {

                  ?>  
                  <div class="store" id="<?php echo $arr_data[$i]['youname'];?>" data-y="<?php echo $arr_data[$i]['x'];?>" data-x="<?php echo $arr_data[$i]['y'];?>" style="top:<?php echo $arr_data[$i]['x'];?>px; left:<?php echo $arr_data[$i]['y'];?>px; position:absolute; width:100px; height:100px; border:3px solid gray" ><?php echo $arr_data[$i]['youname'];?></div>
                  <?php 
                  $i++;
                }

              }
              else echo 'The file '. $filetxt .' not exists';
            ?>
                        </div>
                    </center>
                </div>
            </div>
            <div id="planetmap">
      </div>
            <div id='form_panel'>
          <div class='row'>
            <form  id ="saveform">
              <div class='label' id='label'>Title</div>
              <div class='field' id='field'>
                <input type='text' id='title' name='title' />
              </div>
              <input type='button' value='Add Tag' id='addTag'/><!-- <input type='button' value='Cancel' onclick='cancel()' id='cancel'/> -->
              </form>
            </div>
      </div>
      <div class = "overshow" id = "overshow" style="color:red;"></div>
        <div id="footer" style="background-color:#ADFF85; clear:both; text-align:center;" >
            <h3>Your Friends Here: </h3>
        <div id="demo" >
            <?php
              $filetxt = 'data/data.txt';
              if(file_exists($filetxt)) 
              {
                $jsondata = file_get_contents($filetxt);

                $arr_data = json_decode($jsondata, true);
                $length=sizeof($arr_data);
                $i=0;
                while ( $i< $length) 
                {

                  ?>  
                  <span class="tags" id="<?php echo $arr_data[$i]['youname'];?>" data-y="<?php echo $arr_data[$i]['x'];?>" data-x="<?php echo $arr_data[$i]['y'];?>" ><?php echo $arr_data[$i]['youname'];?><span class="del" id="<?php echo $arr_data[$i]['youname'];?>" style="color:red">X</span></span>
                  <?php 
                  $i++;
                }

              }
              else echo 'The file '. $filetxt .' not exists';
            ?>
        </div>
             </div>
        </div>
    </center>



    <script>
    var x_pos;
    var y_pos;
        function myFunction(e)  // called when click on image to create span and textbox
        {
            $("#title").val("");
            pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
            pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
            x_pos = event.pageX;
            y_pos = event.pageY;
            x_pos = x_pos - 50;
            y_pos = y_pos - 50;
            var element = document.createElement('div');
            element.id = "someID";
            document.body.appendChild(element);
            document.getElementById('someID').style.width='100px';
            document.getElementById('someID').style.height='100px';
            document.getElementById('someID').style.background='transparent';
            document.getElementById('someID').style.border='thick solid #0000FF';
            document.getElementById('someID').style.position = "absolute";
            x = document.getElementById('someID').style.left=x_pos+'px';
            y = document.getElementById('someID').style.top=y_pos+'px';
            form(x_pos,y_pos);
        }
    </script>

    <script>
  var ids;
  var idss;
  var clas;
        $(window).load(function(){
            $("#form_panel").hide();
      $(".store").hide();
          var del_div = '<span class="del" id="del">DEL &nbsp</span>'
          var close_div = '<span class="cls" id="cls"> CLOSE</span>'
          $(".overshow").hide();
      console.log("form panel");


          $('#addTag').on('click',function (e) {  //creates span dynamically,called when clicked on addtag button
                var append_string = '<span class="tags" id="'+$('#title').val()+'" data-y="'+y_pos+'" data-x="'+x_pos+'">'+$('#title').val()+' <span class="del" id="'+$('#title').val()+'" style="color:red">X</span></span>'
                $('#demo').append(append_string);
          var store_div = '<div class="store" id="'+$('#title').val()+'" data-y="'+y_pos+'" data-x="'+x_pos+'" style="top:'+y_pos+'px; left:'+x_pos+'px; position:absolute; width:100px; height:100px; border:3px solid gray">'+$('#title').val()+'</div>'
          $('#pointer_div').append(store_div);

          $('.store').hide('slow');
          console.log("store_div");
          $("#form_panel").hide('slow');
          $("#someID").hide('slow');
          var text = $('#title').val();
          var data_y = y_pos;
          var data_x = x_pos;
          console.log("ajax is ahead");

          $.ajax({                      // passing data to save in textfile
             type: "POST", // post or get
             url: 'save.php',
             data: 'text='+text+'&x='+data_y+'&y='+data_x,
             // dataType: "json",
             success: function(e)
             { 
               // alert(e);
             }
        });

            });


      jQuery(".tags").live('click',function(){ //to show a tagged pose
        ids = $(this).attr('id');
        idss=ids;
        console.log(ids);
        var x_cord = $(this).attr('data-x');
        var y_cord = $(this).attr('data-y');

        $('#overshow').show('fast'); //.delay(1000).hide('slow');
      });

      jQuery(".tags").live('mouseenter',function(){ //tag name mouseenter
          var idss = $(this).attr('id');
          ids=idss;
          console.log(idss);
          var x_cord = $(this).attr('data-x');
          var y_cord = $(this).attr('data-y');
              $("#overshow").css({top: y_cord, left: x_cord, width:'100px', height:'100px', position:'absolute',border:'3px solid gray'});
              $('#overshow').show('slow'); //.delay(1000).hide('slow');

        }); 
        jQuery(".tags").live('mouseleave',function(){
          $('#overshow').hide();
          // $('#overshow').show('slow').delay(1000).hide('slow');
        });

      jQuery(".cls").live('click',function(){ //to close a overshow of tag
        //alert("close");
        $('.overshow').hide();
      });

      jQuery(".del").live('click',function(){ //to delete a tag
        var idd=ids;
        $('.overshow').hide();
        $("#"+idss).remove();
        $("#"+idss).remove();
        $("#"+ids).remove();
        $("#"+ids).remove();
        $('.overshow').hide();

        var data_y = y_pos;
        var data_x = x_pos;

        $.ajax({ // passing data to delete from textfile
         type: "POST",  // post or get
         url: 'save.php',
         data: 'text1='+ids+'&x1='+data_y+'&y1='+data_x,
         // dataType: "json",
         success: function(e)
         { 
           // alert(e);
         }
        });

      });


      jQuery(".pointer_div").live('mouseenter',function(){ //image mouseenter
        console.log("mouseenter on image");
        $('.store').show();

      }); 

      jQuery(".pointer_div").live('mouseleave',function(){
        // console.log("mouseleave");
        $('.store').hide();
        $('.overshow').hide();

      });

      })

        function over(){

            console.log("demo over");

        }

        function form(x_pos,y_pos){   // to create textbox, call from myFunction()
            jQuery("#someID").show('slow');
        var ele = document.getElementById('form_panel');
            x_pos = x_pos - 25;
            y_pos = y_pos - 80;
            document.body.appendChild(form_panel);
            document.getElementById('form_panel').style.width='180px';
            document.getElementById('form_panel').style.height='70px';
            document.getElementById('form_panel').style.background='#eee';
            document.getElementById('form_panel').style.position = "absolute";
            document.getElementById('form_panel').style.left=x_pos+'px';
            document.getElementById('form_panel').style.top=y_pos+'px';
            //console.log("form is showing in form()");
            jQuery("#form_panel").show('slow');
        }

    function addTag(){

            var text = document.getElementById('title').value; //value of text box 
            console.log(text);
            var demoid = document.getElementById('demo'); //html of #demo
            //console.log(demoid);
            jQuery("#form_panel").hide('slow');
            jQuery("#someID").hide('slow');
    }

    function cancel(){

        $("#form_panel").hide('slow');
        $("#someID").hide('slow');
    }


    </script>

    </body>
</html>

用于在文本文件中保存标记名称并在刷新时从该文本文件中获取标记名称的进一步代码。

<?php
//refer : http://coursesweb.net/php-mysql/add-form-data-text-file-json-format_t
$filetxt = 'data/data.txt';

// check if all form data are submited, else output error message
if(isset($_POST['text'])) {
  // if form fields are empty, outputs message, else, gets their data
  if(empty($_POST['text'])) {
    echo 'All fields are required';
  }
  else {
    // gets and adds form data into an array
    $formdata = array(
      'youname'=> $_POST['text'],
      'x'=> $_POST['x'],
      'y'=> $_POST['y'],
    );

    // path and name of the file
    $filetxt = 'data/data.txt';

    $arr_data = array();        // to store all form data

    // check if the file exists
    if(file_exists($filetxt)) {
      // gets json-data from file
      $jsondata = file_get_contents($filetxt);

      // converts json string into array
      $arr_data = json_decode($jsondata, true);
      echo $arr_data;
    }

    // appends the array with new form data
    $arr_data[] = $formdata;

    // encodes the array into a string in JSON format (JSON_PRETTY_PRINT - uses whitespace in json-string, for human readable)
    $jsondata = json_encode($arr_data, JSON_PRETTY_PRINT);

    // saves the json string in "formdata.txt" (in "dirdata" folder)
    // outputs error message if data cannot be saved
    if(file_put_contents('data/data.txt', $jsondata)) echo 'Data successfully saved';
    else echo 'Unable to save data in "data/data.txt"';
  }
}
else {

  $filetxt = 'data/data.txt';

    $arr_data = array();        // to store all form data
    echo $text1 = $_POST['text1'];

    // check if the file exists
    if(file_exists($filetxt)) {
      // gets json-data from file
      $jsondata = file_get_contents($filetxt);

      // converts json string into array
      $arr_data = json_decode($jsondata, true);

      foreach ( $arr_data as $k => $abc ) {
        // print_r($abc['youname']);
        if ( $abc['youname'] != $text1 ) {

            $xyz[]=$abc;
        }

      }

      print_r($xyz);

      $jsondata = json_encode($xyz, JSON_PRETTY_PRINT);
      if(file_put_contents('data/data.txt', $jsondata)) echo 'Data successfully saved';
      else echo 'Unable to save data in "data/data.txt"';
    }
}
?>

关于javascript - 简单的图像标记页面，如 facebook 图像标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22833253/

文章推荐： html - Bootstrap 列不响应/不流畅

文章推荐： php - 使用 xpath 获取输入字段的值

文章推荐： php - 将 nodejs 与 php 应用程序集成的建议

文章推荐： html - 文本右对齐和右填充

javascript - 图像->JSON->.Net 图像
我正在尝试学习 Knockout 并尝试创建一个照片 uploader 。我已成功将一些图像存储在数组中。现在我想回帖。在我的 knockout 码(Javascript)中，我这样做: 我在 Jav
php - 如何在mysql中添加文本+图像+文本+图像+ ...？
我正在使用 php 编写脚本。我的典型问题是如何在 mysql 中添加一个有很多替代文本和图像的问题。想象一下有机化学中具有苯结构的描述。最有效的方法是什么？据我所知，如果我有一个图像，我可以在数据
html - Bootstrap 图像/按钮/图像
我在两个图像之间有一个按钮，我想将按钮居中到图像高度。有人可以帮帮我吗？ Entrar
javascript - 从中心点旋转全尺寸 Canvas 图像，而不移动其他 Canvas 图像
下面的代码示例可以在这里查看 - http://dev.touch-akl.com/celebtrations/ 我一直在尝试做的是在 Canvas 上绘制 2 个图像(发光，然后耀斑。这些图像的链接
javascript - 为什么相同的 JS 代码不适用于第二个帖子/图像，但适用于第一个帖子/图像？
请检查此https://jsfiddle.net/rhbwpn19/4/ 图像预览对于第一篇帖子工作正常，但对于其他帖子则不然。我应该在这里改变什么？ function readURL(input)
javascript - HTML Canvas 图像 - 在页面中绘制多 Canvas 图像
我对 Canvas 有疑问。我可以用单个图像绘制 Canvas ，但我不能用单独的图像绘制每个 Canvas 。- 如果数据只有一个图像，它工作正常，但数据有多个图像，它不工作你能帮帮我吗？ va
ios - 查找指定文件的扩展文件类型(JPEG 图像、TIFF 图像、...) objective c
我的问题很简单。如何获取 UIImage 的扩展类型？我只能将图像作为 UIImage 而不是它的名称。图像可以是静态的，也可以从手机图库甚至文件路径中获取。如果有人可以为此提供一点帮助，将不胜感激。
image-processing - 如何将 SVG 图像 "paths"转换为单独的 PNG 图像？
我有一个包含 67 个独立路径的 SVG 图像。是否有任何库/教程可以为每个路径创建单独的光栅图像(例如 PNG)，并可能根据路径 ID 命名它们？最佳答案谢谢大家。我最终使用了两个答案的组合。
javascript - 使一个(图像)向右移动并旋转 45 度，同时将鼠标悬停在另一个(图像)上
我想将鼠标悬停在一张图片(音乐专辑)上，然后播放一张唱片，所以我希望它向右移动并旋转一点，当它悬停时我希望它恢复正常动画片。它已经可以向右移动，但我无法让它随之旋转。我喜欢让它尽可能简单，因为我不是编
ios - Retina iOS 设备不显示@2X 图像，它显示 1X 图像
Retina iOS 设备不显示@2X 图像，它显示 1X 图像。我正在使用 Xcode 4.2.1 Build 4D502，该应用程序的目标是 iOS 5。我创建了一个测试应用(主/细节)并添加
javascript - 如何将 HTML CSS 图像 slider 转换为 Angular 图像 slider ？
我正在尝试从头开始以 Angular 实现图像 slider ，并尝试复制 w3school基于图像 slider 。下面我尝试用 Angular 实现，谁能指导我如何使用 Angular 实现？
c++ - 如何从 opencv 中的 RGB 图像(3 channel 图像)访问图像数据
我正在尝试获取图像的图像数据，其中 w= 图像宽度，h = 图像高度 for (int i = x; i imageData[pos]>0) //Taking data (here is the pr
php - HTML (或 JS 图像)与通过 PHP 的内联图像(base64_encoded 图像)
我的网页最初通过在 javascript 中动态创建图像填充了大约 1000 个缩略图。由于权限问题，我迁移到 suPHP。现在不用标准标签本身我正在通过这个 php 脚本进行检索 $file
python - 将 Python Opencv 图像(numpy 数组)转换为 PyQt QPixmap 图像
我正在尝试将 python opencv 图像转换为 QPixmap。我按照指示显示Page Link我的代码附在下面 img = cv2.imread('test.png')[:,:,::1]/2
python - OpenCV 将图像读取为 3 channel 图像，而 PIL 将图像读取为 1 channel 图像
我试图在这个 Repository 中找出语义分割数据集的 NYU-v2 . 我很难理解图像标签是如何存储的。例如，给定以下图像: 对应的标签图片为: 现在，如果我在 OpenCV 中打开标签图像，
java - 如何循环 8*1 svg 图像(由 java 生成)以获得 8*8 svg 图像？
import java.util.Random; class svg{ public static void main(String[] args){ String f="\"
Android自定义画笔图案/图像
我有一张 8x8 的图片。 (位图 - 可以更改) 我想做的是能够绘制一个形状，给定一个 Path 和 Paint 对象到我的 SurfaceView 上。目前我所能做的就是用纯色填充形状。我怎样才
HTML 图像
要在页面上显示图像，你需要使用源属性（src）。src 指 source 。源属性的值是图像的 URL 地址。定义图像的语法是：在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此
图像&视频编辑工具箱MMEditing安装及使用示例(Inpainting)
**MMEditing是基于PyTorch的图像&视频编辑开源工具箱，支持图像和视频超分辨率(super-resolution)、图像修复(inpainting)、图像抠图(matting)、
来自资源文件的 Qt 图像
我正在尝试通过资源文件将图像插入到我的程序中，如下所示: green.png other files 当我尝试使用 QImage 或 QPixm

可可西里

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 简单的图像标记页面，如 facebook 图像标记