JavaScript change background color
What you will learn here about JavaScript:
- JavaScript change background color on button click
- JavaScript change background color on mouseover
- JavaScript change background color dynamically
- JavaScript change background image on click
- JavaScript change background image of div
- JavaScript change background image on hover
JavaScript change background color on button click
<button onclick="changeColor()">Click me</button>
<script>
function changeColor()
{
document.getElementById("result").style.background="green";
}
</script>
<script>
function changeColor()
{
document.getElementById("result").style.background="green";
}
</script>
JavaScript change background color on mouseover
<div id="result" style="width:100%;height:45px;background-color:pink;" onmouseover="changeColor();"></div>
<script>
function changeColor()
{
document.getElementById("result").style.background="green";
}
</script>
<script>
function changeColor()
{
document.getElementById("result").style.background="green";
}
</script>
JavaScript change background color dynamically
<button onclick="changeColor()">Click me</button>
<script>
function changeColor()
{
var R=Math.floor(Math.random() * 255);
var G=Math.floor(Math.random() * 255);
var B=Math.floor(Math.random() * 255);
document.getElementById("result").style.background="rgb("+R+","+G+","+B+")";
}
</script>
<script>
function changeColor()
{
var R=Math.floor(Math.random() * 255);
var G=Math.floor(Math.random() * 255);
var B=Math.floor(Math.random() * 255);
document.getElementById("result").style.background="rgb("+R+","+G+","+B+")";
}
</script>
JavaScript change background image on click
<img id="sample" src="https://bytesofgigabytes.com/IMAGES/css/background/src1.jpg" width="450px" height="275px">
<script>
function changeImage()
{
document.getElementById('sample').src="https://bytesofgigabytes.com/IMAGES/css/background/src2.jpg"
}
</script>
<script>
function changeImage()
{
document.getElementById('sample').src="https://bytesofgigabytes.com/IMAGES/css/background/src2.jpg"
}
</script>
JavaScript change background image of div
<button onclick="changeImage()">Click me</button>
<script>
function changeImage()
{
document.getElementById('sample').src="https://bytesofgigabytes.com/IMAGES/css/background/src2.jpg"
}
</script>
<script>
function changeImage()
{
document.getElementById('sample').src="https://bytesofgigabytes.com/IMAGES/css/background/src2.jpg"
}
</script>
JavaScript change background image on hover
<div style="width:475px;height:275px;" onmouseover="changeImage()"><img id="sample" src="src1.JPG" style="width:100%; height:100%;"> </div>
<script>
function changeImage()
{
document.getElementById('sample').src="https://bytesofgigabytes.com/IMAGES/css/background/src2.jpg"
}
</script>
<script>
function changeImage()
{
document.getElementById('sample').src="https://bytesofgigabytes.com/IMAGES/css/background/src2.jpg"
}
</script>
