Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как сделать, чтоб появлялись рамки меток на фотографии? (https://javascript.ru/forum/jquery/67311-kak-sdelat-chtob-poyavlyalis-ramki-metok-na-fotografii.html)

Alexandro 10.02.2017 09:22

Как сделать, чтоб появлялись рамки меток на фотографии?
 
Взял отсюда программу Summer-master: https://github.com/summerstyle/summer, расставил метки на фотографии, все работает, если навести курсор на объект на фото, появляется надпись, указанная в Title. Но как сделать, чтобы появлялась еще и рамка (обводка) объекта? И если навести курсор на ссылку на странице, то тоже появлялась обводка на том объекте? Так, как это сделано с метками на фото в Фейсбуке, например?
Перерыл кучу страниц в Интернете, но чтоб появлялась рамка при наведении курсора на изображение и при наведении на ссылку не нашел.

ksa 10.02.2017 09:27

Цитата:

Сообщение от Alexandro
Перерыл кучу страниц в Интернете, но чтоб появлялась рамка при наведении курсора на изображение и при наведении на ссылку не нашел.

Вот оно! ;)

<style type='text/css'>
img:hover,
a:hover {
	border: 2px solid green;
}
</style>
<img src='http://javascript.ru/forum/images/smilies/wink.gif' />
<a href='#'>Test</a>

Alexandro 10.02.2017 09:53

Нет, я имею в виду рамку не на целое изображение, а на метки на фотографии, сделанные как на карте.
Как я понял, это делается с помощью jquery.maphilight.js, но примеров для моего случая не нашел

ksa 10.02.2017 09:59

Цитата:

Сообщение от Alexandro
рамку не на целое изображение, а на метки на фотографии

Оно?
http://htmlbook.ru/html/area

Alexandro 10.02.2017 10:10

Да, но там только общая информация. Объясню задачу попроще. Скажем, сидят на фото Вася и Коля. Если направить курсор на лицо Васи, вокруг его лица появляется рамка и надпись "Вася". Если направить курсор на лицо Коли, уже вокруг его лица появляется рамка и надпись "Коля".
Под фото есть подпись: "Вася и Коля на рыбалке". Если направить курсор на слово "Вася", то опять появляется рамка вокруг его лица, ну, понятно, да?
Так же сделаны метки на фото в Фейсбуке

рони 10.02.2017 10:18

Alexandro,
ищите плагины типа этого
ImageMapster

рони 10.02.2017 10:28

Alexandro,
или копать в сторону svg
https://habrahabr.ru/post/127994/

ksa 10.02.2017 11:07

Цитата:

Сообщение от Alexandro
Если направить курсор на лицо Васи, вокруг его лица появляется рамка и надпись "Вася". Если направить курсор на лицо Коли, уже вокруг его лица появляется рамка и надпись "Коля".

Дык! :D

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.img {
	display: inline-block;
	position: relative;
	border: 1px solid green;
}
.info {
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	color: #000000;
	cursor: pointer;
	border: none;
}
.info > p {
	visibility: hidden;
}
.info:hover {
	border: 1px solid red;
	visibility: visible;
}
.info:hover > p {
	visibility: visible;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class='img'>
	<img src='http://javascript.ru/forum/image.php?u=7416&dateline=1372796129' />
	<div class='info'>
		<p>Это <b>рони</b></p>
	</div>
</div>
<div class='img'>
	<img src='http://javascript.ru/forum/image.php?u=8616&dateline=1282216923' />
	<div class='info'>
		<p>Это <b>ksa</b></p>
	</div>
</div>
</body>
</html>

Alexandro 10.02.2017 12:52

Тут похожее решение.
Вот мануал http://davidlynch.org/projects/maphilight/docs/
и демо http://davidlynch.org/projects/maphi...mo_simple.html

Но когда я подставляю свое изображение и свои значения координат карты, у меня почему-то не работает, не могу понять, почему.

рони 10.02.2017 12:57

Alexandro,
где код?

Alexandro 11.02.2017 17:46

Нашел другой плагин jQuery.photoLabel: https://readyscript.ru/photolabel/
Но и тут проблема. Введенные отметки должны передаваться в файл tags.php и сохраняться в базу данных. В самом файле так и написано:
<?php
/**
* Простой контроллер для серверной части отметок
*/
class Controller
{
    function addTag()
    {
        /*
        Получаем из POST переменные. Здесь мы должны организовать сохранение значений в базу.
        
        creator_id      // id пользователя, который создал отметку (равен viewerId - в JavaScript)
        left            // смещение отмеченной области по горизонтали относительно левого края изображения
        top             // смещение отмеченной области по вертикали относительно верхнего края изображения        
        height          // высота отмеченной области
        width           // ширина отмеченной области        
        img_id          // id изображения        
        img_height      // высота изображения
        img_width       // ширина изображения        
        item_id         // id отмеченного пользователя
        item_title      // подпись отмеченной области
        item_url        // ссылка отмеченной области
        
        leftTopX        // координата X левого верхнего угла в процентах от ширины изображения
        leftTopY        // координата Y левого верхнего угла в процентах от высоты изображения
        rightBottomX    // координата X правого нижнего угла в процентах от ширины изображения
        rightBottomY    // координата Y правого нижнего угла в процентах от высоты изображения
        */
        
        return json_encode(array(
            'success' => true, 
            'tag_id' => rand(0, 9999999) //Возвращаем id отметки
        ));
    }
    
    function removeTag()
    {
        /**
        * Получаем из POST пееменную.
        * 
        * tag_id - id тега, который нужно удалить
        */
        
        return json_encode(array(
            'success' => true
        ));        
    }
    
    function recoverTag()
    {
        /**
        * Получаем из POST пееменную.
        * 
        * tag_id - id тега, который нужно восстановить
        */        

        return json_encode(array(
            'success' => true
        ));        
    }
    
    function _bind()
    {
        $act = $_GET['Act'];
        if ($act{0} != '_' && is_callable(array($this, $act))) {
            return $this->$act();
        }
        die('Not found');
    }
}

$photoLabelController = new Controller();
echo $photoLabelController->_bind();
?>

Как тут "организовать сохранение значений в базу"?
Можно конечно и самому "врукопашную" прописать координаты меток, но тут они в виде процентов:
Цитата:

"id":"100",
"leftTopX":"0.21143",
"leftTopY":"0.39140",
"rightBottomX":"0.50143",
"rightBottomY":"0.86237",
"item_id":1,
"creator_id":"1447",
"item_url":"javascript: alert('здесь может быть переход на страницу Татьяны Сидоровой')",
"item_title":"Татьяна Сидорова"
В какой программе можно вычислить эти "leftTopX", "leftTopY", "rightBottomX", "rightBottomY"? Во других подобных программах координаты в ином формате (типа coords="290,102,30")


Часовой пояс GMT +3, время: 00:21.