Cover photo
meniny Dnes je: 19.1.2018, meniny má: Drahomíra, Mário

Html, php

Photo Tag

Facebookové fototagovanie - označovanie ľudí, vecí, objektov je pravdepodobne známe všetkým. V tomto článku si ukážeme, ako podobný systém vytvoriť a vysvetlíme si základný princíp fungovania.

Na začiatok je potrebné vytvoriť databázovú tabuľku:

Štruktúra MySQL tabuľky:

CREATE TABLE IF NOT EXISTS `tagged` (
  `id` mediumint(9) NOT NULL auto_increment,
  `photoID` mediumint(9) NOT NULL,
  `tagCounter` mediumint(9) NOT NULL,
  `tagValue` varchar(200) character set utf8 NOT NULL,
  `targetX` smallint(6) NOT NULL,
  `targetY` smallint(6) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Tabuľka obsahuje pre nás dôležité stĺpce:

id - jedinečný identifikátor
tagValue - popis k vytvorenému tagu, resp. jeho názov
targetX - poloha tagu na X súradnici
targetY - poloha tagu na Y súradnici
photoID - identifikátor obrázka - každý obrázok má svoj jedinečný identifikátor.

Vytvorením tabuľky sa naša práca s databázou skončila, ďalej s ňou už nebudeme pracovať.

Na začiatku musíme definovať nasledujúce premenné:


<?php 
// unikátne ID každej fotografie
$photoID 1;
// najvyšší dočasný counter
$counter    mysql_fetch_array(mysql_query("SELECT MAX(tagCounter)
FROM tagged WHERE photoID = 
$photoID"));
$tagCounter = (int) $counter[0];
$tagCounter += 1;
?>
Samotný obrázok vkladáme do stránky nasledovne:


<div id="photoID" rel="<?php echo $photoID ?>"></div>
<img src="obrazok.jpg" style="width: 720px; height: 540px;">
Obrázku predchádza div, ktorý ma definované id a parameter rel. Parameter rel je premenná photoID obrázku, ktoré sme definovali na začiatku.

Do samotného tela stránky potrebujeme načítať aj súbor kaskádových štýlov style.css, ktorý vyzerá nasledovne:

#tag-wrapper
{
-webkit-box-shadow: 0px 0px 10px #bbb;
-moz-box-shadow: 0px 0px 10px #bbb;
box-shadow: 0px 0px 10px #bbb;
border: 1px solid #ccc;
position: relative;
display: block;
padding: 10px;
}
#tag-target, #tag-wrapper img {
cursor: crosshair;
}
#tag-wrapper img {
position: absolute;
}
#tag-target
{
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
border: 4px solid #fff;
position: absolute;
display: none;
height: 100px;
width: 100px;
top: 0px;
left: 0px;
z-index: 2;
}
#tag-input
{
background: #fff;
display: none;
padding: 5px;
position: absolute;
top: 0px;
left: 0px;
width: 137px;
z-index: 2;
}
#tag-input label
{
display: block;
font-weight: bold;
}
#tag-input input
{
border: 1px solid #ccc;
color: #888;
display: block;
margin: 5px 0px;
outline: 0px;
padding: 3px;
width: 124px;
}
.hotspot
{
border-width: 0px;
box-shadow: 0px 0px 0px #000;
-webkit-box-shadow: 0px 0px 0px #000;
-moz-box-shadow: 0px 0px 0px #000;
height: 100px;
width: 100px;
position: absolute;
}
.hotspot:hover, .hotspothover
{
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
z-index: 1;
}
.hotspot span
{
display: none;
}
.hotspot:hover span, .hotspothover span
{
background: #fff;
display: block;
font-weight: bold;
padding: 3px 0px;
text-align: center;
}
.remove
{
color: #748950;
cursor: pointer;
text-decoration: underline;
}
a súbory JQuerry pre korektné fungovanie aplikácie:

<script src="jquery.min.js" type="text/javascript"></script>
Zobrazovanie tagov, prípadne ich vymazanie zabezpečíme nasledovne:

<?php 
    
// možnosť ukážky + zmazanie tagu
    
$q mysql_query("SELECT * FROM tagged WHERE photoID =
$photoID");
    if (
mysql_num_rows($q))
    {
        while (
$r mysql_fetch_object($q))
        {
            
?>
            <p id="hotspot-item-<? echo $r->tagCounter ?>"><? echo
$r->tagValue ?> <span onmouseout="hideTag(<? echo $r->tagCounter ?>)"
onmouseover="showTag(<? echo $r->tagCounter ?>)"
onclick="removeTag(<? echo $r->tagCounter ?>)"
class="remove">(Vymazať)</span>
            <?php
        
}
    }
?>
Ďalej si vysvetlíme štruktúru súborov zabezpečujúcich ukladanie pozícií tagov, ich zobrazenie, prípadne vymazanie.

Súbor connection.php

Základné pripojenie k databáze:


<?php 
$server 
'localhost';
$user   'root';
$pwd    'heslo';
$db     'databaza';

$link mysql_connect($server$user$pwd);    
$msdb mysql_select_db($db);
?>
Súbor ajaxAdd.php

Pridanie nového tagu do MySQL databázy

<?php  
require 'connection.php';
    
$photoID    = (int) $_GET["photoID"];
$tagCounter = (int) $_GET["tagCounter"];
$tagValue   =  $_GET["tagValue"];
$targetX    = (int) $_GET["targetX"];
$targetY    = (int) $_GET["targetY"];
    
mysql_query("INSERT INTO tagged SET 
photoID    = '
$photoID',
tagCounter = '
$tagCounter',
tagValue   = '
$tagValue',
targetX    = '
$targetX',
targetY    = '
$targetY'
"
);
?>
Súbor del.php

Vymazanie tagu


<?php 
require 'connection.php';
    
$photoID    = (int) $_GET["photoID"];
$tagCounter = (int) $_GET["tagCounter"];
    
mysql_query("DELETE FROM tagged WHERE photoID = $photoID AND
tagCounter = 
$tagCounter"); 
?>
Súbor loadPosition.php

Simulácia a znázornenie tagov


<?php 
require 'connection.php';
    
$photoID = (int) $_GET["photoID"];
$q mysql_query("SELECT * FROM tagged WHERE photoID = $photoID");
if (
mysql_num_rows($q))
    {
        while (
$r mysql_fetch_object($q))
        {
            
?>
                <div style="left: <?= $r->targetX ?>px; top: <?=
$r
->targetY ?>px;" class="hotspot" id="hotspot-<?= $r->tagCounter
?>
"><span><?= $r->tagValue ?></span></div>
            <?php
        
}
    }
?>
Ukážka aplikácie Photo Tag. Pri akomkoľvek probléme ma prosím kontaktujte, aplikácia je stále vo vývoji.

Aplikácia Photo Tag bola otestovaná a funguje v prehliadačoch: Opera, Mozilla, MSIE 7, MSIE 8, Google Chrome.

Kompletná ukážka v zip súbore: Stiahnuť Photo Tag
KOMENTÁRE

Meno *

E-mail

captcha

Odpíšte kód

Publikované: 15. 10. 2010 | prečítané: 2134x | komentárov: (0) | tagy: Facebook photo tag, photo tagger,
Hosting zadarmo od WebSupport.sk

Dara Rolins ft. Tomi Popovic - Nebo Peklo Raj

Kontakt
|
Vyhľadávanie
|
HTML5
|
CSS

webmaster: posta@dkubinsky.sk

štatistiky prístupov

Tvorba web stránok

Web stránky, e-shopy a aplikácie efektívne, funkčne, jednoducho - postavené na vlastnom redakčnom systéme.

Web stránky a E-shopy efektívne, funkčne, jednoducho...

Návrat hore