Гиперссылки в таблицах

GoodLuck · May 5, 2009

Всем привет!

Предположим имеем что-то вот такое:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Мой сайтик</title>
</head>
<body>
<table width="100%" height="85" border="1" cellpadding="0" cellspacing="0">
  <tr>
	<td width="23%"><p>набор ссылок</p></td>
	<td width="77%">место их загрузки</td>
  </tr>
</table>
</body>
</html>

Поясню. Имеем таблицу, две колонки, в левой набор ссылок, а правая часть - это то, куда они должны загружаться. Как это сделать можете рассказать?! Причем никаких iframe там быть недолжно. Просто просматривая код сайта сделаного в табличном дизайне, никак не могу понять как они этого добиваются. В общем помогите подалуйста кто может.

Nekromancer · May 5, 2009

Серверные скрипты. PHP, SSI..

Используй поиск по форуму.

GoodLuck · May 5, 2009

Спасибо за подсказку!

Наслучай если тема где-то есть... вводил в поиск : "Гиперссылки в таблицах" и выдало только ошибку (незнаю с чем связано).

Edited May 5, 2009 by GoodLuck

GoodLuck · May 5, 2009

Люди, искал я по форуму... можете пожалуйста кинуть сюда код чтобы я разобрался и не страдал?! Т.е код того, как сделать чтобы содержимое гиперссылок загружалось в отдельную ячейку (или таблицу), по примеру:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Мой сайтик</title>
</head>

<body>
<p> </p>
<table width="100%" height="347" border="1" cellpadding="0" cellspacing="0">
  <tr>
	<td width="18%" valign="top">
	<p> </p>
	<li><a href="1.html">Ссылка 1</a>
	<li><a href="2.html">Ссылка 2</a>
	<li><a href="3.html">Ссылка 3</a>
	</td>
	<td width="82%"> 
	Содержимое ссылок</td>
  </tr>
</table>
<p> </p>
</body>
</html>

Edited May 5, 2009 by GoodLuck

SelenIT · May 5, 2009

Просто просматривая код сайта сделаного в табличном дизайне, никак не могу понять как они этого добиваются.

Может, они этого и не добиваются? А просто грузят целиком новую страницу, отличающуюся от прежней только контентной ячейкой (ну, еще тайтлом и метатегами), как нормальные люди?

Потому что средствами HTML сделать это есть лишь одна возможность — iframe. Есть еще вариант AJAX (в простейшем виде — яваскрипт запрашивает с сервера готовый код HTML-фрагмента и вставляет его в innerHTML нужного элемента на странице), но сомневаюсь, что на "сайте сделаном в табличном дизайне" в ход идут такие сложности :rolleyes:

CoDy · May 5, 2009

Для каждого элемента html страници браузером создается объект с кучей свойст. Каждый объект контейнерного элемента имеет свойство innerHTML. В нем хранится содержимое элемента(html код).

Если при помощи ява скрипта присвоить данному свойству html код, то данная разметка будет корректно отображена в браузере.

Например вот есть такая таблица:

</table>

Если при активации ссылки свойству tdid.innerHTML присвоить корректный html код, то эффект будет такой же, еслибы этот код находился в ячейке <td id="tdid"></td> до загрузки странички.

По этой ссылке есть небольшой скрипт, при помощи которого можно просмотреть объектную модель html документа. Там есть небольшой коментарий, думаю, разберешся.

http://codydemosite.h18.ru/dhtml/

GoodLuck · May 6, 2009

Может, они этого и не добиваются? А просто грузят целиком новую страницу, отличающуюся от прежней только контентной ячейкой (ну, еще тайтлом и метатегами), как нормальные люди?

ммм... недумаю Я как глянул хорошие сайты в табличном дизайне (ну как по мне, незнаю насколько они в действительности хорошие), так вот там в коде столько таблиц, ячеек, вложенных в них таблиц, что просто.... В общем незаметил я подгузки новой страницы при приходе по ссылки :rolleyes: Я думаю незаметить было бы весьма сложно такое зрелище Кароче если так сделать, то страницы будут долго грузицо вроде как Ничего нехочу сказать, просто рассуждаю

