La imagen y el texto se pueden cambiar usando funciones de JavaScript y luego llamando a las funciones haciendo clic en un botón. Lo haremos en 3 secciones. En la primera sección crearemos la estructura usando solo HTML , en la segunda sección diseñaremos mínimamente para que sea atractivo usando CSS simple y en la tercera sección agregaremos el código JavaScript a realizar la tarea
- Código HTML: en esta sección creamos la estructura y agregaremos el enlace cdn de Bootstrap para el diseño del botón y las fuentes.
HTML
<!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= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> </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>
- Código CSS: en esta sección usaremos algunos estilos básicos de CSS para que se vea lo más normal posible.
CSS
<style>
img{
height: 500px;
width: 450px;
}
h1{
color: darkgreen;
margin-top: 20px;
font-family: Comic Sans MS, cursive, sans-serif;
}
.button{
margin-left: 45%;
}
</style>
- Código Javascript: en esta sección, definiremos las funciones de JavaScript y hemos tomado dos imágenes, que están presentes en una carpeta «img» separada.
Javascript
<script>
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";
}
</script>
Código Completo: Es la combinación de los códigos anteriores de HTMl, CSS y JavaScript.
html
<!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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
img{
height: 500px;
width: 450px;
}
h1{
color: darkgreen;
margin-top: 20px;
font-family: Comic Sans MS, cursive, sans-serif;
}
.button{
margin-left: 45%;
}
</style>
<script>
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";
}
</script>
</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>
Producción:
HTML y CSS son la base de las páginas web. HTML se usa para el desarrollo de páginas web al estructurar sitios web, aplicaciones web y CSS se usa para diseñar sitios web y aplicaciones web. JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede obtener más información sobre HTML y CSS en los enlaces que figuran a continuación:
- Tutorial de HTML y ejemplos de HTML.
- Tutorial de CSS y ejemplos de CSS .
- Tutorial de JavaScript y ejemplos de JavaScript.
Publicación traducida automáticamente
Artículo escrito por nehaahlawat y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA