Within my Rails application, I have a collection of content paired with image buttons (each piece of content has an associated image). When a user clicks on one of these buttons, my goal is to display the corresponding image.
All of my images are stored under assets/images/preview/id1.png in the project. In my JavaScript code, upon clicking the view-content button, I aim to change the background image to show the relevant image based on the ID assigned to that button. How can this be achieved?
How do I set the image URL for the background image:
_page2.html.erb
<div class="content">
<table>
<tr>
<td> Content related to the image </td>
<td> <div id="<%= content[:lable].delete(' ')%>" class="view"> VIEW-IMAGE </div></td>
</tr>
<tr>
<td> Content related to the image </td>
<td><div id= "<%= content[:lable].delete('')%>" class="view">VIEW-IMAGE</div></td>
</tr>
</table>
content/preview.js
$('.view').click(function (event){
var image = $(this).id
$(this).css("background", "url(image.jpg) no-repeat");
});
});
Link to Jsfiddle: http://jsfiddle.net/bkrx2rxz/1/
In content/preview.js
$('.view').click(function (event){
$(this).css("background", "url(sample.png) no-repeat");
});
I attempted to use the aforementioned code. However, it seems like the image is not loading because it searches for images in content/sample.png instead of assets/images/sample.png.