Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не совсем обычный фрейм и выезжающий текст при наводе на картинку. (https://javascript.ru/forum/dom-window/14006-ne-sovsem-obychnyjj-frejjm-i-vyezzhayushhijj-tekst-pri-navode-na-kartinku.html)

amaz245 23.12.2010 23:39

Не совсем обычный фрейм и выезжающий текст при наводе на картинку.
 
Всем добрый день. Нуждаюсь в вашей помощи.
1) Есть большая таблица, напичканая вдоль и поперек картинками, ее нужно поместить во фрейм на странице, у которого нет снизу и справа ползунков для передвижения содержимого самого фрейма, передвижение должно осуществляться перетягиванием курсором мыши.
2) При наводе на определенные картинки в таблице, мало того что сама картинка будет меняться (ну как это сделать я представляю), так еще и должна выезжать рядом с курсором аккуратная рамочка с текстом(подробная информация). Буду безмерно благодарен за вашу помощь. Заранее спасибо.

dmitriymar 24.12.2010 00:55

Цитата:

Сообщение от amaz245
Есть большая таблица, напичканая вдоль и поперек картинками, ее нужно поместить во фрейм на странице, у которого нет снизу и справа ползунков для передвижения содержимого самого фрейма,

а это как?это задание учебное или сам себе это придумал?)
80$

amaz245 24.12.2010 01:08

Да не, в школе попросили, вот бадяжу сайт. :lol: Просто пытаюсь узнать как вообще такого типа фреймы делаются.

dmitriymar 24.12.2010 01:14

Дак может там и не фреймы используются?

amaz245 24.12.2010 01:19

Может и не фреймы, мне просто надо эту большую таблицу, которая не влазит по ширине на страницу, поместить во внутреннее окно на этой самой странице.

dmitriymar 24.12.2010 01:21

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

amaz245 24.12.2010 01:27

Хм, да, думаю что это отличное решение. Не мог бы ты мне помочь, пожалуйста, в составлении скрипта?)

dmitriymar 24.12.2010 01:30

могу-скажу где на этом форуме учебники лежат:yes:

dmitriymar 24.12.2010 01:31

делай код-выкладывай. с ошибками помогу

amaz245 24.12.2010 01:32

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

dmitriymar 24.12.2010 01:36

стоит начать с начала-с основ скрипта:yes:ща гляну возможно ли то что написал вообще с контенерами вложенными

amaz245 24.12.2010 01:39

Спасибо большое)

dmitriymar 24.12.2010 01:46

с контейнерами возможно-вложить больший в меньший.отслеживать координаты по меньшему и двигать больший внутри меньшего. в принципе их можно в таком развале вкладывать куда угодно-хоть фреймы хоть в просто страницу

amaz245 24.12.2010 02:04

Что-то я сегодня совсем утомился, лучше завтра днем гляну, в любом случае - еще раз спасибо за помощь. :)

ksa 24.12.2010 11:05

amaz245, мне понравился вот такой вариант с прокруткой таблички...

<!DOCTYPE html>
<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
#container {
	font-family: Tahoma;
	font-size: 10pt;
	border: 1px solid;
	color: #000000;
}
#head {
	height: 16px;
	background-color: orange
}
#box {
	height: 100px;
	overflow: auto;
}
table {
	border: 1px solid;
	border-collapse: collapse;
}
th,
td {
	border: 1px solid;
}
thead tr  {
	position: absolute;
	top: 0;
	left: 0;
}
.c1 {
	width: 100px;
}
.c2 {
	width: 200px;
}
.c3 {
	width: 300px;
}
</style>
<script>
</script>
</head>
<body>
<div id='container'>
	<div id='head'></div>
	<div id='box'>
		<table>
			<thead>
				<tr>
					<th class='c1'>Колонка 1</th>
					<th class='c2'>Колонка 2</th>
					<th class='c3'>Колонка 3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
			<tbody>
		</table>
	</div>
</div>
</body>
</html>

dmitriymar 24.12.2010 13:04

ksa,
а где она прокручивается?

ksa 24.12.2010 14:39

Цитата:

Сообщение от dmitriymar
а где она прокручивается?

На "Посмотреть!" давил? Какой у тебя браузер?
А то я делал в ИЕ7 и смотрел в Опере...

amaz245 24.12.2010 15:04

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

ksa 24.12.2010 16:41

Цитата:

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

Таки поставь оверфлов хидден и дорабатывай далее скриптом... Кто мешает? :)

amaz245 24.12.2010 20:53

Дорабатывать скриптом немного мешает почти нулевое знание javascript'a. :D

ksa 24.12.2010 21:10

Цитата:

Сообщение от amaz245
немного мешает почти нулевое знание javascript'a

Таки компенсируй сей недостаток звонкой монетой! ;)

amaz245 24.12.2010 21:24

Ты имел ввиду, что эта монетка символизирует баксы и предназначается для человека, который за меня напишет этот скрипт, или символизирует знания, предназначенные для моих мозгов?)))

dmitriymar 24.12.2010 21:29

знания за деньги не купишь :yes:

amaz245 24.12.2010 22:36

За время купишь, при желании..

dmitriymar 24.12.2010 22:39

Цитата:

Сообщение от amaz245
За время купишь, при желании..

не уверен,а как же способность применять полученные знания,не говоря уже о способности применять эффективно?вызубрить можно но не факт что сможешь их хоть както применить

amaz245 24.12.2010 22:53

Естественно..
Буду очень благодарен, если хотя бы направите где искать, только поконкретнее чем просто учебник по js. Было бы супер посмотреть на скрипт, реализующий что-то похожее.

dmitriymar 24.12.2010 23:00

amaz245,
абсолютно согласен-не стоит начинать с учебника по скрипту. нужно начать с учебников по html и css:yes:

amaz245 24.12.2010 23:17

Ипануться.. Займусь этим когда преподы потребуют, а это будет не раньше чем я поступлю в вуз и закончу школу. Я конечно не изучал днями учебники по js, не сидел часами выписывая свои собственные скрипты с 0.
Может я и не смогу "собрать глины", "сделать нужынй состав", "слепить кирпичей" и "обработать их при нужной температуре", замутить "цемент". НО ГРЕБАННЫЙ "КАМИН", подпертый тремя костылями из всего этого я сделаю, причем сэкономив много своего времени. Так вот, люди добрые, я вас очень прошу, дайте мне хотя бы ПОЛ ГРЕБАННОГО КИРПИЧА, а не лопату, ведро и посылку на глиняный карьер.

dmitriymar 25.12.2010 00:21

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

amaz245 25.12.2010 01:31

Ну ты блин чертяка крут, заставил таки мой мозг работать, а не надеятся получить по четверти камина от каждого на халяву. :)
Думаю легче и красивее будет сделать на каждом боку этого фрейма красивую кнопочку, при наведении на которую содержимое фрейма будет передвигаться в соответсвующую сторону. Даже примеры похожих скриптов опробовал - работает как надо.
Только вот вопрос о выплывающих рамочках с текстом остается открытым и я не знаю, смогут ли сами эти рамочки вылазить за границы фрейма?(Если например рамка должна вылезти при наведении курсора на объект, который находится у самого края границы фрейма).

x-yuri 25.12.2010 06:49

Цитата:

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

Цитата:

Сообщение от amaz245
Думаю легче и красивее будет сделать на каждом боку этого фрейма красивую кнопочку, при наведении на которую содержимое фрейма будет передвигаться в соответсвующую сторону.

легче? Легче - это использовать полосы прокрутки, а не изобретать их самому

Цитата:

Сообщение от amaz245
Только вот вопрос о выплывающих рамочках с текстом остается открытым и я не знаю, смогут ли сами эти рамочки вылазить за границы фрейма?

не смогут. Тут не нужны фреймы. А если таблица не помещается по ширине - значит в ней слишком много информации и надо сделать, чтобы эта информация помещалась по ширине

dmitriymar 25.12.2010 08:33

не делай фреймом в этом случае-если хочеш чтоб вылазили 0делай контейнерами

amaz245 25.12.2010 16:22

Не, ползунки там реально не к месту, там не просто текст с картинками, там карта одного из районов, на котором изображены логотипы всех расположенных там предприятий и школ.
Оке, буду пробовать контейнерами, спс.

x-yuri 25.12.2010 16:33

а, теперь понятно, что значит "передвижение должно осуществляться перетягиванием курсором мыши". Тогда да, полосы прокрутки не нужны

ksa 25.12.2010 17:17

Цитата:

Сообщение от amaz245
Ты имел ввиду, что эта монетка символизирует баксы и предназначается для человека, который за меня напишет этот скрипт

Именно так. :yes:

dmitriymar 25.12.2010 17:29

Цитата:

Сообщение от amaz245
(Если например рамка должна вылезти при наведении курсора на объект, который находится у самого края границы фрейма).

а если в средине-за пределы таблицы не должна выходить чтобы отобразиться? или позиционируется не выдвижением вбок,а выдвижение с наложением? ну дак тогда в варианте у самого края можно выводить от края во внутрь-это я о позиционировании


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