I have been attempting to create a functionality where an image enlarges itself upon a user click and reverts back to its original size when the cursor is moved away. However, I am facing difficulties as the image is not responding, it's a large 800 pixel image.
behaviour.js:
document.addEventListener("DOMContentLoaded", function(event) {
alert('Hello!');
});
document.getElementById("smart_thumbnail");
var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function() {
alert('I saw you click');
});
var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.className ="small";
if (thumbnailElement.className == "") {
// write here the code that will execute if the image is big
}
index.html:
<p>An 800 pixel image</p>
<img id="smart_thumbnail" src="http://calmground.com/wp-content/galler\
y/our-calm-ground/calm.jpg" class="small" >
@kinglish,
I understand that img.small is a CSS code, though I haven't copied your specific code, but I have followed the instructions. It seems that something is not working correctly in my file as the functionality is not running as expected.
Index.html:
<p>An 800 pixel image</p>
<img id='smart_thumbnail' src='http://download.baps.org/wallpapers/14.bmp' class='small' >
behavior.js: I made some modifications
*document.addEventListener("DOMContentLoaded", function(event) {
// alert('Hello!');
});
document.getElementById("smart_thumbnail");
var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function({
var theElement = event.target;
// to toggle class names
if (theElement.classList.contains('small')) {
theElement.classList.remove('small');
theElement.classList.add('large');
}else {
theElement.classList.remove('large');
theElement.classList.add('small');
}
});
styles.css:
img.small {
width: 50px;
}
img.large {
width: 200px;
}