The image and text can be changed by using JavaScript functions and then calling the functions by clicking a button. We will do that into 3 sections., in the first section we will create the structure by using only HTML in the second section we will design minimally to make it attractive by using simple CSS and in the third section we will add the JavaScript code to perform the task
Approach
- HTML Code: In this section, we create the structure plus we will add Bootstrap CDN link for the button design and the fonts.
- CSS Code: In this section, we will use some basic CSS styling to make it look as normal as possible.
-
In JavaScript:
-
before()changes image source to “img/photo1.jpg”. -
before()updates message to “Hii! GeeksforGeeks people”. -
afterr()changes image source to “img/photo2.jpg”. -
afterr()updates message to “Bye! GeeksforGeeks people”. -
Both functions are used
document.getElementByIdfor element selection. -
They modify the
srcattribute for the image element and theinnerHTMLproperty for the message element. -
The code assumes the existence of HTML elements with IDs
'myImage'and'message'.
-
Example: This example shows the implementation of the above-explained approach.
function before(){
document.getElementById('myImage')
.src="img/photo1.jpg";
document.getElementById('message')
.innerHTML="Hii! GeeksforGeeks people";
} function afterr(){
document.getElementById('myImage')
.src="img/photo2.jpg";
document.getElementById('message')
.innerHTML="Bye! GeeksforGeeks people";
} |
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h1 id="message">
Hii! GeeksforGeeks people
</h1>
<img id="myImage" src="img/photo1.jpg">
</div>
<div class="col-md-3"></div>
</div>
</div>
<div class="button">
<button class="btn btn-warning" onclick=before();>
Before
</button>
<button class="btn btn-success" onclick=afterr();>
Afterr
</button>
</div>
</body>
</html>
|
img{ height: 500px;
width: 450px;
}h1{
color: darkgreen;
margin-top: 20px;
font-family: Comic Sans MS, cursive, sans-serif;
}.button{ margin-left: 45%;
} |
Output:
HTML and CSS both are foundation of webpages. HTML is used for webpage development by structuring websites, web apps and CSS used for styling websites and webapps. JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn more about HTML and CSS from the links given below:
- HTML Tutorial and HTML Examples.
- CSS Tutorial and CSS Examples.
- JavaScript Tutorial and JavaScript Examples.