Html Question posted in
Some basic documentation can be found here.

Html – Function for onmouseenter to display an img in a div to work and go back to the message onmouseout

I’m a beginner here. I am stuck, and the code is not working. I have used a validator, which makes me more confused. I can’t get the div(message) image to change to different images upon hovering.

I nailed the other events but with the images and hovering effect, I can’t seem to get it. I keep getting the following errors for this code:

Line 1, Column 23: ‘function closure expressions’ is only available in
Mozilla JavaScript extensions (use the moz option). Line 5, Column 23:
‘function closure expressions’ is only available in Mozilla JavaScript
extensions (use moz option).

The image display it needs to return back to onmouseout.

function onmouseenter()
document.getElementById('img').innerHTML = "img"

function onmouseleave()
document.getElementById("image").innerHTML = "image"
<div id="image">
  Hover over an image below to display image.
</div>

<img class="preview" alt="Styling with a Bandana" img.id="img" ; src="https://west-2.amazonaw.jpg" onmouseenter="img()" onmouseleave="image()">
Tags:

3

Answers


  1. 0

    onmouseenter and onmouseleave are going to call your function when you do those actions. So you need to give them a function to call when those actions happen.

    <div id='container'>
  <img id="image" />
</div>

<img class="preview" alt="Styling with a Bandana" img.id="img" ; src="https://west-2.amazonaw.jpg" onmouseenter="changeImage('https://west-2.amazonaw.jpg')" onmouseleave="changeImage()">

    function changeImage(image){
    if (image){ //if giving it a source then set it
        document.getElementById("image").src = image;
        document.getElementById("image").display = block;
        document.getElementById("container").innerText = '';

    }

    else{ // else clear the image and reset the text
        document.getElementById("image").display = none;
        document.getElementById("container").innerText = 'Hover over an image below to display image.';

    }
}

    You can change the function to do whatever you want but it would be something like that.

    Login or Signup to reply.
  2. 0

    Here is a working snippet.

    I tried to leave the html as original as possible. There were two problems with it:

    1. The element had img.id="img", where it needs to be id="img"
    2. The src url string got corrupted, perhaps during your cut and paste.

    I added a .css file so that images would not shift around crazily as you hovered over them.

    The Javascript assigns an to the innerHTML when you hover over the preview image.

    // onmouseenter code 
function img( ) {
  let imgSrc = document.getElementById('img').src

  // Change the text to an <img>
  document.getElementById("image").innerHTML = `<img src=${imgSrc}>`
}

// onmouseleave code 
function image() {
  // Change the <img> back to the original text
  document.getElementById("image").innerHTML = "Hover over an image below to display image."
}
    .preview {
  width: 64px;
}

#image {
  /* Need to give this a height, so it does not change when we add the <img> to it */
  height: 128px;
}
#image img {
  /* Make the <img> fit the <div> container */
  height: 100%;
}
    <div id="image">
  Hover over an image below to display image.
</div>

<!-- img.id should be just id
     Also, I changed the image src, I think your image src string got corrupted at some point
 -->
<!-- <img class="preview" alt="Styling with a Bandana" id="img" src="https://west-2.amazonaw.jpg" onmouseenter="img()" onmouseleave="image()"> -->
<img class="preview" alt="Random image" id="img" src="https://picsum.photos/300/200" onmouseenter="img()" onmouseleave="image()">
    Login or Signup to reply.
  3. 0

    Function no {}, you need add {} in function, here is changed code:

    function onmouseenter(){
    document.getElementById('img').innerHTML = "img"
}

function onmouseleave(){
    document.getElementById("image").innerHTML = "image"
}

    In the other, the img is close tag, you can’t let a close tag set innerHTML attribute. Because it not exist.

    Even img’s id attribute not set, you set img.id is invalid.

    Sorry, I can’t understand the code’s mean. You should use setAttribute method to change a attribute.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search