<div id="dalee1Webo4kaRu">  
<div class="podckazkaKpoluWebo4kaRu"><center>Адрес вашего сайта</center></div>  
<br>  
<input type="text" id="ccilkaWebo4kaRu" class="poleVvodaWebo4kaRu" value="">  
<br><br>  
<div style="float:right;"><z style="color:#666; margin-right:8px;">Шаг 1 из 5</z><a href="javascript://" onclick="ccilkaWebo4kaRu();" class="knopkaWebo4kaRu">Далее</a></div>  
<br><br><br>  
</div>  

<div id="dalee2Webo4kaRu" style="display:none;">  
<div class="podckazkaKpoluWebo4kaRu"><center>Адрес картинки баннера</center></div>  
<br>  
<input type="text" id="imgWebo4kaRu" class="poleVvodaWebo4kaRu" value="">  
<br><br>  
<div style="float:right;"><z style="color:#666; margin-right:8px;">Шаг 2 из 5</z><a href="javascript://" onclick="imgWebo4kaRu();" class="knopkaWebo4kaRu">Далее</a></div>  
<br><br><br>  
</div>  

<div id="dalee3Webo4kaRu" style="display:none;">  
<div class="podckazkaKpoluWebo4kaRu"><center>Надпись при наведении (Тег TITLE)</center></div>  
<br>  
<input type="text" id="titleWebo4kaRu" class="poleVvodaWebo4kaRu" value="">  
<br><br>  
<div style="float:right;"><z style="color:#666; margin-right:8px;">Шаг 3 из 5</z><a href="javascript://" onclick="titleWebo4kaRu();" class="knopkaWebo4kaRu">Далее</a></div>  
<br><br><br>  
</div>  

<div id="dalee4Webo4kaRu" style="display:none;">  
<div class="podckazkaKpoluWebo4kaRu"><center>Ширина баннера</center></div>  
<br>  
<input type="text" id="widthWebo4kaRu" class="poleVvodaWebo4kaRu" value="">  
<br><br>  
<div style="float:right;"><z style="color:#666; margin-right:8px;">Шаг 4 из 5</z><a href="javascript://" onclick="widthWebo4kaRu();" class="knopkaWebo4kaRu">Далее</a></div>  
<br><br><br>  
</div>  

<div id="dalee5Webo4kaRu" style="display:none;">  
<div class="podckazkaKpoluWebo4kaRu"><center>Высота баннера</center></div>  
<br>  
<input type="text" id="heightWebo4kaRu" class="poleVvodaWebo4kaRu" value="">  
<br><br>  
<div style="float:right;"><z style="color:#666; margin-right:8px;">Шаг 5 из 5</z><a href="javascript://" onclick="vivodKodaWebo4kaRu();" class="knopkaWebo4kaRu">Далее</a></div>  
<br><br><br>  
</div>  
<div id="vivodKodaWebo4kaRu" style="display:none;"></div>  

<script>  
// Нарисовал REMINDS  
// Реализовал Вовчик  
// источник: http://webo4ka.ru/  
function ccilkaWebo4kaRu() {if ($('#ccilkaWebo4kaRu').val() == '') {$('#ccilkaWebo4kaRu').animate({backgroundColor:'#ffcccc'}, 500); setTimeout(function () {$('#ccilkaWebo4kaRu').animate({backgroundColor:'#fff'}, 500)} );} else {$('#dalee1Webo4kaRu').hide(); $('#dalee2Webo4kaRu').show();}}  
function imgWebo4kaRu() {if ($('#imgWebo4kaRu').val() == '') {$('#imgWebo4kaRu').animate({backgroundColor:'#ffcccc'}, 500); setTimeout(function () {$('#imgWebo4kaRu').animate({backgroundColor:'#fff'}, 500)} );} else {$('#dalee2Webo4kaRu').hide(); $('#dalee3Webo4kaRu').show();}}  
function titleWebo4kaRu() {if ($('#titleWebo4kaRu').val() == '') {$('#titleWebo4kaRu').animate({backgroundColor:'#ffcccc'}, 500); setTimeout(function () {$('#titleWebo4kaRu').animate({backgroundColor:'#fff'}, 500)} );} else {$('#dalee3Webo4kaRu').hide(); $('#dalee4Webo4kaRu').show();}}  
function widthWebo4kaRu() {if ($('#widthWebo4kaRu').val() == '') {$('#widthWebo4kaRu').animate({backgroundColor:'#ffcccc'}, 500); setTimeout(function () {$('#widthWebo4kaRu').animate({backgroundColor:'#fff'}, 500)} );} else {$('#dalee4Webo4kaRu').hide(); $('#dalee5Webo4kaRu').show();}}  
function vivodKodaWebo4kaRu(){if ($('#heightWebo4kaRu').val() == '') {$('#heightWebo4kaRu').animate({backgroundColor:'#ffcccc'}, 500); setTimeout(function () {$('#heightWebo4kaRu').animate({backgroundColor:'#fff'}, 500)} );} else {$('#dalee5Webo4kaRu').hide(); var ccilkaWebo4kaRu = $('#ccilkaWebo4kaRu').val(); var imgWebo4kaRu = $('#imgWebo4kaRu').val(); var titleWebo4kaRu = $('#titleWebo4kaRu').val(); var widthWebo4kaRu = $('#widthWebo4kaRu').val(); var heightWebo4kaRu = $('#heightWebo4kaRu').val(); $('#vivodKodaWebo4kaRu').show(); $('#vivodKodaWebo4kaRu').html('<div class="podckazkaKpoluWebo4kaRu"><center>Ваш код</center></div><br><textarea class="poleVvodaWebo4kaRu" style="min-height:100px;" onclick="this.select();" readonly="readonly"><a href="'+ccilkaWebo4kaRu+'" title="'+titleWebo4kaRu+'"><img src="'+imgWebo4kaRu+'" style="width:'+widthWebo4kaRu+'px; height:'+heightWebo4kaRu+';"></a></textarea><br><br><br><div style="float:right;"><a href="javascript://" onclick="vvestiZanovoWebo4kaRu();" class="knopkaWebo4kaRu">Ввести заново</a></div><br><br><br>')}}  
function vvestiZanovoWebo4kaRu() {$('#vivodKodaWebo4kaRu').hide(); $('#dalee1Webo4kaRu').show(); $('#ccilkaWebo4kaRu').val(''); $('#imgWebo4kaRu').val(''); $('#titleWebo4kaRu').val(''); $('#widthWebo4kaRu').val(''); $('#heightWebo4kaRu').val('');}  
</script><script src="http://webo4ka.ru/webo4kaRu/js/jquery.color.js"></script>  
<style>  
.knopkaWebo4kaRu {background: #cd55e3 url('http://webo4ka.ru/webo4kaRu/.s/t/815/bodyWebo4kaRu.png'); border: 1px solid transparent; border-radius: 3px; padding: 3px 12px; color: #fff !important; font: bold 16px arial; text-decoration: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25);}  
.knopkaWebo4kaRu:hover {background: #ab48d5 url('http://webo4ka.ru/webo4kaRu/.s/t/815/bodyWebo4kaRu.png');}  
.podckazkaKpoluWebo4kaRu {background: #cd55e3 url('http://webo4ka.ru/webo4kaRu/.s/t/815/bodyWebo4kaRu.png'); border: 1px solid transparent; border-radius: 3px; padding: 8px 12px; color: #fff !important; font: bold 16px arial; text-decoration: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25);}  
.poleVvodaWebo4kaRu {width:100%; background: #fff; border: 1px solid #ccc; box-shadow: inset 0px 2px 5px #e5e5e5; box-sizing: border-box; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 6px; text-shadow: 0px 1px 0px #fff; color:#ccc;}  
</style>