JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<div>
    <h1>пишем</h1>
    <p>
    Здесь много-много всякого текста. <span>Здесь много-много всякого текста. Здесь много-много всякого текста.</span> Здесь много-много всякого текста. Здесь много-много всякого текста. Здесь много-много всякого текста. <span>Здесь много-много всякого текста. Здесь много-много всякого текста.</span> Здесь много-много всякого текста. Здесь много-много всякого текста.
    </p>
    <img id="photoId1" src="https://pp.userapi.com/c635102/v635102026/22633/fOTyClyUbaw.jpg">
    <img id="photoId2" src="https://pp.userapi.com/c637723/v637723968/13121/JPy1SgsHFUU.jpg">
</div>

CSS

h1 {
  color: blue;
}
p {
  color: #fff;
  background-color: #555;
  padding: 10px;
  margin: 10px;
  text-align: justify;
}
img {
  position: absolute;
  width: 200px;
  cursor: pointer;
}

JavaScript

var photo = document.getElementById('photoId1');
var flag = 0;
document.onmousemove = function(event) {
	photo.style.left = event.clientX - 99 + 'px';
  photo.style.top = event.clientY - 99 + 'px';
}
photo.onclick = function() {
	if (flag) {
  	flag = 0;
    photo.style.width = '200px';
  } else {
  	flag = 1;
    photo.style.width = '100px';
  }
}
var photo2 = document.getElementById('photoId2');
var flag = 0;
photo2.onclick = function() {
	if (flag) {
  	flag = 0;
    photo2.style.width = '200px';
  } else {
  	flag = 1;
    photo2.style.width = '100px';
  }
}