<div style="width: 60px; height: 600px; overflow: hidden;">
<img src='tiser1.jpg' /> Тизер 1<br />
<img src='tiser2.jpg' /> Тизер 2<br />
<img src='tiser3.jpg' /> Тизер 3<br />
<img src='tiser4.jpg' /> Тизер 4<br />
<img src='tiser5.jpg' /> Тизер 5<br />
<img src='tiser6.jpg' /> Тизер 6<br />
</div>
Тизер на JavaScript
Случилось так, что пришлось мне заняться Вебом, что вобщем то не характерно, посему смотрю я на все это как баран на новые ворота.
Ну это лирика, а по теме, надо на джваскрипте сделать некий универсальный рекламный тизер, отображающий картинки+текст, отсюда вопросы у меня вот какие:
1. Как его сделать динамический по высоте, т.е. если есть место, допустим 300 пикселов по высоте, то отображать 3 картинки, если 600, то отображать 5 картинок (цифры с потолка взяты, главное принцип)
2. Как и где хранить "базу" с ссылками и картинками, таким образом, что бы в пользовательском режиме она могла бы правиться.
3. Рандомное отображение картинок при каждой загрузке страницы (на этот вопрос я сам себе почти уже ответил - onDOMContentLoaded).
Буду премного благодарен за любую краткую но полноценную инфу по данной теме. Краткую потому что Веб-занятие для меня не профильное и много времени на него тратить - непозволительная роскошь. :)
Ну это лирика, а по теме, надо на джваскрипте сделать некий универсальный рекламный тизер, отображающий картинки+текст, отсюда вопросы у меня вот какие:
1. Как его сделать динамический по высоте, т.е. если есть место, допустим 300 пикселов по высоте, то отображать 3 картинки, если 600, то отображать 5 картинок (цифры с потолка взяты, главное принцип)
2. Как и где хранить "базу" с ссылками и картинками, таким образом, что бы в пользовательском режиме она могла бы правиться.
3. Рандомное отображение картинок при каждой загрузке страницы (на этот вопрос я сам себе почти уже ответил - onDOMContentLoaded).
Буду премного благодарен за любую краткую но полноценную инфу по данной теме. Краткую потому что Веб-занятие для меня не профильное и много времени на него тратить - непозволительная роскошь. :)
Вообще я думаю, что это сделать без php не получиться, но хотя некоторые есть люди, которые себя очень мучают))).
1. я бы сделал бы проверку на php, какой размер тизера, столько и блоков и выводить.
если на html то можно попробывать так, если вам это подойдет:
Когда внутренний контент тэга div дойдет до размера 600px в вертикаль, то другие тизеры будут скрыты. лучше сразу бы писать проверки на js.
2. без php и mysql здесь не обойтись. пользовательский режим, не совсем понял, но есть у каждого хостера phpmyadmin.
1. я бы сделал бы проверку на php, какой размер тизера, столько и блоков и выводить.
если на html то можно попробывать так, если вам это подойдет:
Код:
Когда внутренний контент тэга div дойдет до размера 600px в вертикаль, то другие тизеры будут скрыты. лучше сразу бы писать проверки на js.
2. без php и mysql здесь не обойтись. пользовательский режим, не совсем понял, но есть у каждого хостера phpmyadmin.
1. Ну насчет пхп тут вообсче никак, ибо сама страница делана во ФронтПейдже, и максимум что туда дают вставить, это скрипт джавовский.
2. Я имел ввиду, что то типа файла текстового, где будет содержаться путь к картинке и ссылка, а зашивать это в сам скрипт не пойдет, т.к. хочется универсальности.
2. Я имел ввиду, что то типа файла текстового, где будет содержаться путь к картинке и ссылка, а зашивать это в сам скрипт не пойдет, т.к. хочется универсальности.
Если ты имеешь в виду,что JS будет считывать из локального файла это дело–то,насколько я знаю,ему не разрешено работать с файлами.Такие дела
Хотя,если хранить это дело на удалённой машине,вполне себе заработает,ИМХО
Хотя,если хранить это дело на удалённой машине,вполне себе заработает,ИМХО
Цитата: @pixo $oft
Если ты имеешь в виду,что JS будет считывать из локального файла это дело–то,насколько я знаю,ему не разрешено работать с файлами.Такие дела
Хотя,если хранить это дело на удалённой машине,вполне себе заработает,ИМХО
Хотя,если хранить это дело на удалённой машине,вполне себе заработает,ИМХО
Ну я имел ввиду что файл этот будет лежать там же,где и основная хтмл страница, а админ сайта будет его править как ему будет нужно.
Просто может есть более изящные способы это проделать и не в таком явном виде держать инфу.
Раз уж отсутствует знание ПХП -
Попробуйде тогда SSI ...
Рекламный блок - вы создаёте отдельную страницу, например "reklama.shtml"
Там вы делаете табличку нужного размера с нужной рекламой...
вставляете в основном файле (например index.shtml) текст видаЖ
[html]
<!--#include file="reklama.shtml"-->
[/html]
И потом только меняете содержимое reklama.shtml
Подробности:
Педивикия
SSI в подробностях
Вариант не претендует на звание лучшего... Но раньше такое использовалось
Попробуйде тогда SSI ...
Рекламный блок - вы создаёте отдельную страницу, например "reklama.shtml"
Там вы делаете табличку нужного размера с нужной рекламой...
вставляете в основном файле (например index.shtml) текст видаЖ
[html]
<!--#include file="reklama.shtml"-->
[/html]
И потом только меняете содержимое reklama.shtml
Подробности:
Педивикия
SSI в подробностях
Вариант не претендует на звание лучшего... Но раньше такое использовалось
для работы используется библиотека jQuery
написАл, как реализовать основные функции для Вашей задачи, общие моменты (random и т.п.) - msdn
написАл, как реализовать основные функции для Вашей задачи, общие моменты (random и т.п.) - msdn
Код:
<script>
$(function(){
//выводит высоту блока
alert($('#ad_block').height());
//добавление картинки и текста
var link = 'my_link',
src = 'my_img',
text = 'my_text';
$('<a href="' + link + '"><img src="' + src + '">' + text + '</a>').appendTo('#ad_block');
//чтение данных с сервера
$.get('data.txt', function(data){
alert(data);
});
//разбиваем строку в массив
var s = 'item1|item2|item3';
var items = s.split('|');
});
</script>
<div id="ad_block" style="height:50px;width:100px">
</div>
$(function(){
//выводит высоту блока
alert($('#ad_block').height());
//добавление картинки и текста
var link = 'my_link',
src = 'my_img',
text = 'my_text';
$('<a href="' + link + '"><img src="' + src + '">' + text + '</a>').appendTo('#ad_block');
//чтение данных с сервера
$.get('data.txt', function(data){
alert(data);
});
//разбиваем строку в массив
var s = 'item1|item2|item3';
var items = s.split('|');
});
</script>
<div id="ad_block" style="height:50px;width:100px">
</div>