VPF::Диаграмма на JavaScript - Форум программистов

russians

Дата 11.2.2009, 14:29 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 297
Регистрация: 6.11.2006

Репутация: нет
Всего: нет

Всем привет! smile

Задача следующая: надо к рисунку сделать привязанные сообщения, при этом рисунок должен менять размер согласно размеру браузера, и текст тоже вместе с ним.
Моё решение было следующим:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>
        Resizing image diagramm
    </title>
    <style type="text/css">
    <!--
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    .background {
      font-face: Arial;
      font-size: 14px;
      position: absolute;
      top: 10%;
      right: 20%;
      z-index: 2;
    }
    .background_two {
      font-face: TimesNewRoman;
      font-size: 14px;
      background: green;
      position: absolute;
      top: 20%;
      right: 30%;
      z-index: 1;
      
    }
    img {
      position: relative;
      border: 0px;
      z-index: 0;
    }
    -->
    </style>
    
    <script type="text/javascript">
    
    function getClientWidth()
    {
      return document.compatMode=='CSS1Compat' && !window.opera ? document.documentElement.clientWidth:document.body.clientWidth;
    }

    function getClientHeight()
    {
      return document.compatMode=='CSS1Compat' && !window.opera ? document.documentElement.clientHeight:document.body.clientHeight;
    }
    
    function imageSize()
    {
      widthBrowser = getClientWidth() -3;
      heightBrowser = getClientHeight() -4;
      document.image.width = widthBrowser;
      setTimeout('imageSize()', 1000);
    }
</script>

</head>

<body onLoad="imageSize()">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td valign="middle">
          <img src="image.jpeg" name="image" alt="" />
          <div class="background">text</div>
          <div class="background_two">text_two</div>
        </td>
      </tr>
    </table>
</body>

</html>

но мне оно кажется кривым и ненадёжным по ряду причин:
1) при изменении размеров экрана сначала сдвигаются текстовые блоки, а потом уже вслед за ними картинка (дёрганное изменение размера)
2) на этот скрипт срабатывает защита браузера IE
3) проходит некоторое время, пока скрипт сообразит размеры картинки.

Вопрос: какое решение придумали бы вы?

bars80080

Дата 11.2.2009, 14:42 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

а не проще

Код


<style>
.qw { position: relative; }
.qw img { display: block; }
.qw div { position: absolute; }
.qw .er1 { left: 100px; top: 100px; }
</style>
<div class="qw">
<img src="" />
<div id="er1">notice1</div>
<div id="er2">notice2</div>
</div>

всё итак будет ездить за слоем

запись координат сообщений зависит от того как мы формируем эти диаграммы. к примеру, если у всех всё по разному (сообщение должно висеть над определённой областью рисунка), то мы его выставляем уникально
если нет, то можно придумать какой-нибудь алгоритм

russians

Дата 11.2.2009, 16:29 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 297
Регистрация: 6.11.2006

Репутация: нет
Всего: нет

bars80080, дык, где оно у тебя подстраивается под окно браузера?
Картинка не помещается в экран, если уменьшить окно.

bars80080

Дата 11.2.2009, 18:42 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

а, блин, не заметил самого главного. так при процентном задании ширины оно само будет подстраиваться width: 100%; для html, body, width: xx%; промежуточные слои и .qw, .qw img

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »