skip to Main Content

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()">

3

Answers


  1. 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. 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. 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