Web-интерфейс

AnaStas

Well-known member
16.09.2008
52
0
#1
Добрый день. Прошу проконсультировать.
Задание: На одну из HTML страничек отдельского сайта нужно закодировать визитки(карточки) на каждого сотрудника отдела. По клику мышкой на фамилии сотрудника карточка всплывает
Использую: Ну, для описания карточки стандарт vcard HTML. А для обработки события использую готовый CSS пакет highslide.
Проблема: Все работает. Но, главному не нравится следующее:
1. Если карточку сдвинуть по экрану мышкой, она запоминает свою последнюю позицию и при новом событии она открывается не на строчке с фамилией, а в том месте где ее закрыли. Этого я никак не могу избежать.
2. Совсем не желательно мышкой растягивать рамку. Тоже не могу зафиксировать.
Что посоветуют модераторы?
 

vital

Больной Компом Детектед
29.01.2006
2 432
33
#2
почитать справку по хайслайду. Все это наветрняка настраивается.

Еще изменение размера можно запретить установив max-width,max-height в CSS в соотв-м классе.
 

AnaStas

Well-known member
16.09.2008
52
0
#3
Возвращаюсь к данной теме только для того, чтобы она имела завершенный вид (т.е. приемлемое по данному вопросу решение) и тему можно считать закрытой.
Используя справочник по пакету highslide. http://highslide.com/ref/ , код для данной темы был создан таки:

Код:
<html>
<title>Структура отела</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
. . . . .
<link rel="stylesheet" type="text/css" href="highslide/highslide.css">
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
</head>

<body>
<script type="text/javascript">
<!--
hs.showCredits = false;

function toggle(div,show,displ) {
var ele = document.getElementById(div);
var text = document.getElementById(displ);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = show;
}
else {
ele.style.display = "block";
text.innerHTML = show;
}
}
--> 
</script>

<h1><img src="/img/oxygen/48x48/mimetypes/document.png"> Структура отдела</h1>
<h3>Подразделение № 100</h3>
<!—и далее на каждого сотрудника блок div class="textwrapper 
<div class="textwrapper">
Начальник установки -
<span class="highslide" style="cursor:pointer;"
onClick="return hs.htmlExpand(this,{contentId:'card110',outlineType:'rounded-white'})">
Сидоров П.И.
</span>
<div class="highslide-html-content" id="card110">
<div class="highslide-header"><a href="#" onclick="return hs.close(this);">Сидоров Петр Иванович</a></div>
<div class="highslide-body">
<div class="vcard"><table ><tr><td>
<div class="photo"><img src="/img/oxygen/128x128/actions/user.png" height="128" width="128" style="cursor:pointer;" onclick="return hs.close(this);"></div>
</td><td>
<div style="cursor:pointer" onclick="return hs.close(this);"> 
<div class="fn" style="display:none;">Сидоров Петр Иванович</div>
<div class="title"></div>
<div class="rol">Начальник установки </div>
<div>Телефон:<span class="tel">495-222-...</span></div>
<div>Факс:<span class="tel">495-223-...</span></div>
<div>Мобильный:<span class="tel"></span></div>
</div>
<div>E-mail:<a href="mailto:pisidor@domain.ru" class="email">pisidor@domain.ru</a></div>
</td></tr></table></div>
</div>
</div>
</div>
P.S.
Мы с главным, все-таки, отказались от такого решения (т.е. использовать highslide). Основное назначение этого пакета - оформление Web-галлереи. Если визитка должна иметь простой, без изысков, стиль, то проще все сделать в HTML и несложным небольшим кодом в CSS