Демо Файлы Мы создадим простую форму, в которой пользователь сможет выбрать размер баннера и сразу же получить код для его установки у себя на сайте. Кроме этого, юзер сможет увидеть внешний вид баннера.
У нас будет 3 элемента: Size Selector, Code Box, Example Area (выбор размера, ячейка с кодом, просмотр баннера).
По умолчанию у нас будет показываться баннер 125х125 пикселей.
После выбора другого размера автоматически будет меняться код и баннер для просмотра.
HTML Разметка
Нас необходимо подумать о том, что будет меняться при выборе другого размера. Будет меняться только название графического изображения, т.е. баннера. Остальной код будет неизменным. Поэтому, давайте поступим по-умному и включим эту ценную информацию в разметку каждого элемента (в качестве атрибута rel). Благодаря этому нам будет легко к нему обратиться в дальнейшем с помощью JavaScript. Code
<fieldset>
<legend>Choose</legend>
<form action="#" class="code-selector">
<div>
<label for="type-size">Graphic Size: </label>
<select name="type-size" id="type-size">
<option selected="selected" rel="AMSU_Ad_125x125v2.png">125 x 125</option>
<option rel="AMSU_Ad_300x250v2.png">300 x 250</option>
<option rel="AMSU_Ad_465v2.png">465 x 55</option>
<option rel="AMSU_Ad_768x90v2.png">768 x 90</option>
<option rel="AMSU_Ad_120x240.png">120 x 240</option>
<option rel="AMSU_Ad_318x54.png">318 x 54</option>
<option rel="AMSU_Ad_50x50.png">50 x 50</option>
</select>
</div>
<div>
<label for="code-example">Code: </label>
<textarea rows="10" cols="25" id="code-box"><a href="http://aremysitesup.com/aff/xxxxx"><img src="http://css-tricks.com/amsu/AMSU_Ad_125x125v2.png" alt="Are My Sites Up?" /></a></textarea>
<p class="note">Just copy and paste the above text into your website. Your affiliate code has already been included!</p>
</div>
</form>
<label>Example: </label>
<div class="example-area" id="graphic-example-area">
<a href="http://aremysitesup.com/aff/xxxxx"><img src="http://css-tricks.com/amsu/AMSU_Ad_125x125v2.png" alt="Are My Sites Up?" /></a>
</div>
<p class="note">Example graphic may be scaled down above, but won't be placed on your own page.</p>
</fieldset>
В CSS нет ничего супер важного\интересного. Тут используется очень простой и понятный код.
Code
* { margin: 0; padding: 0; }
Последняя строка в коде гарантирует, что баннер не будет выступать за края формы, если его размер больше формы. Он будет автоматически подстраиваться под размеры формы отображения.
jQuery JavaScript
Код ниже необходимо вставить в шапку документа:
Code
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(function() {
$("#type-size").change(function() {
var graphicFileName = $("#type-size option:selected").attr("rel");
var newCode = '<a href="http://aremysitesup.com/aff/xxxxx"><img src="http://css-tricks.com/amsu/' + graphicFileName + '" alt="Are My Sites Up?" /></a>';
$("#code-box").text(newCode);
$("#graphic-example-area").html(newCode);
});
});
</script>
Самое главное слово выше - "change". Это родная функция jQuery, которая начинает действовать, когда мы выбираем другой размер из выпадающего списка. Когда это происходит, мы можем узнать выбранный вариант с помощью селектора jQuery :selected. Мы проделываем это в первой строке функции change, и задаем переменную, используя атрибут rel (который содержит название необходимого файла).
Следующим шагом мы создаем новую строку, новый HTML код. Эта строка выполняет двойную роль. Мы вставим ее в качестве text в текстовое поле и заменим ею html области просмотра. У нас получится copy-and-paste (скопировал и вставил) код, который используется также ниже для показа нового баннера.
Данная форма будет работать только при включенном JavaScript. Если JavaScript отключен будет виден только баннер 125×125. При изменении размера ничего происходить не будет.
Но это не является большой проблемой, так как подавляющее большинство пользователей Интернета просматривают странички с включенным JavaScript.
