2016-06-25 14 views
0

私のウェブサイトのギャラリーを作りたいです。画像を追加するコードを開発しましたが、Facebookなどの画像に編集ボタンを追加したいと思います。ボタンで画像を編集

イメージにマウスを合わせると、編集ボタンが表示されます。

私は多くを検索しましたが、何の助けもありませんでした。

<?php 
 
    if(isset($_POST['upload_img'])){ 
 

 
    $file_name = $_FILES['images']['name']; 
 
    $file_type = $_FILES['images']['type']; 
 
    $file_size = $_FILES['images']['size']; 
 
    $file_tmp = $_FILES['images']['tmp_name']; 
 
    if($file_name){ 
 
     move_uploaded_file($file_tmp,"img/$file_name"); 
 
    } 
 
    } 
 

 
?> 
 
<html> 
 
<head> 
 
    <title>Test upload img</title> 
 
</head> 
 
<body> 
 
<form action="" method="post" enctype="multipart/form-data"> 
 
<label>Upload Image</label><br> 
 
<input type="file" name="images"><br><br> 
 
<input type="submit" value="upload img" name="upload_img"> 
 
</form> 
 

 
<?php 
 
$folder="img/"; 
 
if(is_dir($folder)){ 
 
if($handle = opendir($folder)){ 
 
while(($file=readdir($handle))!=false){ 
 
if($file==='.' || $file==='..') 
 
continue; 
 
echo'<img src="img/'.$file.'"width="150" height="150"> 
 
<form> 
 
<input type="file" value="Edit"> 
 
</form> 
 
'; 
 
} 
 
closedir($handle); 
 
} 
 
} 
 
?> 
 

 
</body> 
 
</html>

答えて

1

希望このヘルプ:

は、ここに私のコードです。

HTML:

<div class="image_container"> 
    <input type="file" class="edit_btn" value="Edit"> 
    <img src="img.jpg"> 
</div> 

CSS:

.image_container{ position: relative; } 
.edit_btn{ postion: asolute; top: 10px; right: 10px; background-color: #000; color: #fff; padding: 8px 15px; border: 0; display: none; } 
.image_container:hover .edit_btn{ display: block; }