<!-- html -->
<img src="main.png" id="mainImg">
<img src="" data-src="notmain1.png" class="notmain">
<img src="" data-src="notmain2.png" class="notmain">
<img src="" data-src="notmain3.png" class="notmain">/*** javascript ***/
$("#mainImg").load(function() {
$(".notmain").attr('src', function() {
return $(this).attr("data-src");
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.message {
margin: 50px;
padding: 50px;
border: 3px double #333;
background: #eee;
text-align: center;
color: #333
}
</style>
<script language="javascript">
setTimeout(function() {
document.getElementById('message').remove();
}, 5000);
</script>
</head>
<body>
<h3 id='message' class='message'>
Ваше письмо успешно отправлено!
</h3>
</body>
</html><head></head>)<script language ="javascript">
setTimeout(function() {
$('#message).hide();
}, 5000);
</script><body></body>)<div id="message">YOU MESSAGE HERE</div>
<a id='test' href="#">Добавить товар</a>$('#test').html('Добавить +1 товар');
<div class="product-list">
<div class="product-list__item">
<a class="product-list__item-thumb" href="http://rostov-na-donu.lobzikov.com/tovar/okno-9524">
<span>Окно</span>
<img src="http://placehold.it/200x200" alt="img" />
</a>
<div class="product-list__body">
<div class="product-list__body-title">
</div>
<p class="product-list__body-desc">Донская Оконная Компания</p>
<p class="product-list__body-price">
Розничная:
<span class="product-list__body-price-retail">
4000 руб.
</span>
<span>/ шт.</span>
</p>
<p class="product-list__body-price">
Оптовая:
<span class="product-list__body-price-trade">
3300
</span>
<span>/ шт.</span>
</p>
<span class="red">На товар есть скидка <img src="inner33_files/disc.png"></span><br>
<p class="product-list__body-region">
Регион деятельности: <a href="http://ros.lobzikov.com/tovar/cat10-ventilyaciya-otoplenie-kondicionirovanie" style="color: #1D6700;">Ростовская область</a> → <a href="http://rostov-na-donu.lobzikov.com/tovar/cat10-ventilyaciya-otoplenie-kondicionirovanie" style="color: #288E00;">Ростов-на-Дону</a>
</p>
<div class="clear_both"></div>
</div>
</div>.product-list__item-thumb {
display: block;
width:250px;
height:250px;
margin-right:14px;
overflow:hidden;
float:left;
border: 1px solid red;
text-align: center;
}
.product-list__item-thumb > span {
display: block;
margin: 10px 0;
}
.product-list__body-title { margin:0 0 8px 0; }
.product-list__body-title-link { font:normal 18px Tahoma; text-decoration:none; color:#0068c9; }
.product-list__body-title-link:hover {text-decoration:underline;}
.product-list__body-desc { margin:0 0 10px 0; font:normal 12px Tahoma; color:#303030; }
.product-list__body-price { margin:0 0 10px 0; font:normal 14px Tahoma; }
.product-list__body-price span { color:#303030; }
.product-list__body-price .product-list__body-price-retail { font-weight:bold; color:#ccab02; }
.product-list__body-price .product-list__body-price-trade { font-weight:bold; color:#0084ff; }
.product-list__body-region { margin:0; color:#909090; }<div class="wrap">
<ul>
<li>Rainbow</li>
<li>Television</li>
<li>Interpol</li>
<li>The Shins</li>
<li>Whitesnake</li>
<li>The Killers</li>
<li>16 Horsepower</li>
</ul>
</div>.wrap {
width: 300px;
overflow: hidden;
}
.wrap ul {
margin: 0 0 0 -25px;
padding: 0;
}
.wrap ul > li {
margin-left: 25px;
white-space: nowrap;
float: left;
}