/////////
//////////////
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться22020-08-21 11:04:18
Код:
<!--HTML--> <div id="main-img"> <div class="coca-cola"></div><div class="hot-dog"></div><div class="pop-corn"></div><div class="aircraft"></div><div class="lily"></div> <div class = "status"></div> </div> <style> #main-img { background-image: url(https://i.imgur.com/Or7xiyo.jpg); width: 750px; height: 500px; background-size: 100%; position: relative; } .coca-cola { background-image: url(https://i.imgur.com/16FTjBQ.png); width: 100px; height: 100px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 260px; left: 240px; } .hot-dog { background-image: url(https://i.imgur.com/GZZvx58.png); width: 50px; height: 50px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 340px; left: 420px; } .pop-corn { background-image: url(https://i.imgur.com/PbEvavf.png); width: 30px; height: 40px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 270px; left: 60px; } .aircraft { background-image: url(https://i.imgur.com/xOTxRJU.png); width: 60px; height: 40px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 10px; left: 270px; } .lily { background-image: url(https://i.imgur.com/f8SXJZQ.png); width: 40px; height: 40px; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 400px; left: 270px; } .status { font-size: 50px; } </style> <script> $('.coca-cola').click(function(){ $('.coca-cola').hide('slow', function() { }); }); $('.hot-dog').click(function(){ $('.hot-dog').hide('slow', function() { }); }); $('.pop-corn').click(function(){ $('.pop-corn').hide('slow', function() { }); }); $('.aircraft').click(function(){ $('.aircraft').hide('slow', function() { }); }); $('.lily').click(function(){ $('.lily').hide('slow', function() { }); }); $(".status").text("Элементы появились"); </script>
Страница: 1