Gabriel Amaizu Gabriel Amaizu - 1 year ago 64
Javascript Question

I am trying to write js code to display an image in a div using onmouseover event

function display(displayPic) {
var image = document.getElementById("image");
image.innerHTML = displayPic.alt; = "url(displayPic.src)";

/*Name this external file gallery.css*/

body {
margin: 2%;
border: 1px solid black;
background-color: #b3b3b3;
#image {
line-height: 650px;
width: 575px;
height: 650px;
border: 5px solid black;
margin: 0 auto;
background-color: #8e68ff;
background-image: url('');
background-repeat: no-repeat;
color: #FFFFFF;
text-align: center;
background-size: 100%;
margin-bottom: 25px;
font-size: 150%;
.preview {
width: 10%;
margin-left: 17%;
border: 10px solid black;
img {
width: 95%;

<div id="image">
Hover over an image below to display here.

<img class="preview" alt="Styling with a Bandana" src="" onmouseover="display(this)">

<img class="preview" alt="With My Boy" src="" onmouseover="display(this)">

<img class="preview" src="" alt="Young Puppy" onmouseover="display(this)">

The backgroundImage property is not working when you mouseover the image, though the displayPic.alt works fine.

the code is meant to display on the image div, the currently hovered image

Answer Source

Try storing the URL in a variable beforehand:

function display(displayPic) {
  var image = document.getElementById("image");
  var urlString = 'url(' + displayPic.src + ')';
  image.innerHTML = displayPic.alt; = urlString;

Working Example: JS Fiddle