Okay, I am going to rewrite this...
I am currently working on a project that consists of two layers. The top layer involves HTML5 animations such as rollovers and slides, while the bottom layer features kaleidoscope animation using images and CSS.
The issue I am facing is that while the bottom layer displays correctly, the top layer does not. The client has specifically requested the use of relative pathways and a strict directory structure with folders named Pages, Documents, and PlusImages.
Pages= contains html/txt files (where CSS/javascript is attached)
Documents= location for CSS and Javascript files
PlusImages= designated folder for storing all imagesMy current challenge involves the images not displaying properly in the top layer, which is called by a JavaScript file generated by Tumult Hype software.
In an attempt to solve this problem, I considered adding '../PlusImages/imagename.png' to the agilent_hype_generated_script.js file.
Here is the pathway the client wants to use:
<a href="http://www.XYZ.com/en-US/Products-Services/Services/" rel="nofollow">http://www.XYZ.com/en-US/Products-Services/Services/</a>Below is the code snippet from the HTML file connecting the CSS and JS files:
<link rel="stylesheet" href="/en-US/Products-Services/Services/Documents/main.css" type="text/css" media="all">
<script type="text/javascript" charset="utf-8" src="/en-US/Products-Services/Services/Documents/agilent_hype_generated_script.js?55531"></script>Content of main.css:
.kal_main{background-image:url(/en-US/Products-Services/Services/PlusImages/Animation-Background.png);overflow:hidden;width:920px;height:510px;margin:auto}Snippet from agilent_hype_generated_script.js:
(function(){
// JavaScript content here
})();I have also included a reference link to previous image paths used in the script to ensure they are correct.
Will my suggested solution of editing the path to '../PlusImages/imagename.png' work or is there something else I should consider?