Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как вставить изображение в документ, не используя таблицу? (https://javascript.ru/forum/dom-window/8077-kak-vstavit-izobrazhenie-v-dokument-ne-ispolzuya-tablicu.html)

возжаждавший 05.03.2010 18:41

Как вставить изображение в документ, не используя таблицу?
 
Друзья! То есть я щас чтобы вставить картинку куда-нибудь в центр документа, должен создавать таблицу 3X3 и в среднюю ячейку помещать эту картинку.

Это вообще-то как-то не укладывается у меня в голове. Согласитесь, для определения координат картинки по большому счёту надо две цифры всего:
Допустим, координаты верхнего левого угла. Всё!
ЕСть какой-нибудь способ? Может, я малочитал, не знаю.

ТОгда, если мы захотим двигать картинку по экрану это будет просто. Изменяем ординату, допустим, и картинка движется. Много проще, чем вот в этом МОЁМ коде. (Движение картинки)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Шаблон</title>
 <script>
 i= 0;  
  

  setInterval("f()", 40)
// shirina= table.getElementsByTagName("tr")[0].getElementsByTagName("th")[0].width   
  
  function f () {
   i++

   //Это ширина первого столбца первой ячейки, её и меняем.
   shir= i+"%"
   var table= document.getElementById("tablitsa")
    table.getElementsByTagName("tr")[0].getElementsByTagName("th")[0].width= shir
//    shirina= "75%";
  }
 </script>
</head>

<body onload="f()">
<table width="100%" border="0" id="tablitsa">
  <tr>
    <th width="14%" height="69" scope="row">&nbsp;</th>
    <td width="11%">&nbsp;</td>
    <td width="75%">&nbsp;</td>
  </tr>
  <tr>
    <th height="98" scope="row">&nbsp;</th>
    <td><img src="file:///C|/Documents and Settings/ser/Рабочий стол/eee_1.jpeg" width="128" height="96" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th height="167" scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>


Собсно,тут всё понятно, через каждые 40 мс вызывается функция, меняющая ширину первого столбца (хотелось бы, повторюсь: абсциссу верхнего левого угла) и картинка движется. КАртинка должна быть 148 на 96 пикселей.

subzey 05.03.2010 19:36

Возможно, Вам пригодится запись из моего бложика.

Другой способ, без выдёргивания элемента из потока. У любого элемента с display: table-cell есть вертикальное выравнивание. Делаем таблицу на любой размер (хоть 100% экрана), внутри нее одну ячейку, у ячейки
vertical-align: middle;
text-align: center

Вставляем туда что угодно (кроме флоатов), и это что угодно центруется.

Если Вам не важен ie6, display: table-cell можно задать даже body (именно так центруются картинки в опере, когда они открыты отдельно :) ).

UPD: На расположение блоков text-align: center не распространиется, им нужно задавать:
margin-left: auto;
margin-right: auto;


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