Здесь есть несколько проблем: 1. Разместите фоновое изображение. 2. Сделайте его кликабельным и увеличьте счетчик. 3. Сохраните и восстановите счетчик для всех посетителей.
- Код
<img src=""> разместит изображение, используя HTML. Это чаще всего используется для размещения меньшего изображения в текстовом блоке. Вместо этого, похоже, вы хотите, чтобы весь фон вашего сайта был таким изображением. Попробуйте вместо этого:
body{
background-color: #fffaee;
background-image: url("images/bird.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
Вы также можете сделать все это в одну строку:
body{
background: #ffaee url("images/bird.png") no-repeat 100% 100%;
}
Если вы хотите, чтобы он был кликабельным, используйте вместо него теги
<button></button>. Вы будете использовать javascript, чтобы обнаружить щелчок и увеличить счетчик. Для этого используем ваниль javascript:
HTML:
...
<body>
<button id="birdcounter" onclick="increment()">
<span id="counter" value=0>
</span>
</button>
</body>
CSS
#birdcounter{
width: 200px;
height: 200px;
background-color: #fffaee;
background-image: url("images/bird.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
Javascript
function increment(){
var counterElement = document.getElementById("counter");
var oldValue = counterElement.value;
var newValue = oldValue + 1;
counterElement.value = newValue;
counterElement.innerHTML = newValue;
}
Примечание. Этот пример является подробным, чтобы понять, что происходит. Это может быть упрощено несколькими способами.
Теперь нам нужно где-то сохранить текущее значение, чтобы будущие посетители могли знать, сколько раз была нажата кнопка. Для этого нам нужна база данных и какой-то способ получения данных в базу данных и из нее.
Вариантов много, но все они выходят за рамки этого ответа. Чтобы узнать это, вы, вероятно, захотите провести исследование AJAX (метод javascript) и, возможно, MySQL. Вам может быть полезен препроцессор HTML, такой как PHP. Вы также можете попробовать Javascript фреймворк, такой как Vue.