Display image on hover with

Question

I am trying to display a different image over each word in a sentence, but right now it is showing one hover image over the entire paragraph.

Here is the data I want to output:

    var json = {
"image_location": {'Anyway': "D:\\images\\image1.png", 'if': "D:\\images\\image2.png", 'you': "D:\\images\\image3.png", "don't": "D:\\images\\image4.png", 'agree': "D:\\images\\image5.png"}

}

The code I have right now:

    case "image":
        var words = Object.keys(json.image_location);
        var spans = [];
        var paragraph = document.querySelector("#p2");
        for(var x = 0; x < words.length; x++) {

            var span = "<span style='background-color: red;'>" + Object.keys(json.image_location)[x] + "<span><a><img src=D:\\images\\image" + (x+1) + ".png></a>" + "</span></span>"
 
            spans.push(span);
        }

        paragraph.innerHTML = spans.join(" ");
        break;

.images {
  position: relative;
}

.images img {
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  left: 100px;
  top: -20px;
  z-index: 100;
  transition: opacity 0.5s, top 0.5s;
}

.images:hover img {
  opacity: 6;
  top: 20px;
}

<div class="images">
    <p id=p2><span>Anyway if you don't agree</span></p>
</div>

Maybe this is not the main cause of the problem, but you made a mistake in the html code - you did not wrap `id = p2` in quotes. `id = "p2"` — s.kuznetsov, Jul 21 '20 at 05:07
@Paulie_D it already is though. I colored each word red, then joined them using **paragraph.innerHTML = spans.join(" ");**. — Learning4ever, Jul 21 '20 at 05:40
may be you should have a look at this. https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object — sanoj lawrence, Jul 21 '20 at 08:07

Display image on hover with

0 Answers0