本文介绍了简单的图像标记页面，如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:#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图像标签功能，我可以标记名称但是我想要添加一个功能。每当我将鼠标悬停在被标记的名字上时，它应该显示我在图像上标记的位置。
I want to make a simple image tagging page like facebook image tag functionality, I am able to tag names but further I want to add one functionality. Whenever I will hover on names which are tagged, it should show me where it is tagged on image.
推荐答案
这就是我已经做了图像标记。您可以添加标签和删除标签。并将这些标记的名称保存在文本文件中，以便刷新标记的名称不应该消失。
This is what I have made for image tagging. You can add tag and delete tag. And save those tagged name in text file so that on refresh tagged name should not disappear.
<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  </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>
用于在文本文件中保存标记名称的进一步代码，并在刷新时从该文本文件中获取标记的名称。
The further code for saving tagged names in text file and get tagged names from that text file on refresh.
<?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"';
}
}
?>
这篇关于简单的图像标记页面，如facebook图像标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！