НОУ ИНТУИТ | Разработка гибридных приложений для мобильных устройств под Windows Phone. Лекция 6: Использование возможностей DOM в мобильных разработках

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00

Темы: Программирование, Мобильные технологии

Специальности: Программист

|

Вам нравится? Нравится 13 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Создайте в папке www третью страницу Dom.html, демонстрирующую возможности модели DOM для манипулирования рисунками и надписями страницы.

Код страницы (пояснения содержатся в лекции 8):

<!DOCTYPE HTML>
<html lang = "ru">
<head>
<script type="text/javascript">
    var flag = true;
    function swapImage() {
        var image_Object1 = document.getElementById("Dog");
        var image_Object2 = document.getElementById("Boy");
        if (flag == true) {
            flag = false;
            Boy.src = "img/Dog.jpg";
            Dog.src = "img/boy.jpg";
            document.getElementById("Caption_Dog").innerHTML = "Мальчик ВИТЯ";
            document.getElementById("Caption_Boy").innerHTML = "БОБИК";

        }
        else {
            flag = true;
            Dog.src = "img/Dog.jpg";
            Boy.src = "img/boy.jpg";
            document.getElementById("Caption_Dog").innerHTML = "ЖУЧКА";
            document.getElementById("Caption_Boy").innerHTML = "Мальчик ПЕТЯ";
        }
    }

</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type ="text/css">
 body,a {
     font-size:50px
 }
</style>
<title>Обмен изображений</title>
</head>
<body>
<figure >
<img id ="Dog" src="img/Dog.jpg" width="500" height="550"> 
<figcaption id ="Caption_Dog">Изображение 1</figcaption>
</figure>
    <figure >
<img id ="Boy" src="img/boy.jpg" width="500" height="550"> 
<figcaption  id ="Caption_Boy">Изображение 2</figcaption>
</figure>
      <p><a href="#" onClick = "swapImage()">Поменять местами</a></p>
</body>
</html>

Изображения, указанные в разметке, должны быть размещены в папке img: