Actualmente estoy tratando de hacer que una imagen reemplace a otra en una posición fija mientras también cambio el estilo de color del texto al mismo tiempo. La imagen y el texto deben cambiar cuando el usuario pasa el cursor sobre uno u otro. Tengo la imagen y el texto en un div e intenté usar un detector de eventos para cambiar los objetos.
HTML:
<div id="dequestimg"> <p style="font-size: 75%; float: left; font-weight: bold">Delete Requests:</p> <img src="dequestbutton.png"/> </div>JavaScript:
document.addeventlistener("mouseover", mouseover); document.addeventlistener("mouseout", mouseout); function mouseover() { document.getelementbyid("dequestimg").style.color = "red"; document.getelementbyid("dequestimg").getelementsbytagname("img") = "dequestbuttonhover.png"; } function mouseout() {kossa document.getelementbyid("dequestimg").style.color = "black"; document.getelementbyid("dequestimg").getelementsbytagname("img") = "dequestbutton.png"; }Soy nuevo en JavaScript, por lo que agradecería cualquier ayuda.
Muchos puntos aquí
kossagetElementById , getElementsByTagNamedivimg para que pueda seleccionarlo por separadosrc de la imagen una vez que se selecciona, no puede simplemente asignarla como una cadenaAquí hay un ejemplo de trabajo
índice HTML.html
<!DOCTYPE html> <html> <body> <div id="dequestimg"> <p style="font-size: 75%; float: left; font-weight: bold"> Delete Requests: </p> <img id="image" src="dequestbutton.png" /> </div> <script src="index.js"></script> </body> </html>JavaScript index.js
const div = document.getElementById("dequestimg"); const img = document.getElementById("image"); document.addEventListener("mouseover", mouseover); document.addEventListener("mouseout", mouseout); function mouseover() { div.style.color = "red"; img.src = "dequestbuttonhover.png"; } function mouseout() { div.style.color = "black"; img.src = "dequestbutton.png"; }