dimanche 3 juillet 2016

Trying to change the background image of an element in javacript

So I'm having some issues with creating a really simple function that's supposed to change the background image of a div element to match whatever image is being hovered upon by the mouse.

The HTML looks like

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

<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">

That's just the div element I want to change, alongside one of the images. So our function is supposed to take in an image element as a parameter. But I'm having a lot of trouble accessing this image parameter's src attribute and using that in the .style.backgroundImage property.

My current code is:

function upDate(previewPic){
    var div_element = document.getElementById('image').innerHTML;
    var picurl = "url(previewPic.getAttribute('src'))"
    div_element.style.backgroundImage = "url(picurl)";
 }

And this gets me an error of "Uncaught TypeError: Cannot set property 'backgroundImage' of undefined" on my browser console. If you can tell, I'm trying to put the actual div object into a variable, then put the picture url into a variable. Then I want to use the .style.backgroundImage property. This isn't working. But the solution is probably really simple. What could I do to fix it?

Aucun commentaire:

Enregistrer un commentaire