Код: Выделить всё
<!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=UTF-8" />
<title>Banner Code Displayer</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { background: #eee; font: 12px Georgia, Serif; color: #2d2d2d; }
#page-wrap { width: 600px; margin: 20px auto; }
a img { border: 0; }
h3 { font-size: 24px; font-weight: normal; margin: 0 0 25px 0; }
fieldset { border: 1px solid #666; padding: 15px; }
legend { border: 1px solid #666; text-transform: uppercase; padding: 2px 6px; }
.code-selector div { clear: both; margin: 0 0 25px 0; }
label { font-size: 14px; display: block; width: 120px; float: left; text-align: right; padding: 2px 6px; }
.code-selector select { border: 1px solid #666; padding: 2px 2px 2px 6px; }
.code-selector option { padding: 0 12px; }
.code-selector textarea { border: 1px solid #7d7858; padding: 10px; width: 375px; height: 80px; }
.note { font-size: 11px; width: 300px; margin: 0 0 0 130px; color: #666; }
.example-area { margin-left: 130px; width: 375px; text-align: center; border: 1px solid #7d7858; padding: 10px; }
.example-area img { max-width: 100%; }
</style>
<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>
</head>
<body>
<div id="page-wrap">
<h3>Форма показа кодов баннера</h3>
<fieldset>
<legend>Выбирайте</legend>
<form action="#" class="code-selector">
<div>
<label for="type-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">РљРѕРґ: </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">Просто скопируйте код выше и вставьте в свою страничку</p>
</div>
</form>
<label>Пример: </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">Пример баннера</p>
</fieldset>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-68528-29");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>
Код: Выделить всё
'[url=http://aremysitesup.com/aff/xxxxx][img]http://aremysitesup.com/aff/' + graphicFileName + '[/img][/url]';
Код: Выделить всё
var newCode = '<a href="http://aremysitesup.com/aff/xxxxx"><img src="http://css-tricks.com/amsu/' + graphicFileName + '" alt="Are My Sites Up?" /></a>';