GoodLuck · May 6, 2009

По этой ссылке есть небольшой скрипт, при помощи которого можно просмотреть объектную модель html документа. Там есть небольшой коментарий, думаю, разберешся.

хехехе Если бы. Так ну давайте по основам.

<table border="1">
<tr><td id="tdid"></td></tr>
</table>
Если при активации ссылки свойству tdid.innerHTML присвоить корректный html код, то эффект будет такой же, еслибы этот код находился в ячейке <td id="tdid"></td> до загрузки странички.

Правильно ли я понял суть дела. Имеем ячейку или таблицу, этой ячейке или таблицы можно происвоить id (типа уникальное имя, чтоб не потерялась). И и с помощью innerHTML (несовсем понял что оно такое, думаю гугл пояснит), можно ссылкам что-то такое прописать, чтоб они думали как будто содержимое этих ссылок находится в ячейке или таблицы c указаным id. Примерно так ?! :rolleyes:

Насчет примера по вашей ссылки, я глянул код и...

<script type="text/javascript">
pseudocounter = 'http://register.h18.ru/g/pseudocounter.js';
document.write('<script type="text/javascript" src="' + pseudocounter + '?' + Math.random() + '"></scr' + 'ipt>');
</script>

ехх... все ровно не понял как оно работает то.

Ну В общем спасибо за ответ Я конечно пишу ответ перед тем как в гугл и в книжку лезть Ладно пойду подумаю.

Edited May 6, 2009 by GoodLuck

SelenIT · May 6, 2009

Имеем ячейку или таблицу, этой ячейке или таблицы можно происвоить id (типа уникальное имя, чтоб не потерялась).

Да.

И и с помощью innerHTML (несовсем понял что оно такое, думаю гугл пояснит), можно ссылкам что-то такое прописать, чтоб они думали как будто содержимое этих ссылок находится в ячейке или таблицы c указаным id. Примерно так ?!

Не совсем, не так просто. innerHTML — это свойство DOM-элемента (до HTML5 было нестандартным, но поддерживается всеми браузерами), позволяющее записывать в него любой допустимый HTML с помощью javascript-а. По событию клика по ссылке можно вызвать скрипт, который 1) запросит этот HTML с сервера, 2) впишет его в нужную ячейку. Второй шаг элементарный, а вот с первым есть тонкости (подробности здесь).

Кстати, далеко не факт, что на современных каналах табличные страницы "будут долго грузицо". Серверы давно умеют сжимать код gzip-ом, а браузеры — рисовать по мере поступления и довольно быстро...

<script type="text/javascript">
pseudocounter = 'http://register.h18.ru/g/pseudocounter.js';
document.write('<script type="text/javascript" src="' + pseudocounter + '?' + Math.random() + '"></scr' + 'ipt>');
</script>

Тут скрипт вписывает в страницу другой скрипт (счетчика) из внешнего файла. Сабжевую задачу это не решает.

GoodLuck · May 6, 2009

Ага, вот оно как на самом деле то Ну я как раз скачал соответствующие книжки, буду искать :rolleyes:

А почему такие сложножности с ответом возникают то ? Я в плане того, что это вроде как должна быть обыденная задача, т.к ссылки есть на всех сайтах. Или я чего-то непонимаю или незнаю ?! Можетя страдаю фигней которую нормальные дизайнеры не используют, а используют кое-что другое ?! Или просто чего-то не учитываю. Поясните кто может.

SelenIT · May 6, 2009

Можетя страдаю фигней которую нормальные дизайнеры не используют, а используют кое-что другое ?!

Большинство, насколько я в курсе, не заморачивается такими сложностями и грузит страницу целиком :rolleyes:

. При этом стремится к минимизации оформительского кода и выносу всех украшательств в CSS (который кешируется браузером). А AJAX использует для небольших динамических элементов (голосований, комментариев и т.п.). Но всё зависит от задачи...

GoodLuck · May 6, 2009

Последую примеру сделаю так же Авось не так все плохо, как думаю :rolleyes:

А если че по сабжу есть написать, то милости прошу

Sign In

Гиперссылки в таблицах

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information