Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <script>
- document.addEventListener('DOMContentLoaded', () => {
- let items = document.querySelectorAll('a');
- items.forEach(link => {
- link.addEventListener('click', (e) => {
- let locale = document.querySelectorAll('[data-locale]');
- if(e.target.innerText != locale[0].dataset.locale){
- let continents = document.querySelectorAll('li');
- continents.forEach(c => {
- let temp = c.dataset.translate;
- c.dataset.translate = c.innerText;
- c.innerText = temp;
- });
- locale[0].dataset.locale = e.target.innerText;
- }
- });
- });
- // втора задача от упр 2.
- let imgs = document.querySelectorAll('img');
- imgs.forEach(i => {
- i.addEventListener('mouseenter', (e) => {
- let temp = i.src;
- i.src = i.dataset.hover;
- i.dataset.hover = temp;
- });
- i.addEventListener('mouseleave', (e) => {
- let temp = i.src;
- i.src = i.dataset.hover;
- i.dataset.hover = temp;
- });
- });
- });
- </script>
- </head>
- <body>
- <strong data-locale="en"> change language </strong>
- <a href="#">en</a>
- <a href="#">bg</a>
- <form action="">
- <ul>
- <li data-translate="Европа">Europe</li>
- <li data-translate="Азия">Asia</li>
- <li data-translate="Африка">Africa</li>
- </ul>
- </form>
- <img src="http://placehold.it/500x500" alt="" data-hover="http://static.boredpanda.com/blog/wp-content/uploads/2016/11/07_catcal_Gebhart_de_Koekkoek-5831bfb3319c6__880.jpg">
- <img src="http://placehold.it/500x500" alt="" data-hover="http://static.boredpanda.com/blog/wp-content/uploads/2016/11/03_catcal_Gebhart_de_Koekkoek-5831c041a2605__880.jpg">
- <img src="http://placehold.it/500x500" alt="" data-hover="http://static.boredpanda.com/blog/wp-content/uploads/2016/11/01_catcal_Gebhart_de_Koekkoek-5831c09247b3b__880.jpg">
- </body>
- </html>
Add Comment
Please, Sign In to add comment