I have included what I believe are the crucial aspects in the fiddle. Currently, all my files are stored in a single directory. The CSS assigns a background image to the #slides div using a relative path. Then, with the help of JavaScript and an array, I intend to change the background image. However, the script only functions if I input an absolute path for the image.
The fiddle does not showcase the images visually, but the structure is intact. Ordinarily, I possess a function that increments 'i' and exhibits the corresponding image; however, for troubleshooting purposes, I chose not to include it here.
The rationale behind utilizing relative paths is my potential need to duplicate the entire folder or access it from a USB drive on a PC lacking internet connectivity.
In the developer console, setting 'i = 1' and executing the function results in a blank background when relative paths are used. Conversely, with absolute paths set and following the same steps, the correct picture displays based on the value of 'i'.
Any assistance is greatly appreciated!
http://jsfiddle.net/xvs8ogjg/4/
HTML
<div id="slides"></div>
CSS
/* Although I utilize % based sizes in the actual version, everything else remains consistent. */
#slides {
width: 200px;
height: 200px;
margin: 0;
/* This CSS correctly displays the initial image upon page load */
background-image: url("test1.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
JS
// Array with images. Images, CSS, and JS are all housed within the slideshow directory for now.
var slides = document.getElementById('slides');
// Does not function
var images = new Array (
"test1.svg",
"test2.svg"
);
// Also ineffective - I attempted a workaround, unfortunately without success
var images = new Array (
"../slideshow/test1.svg",
"../slideshow/test2.svg"
);
// Operational
var images = new Array (
"http://example.com/directory/slideshow/test1.svg",
"http://example.com/directory/slideshow/test2.svg"
);
// Similarly functional, locally
var images = new Array (
"file:///C:/Users/myname/directory/slideshow/test1.svg",
"file:///C:/Users/myname/directory/slideshow/test2.svg"
);
var i = 0;
var change = function() {
slides.style.backgroundImage = 'url("' + images[i] + '")';
};