PDA

View Full Version : Image display problem


Ben Loader
10-07-2014, 01:00 AM
Hi there,

very new to this forum so hope this is in the right place.

i am building a website as part of a course i am doing and that being said it is my first time doing so.

I am manually coding most things, all has been going well until i have come across a rather frustrating problem that for the life of me, i can't work out what is wrong.

I am in the process of making an image slider with javascript, and in the process have encountered a problem that I cannot view any images I insert into the page (except my background image), which is showing up fine in live view and browser view.

The issue is, my images i insert show up in Design view but when i go to live view or preview in (any) browser they display as an empty box with a blue question mark inside.

My first assumption was the java script was causing the problem, so i eliminated that all together yet I still have the same problem, I can't insert images anywhere on my page without them showing up as blank boxes with the question mark inside.

This must be something very simple to fix but i am at wits end with being able to work it out.

If someone could help me out i would be so grateful. I have attached a screenshot of my page in live view, it looks pretty much the same in any browser i preview it on.

I can post my code if that is needed in order to solve my problem,

thanks heaps

edbr
10-07-2014, 02:24 AM
post the code, it sounds like a path issue

Ben Loader
10-07-2014, 03:41 AM
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>The Loaded Mix</title>

<link href="CSS/Styles.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="Java Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Java Scripts/jquery.cycle.all.js"></script>
<script type="application/javascript">
$('#slider').cycle({

});
</script>


</head>
<body>

<div id="container">
<div id="secondary_container">
<div id="header">

<h1>The Loaded Mix</h1>

<div id="TopNav">
<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Music</a></li>

<li><a href="#">Videos</a></li>

<li><a href="#">Resources</a></li>

<li><a href="#">Contact</a></li>

</ul><!--end of ul -->
</div><!--end of Top Nav -->
</div><!--end of header -->

<div id="secondary_header">Ben Loader - Music Production. Mixing. Mastering.
</div><!--end of secondary header -->

<div id="slider">

<img src="images/Image#1.jpg" width="960" height="300">
<img src="images/Image#2.jpg" width="960" height="300">
<img src="images/Image#3.jpg" width="960" height="300">

</div><!--end of slider -->

<div id="Main">
<div id="content_one">Content for id "content_one" Goes Here</div><!--end of content one> -->
<div id="content_two">Content for id "content_two" Goes Here</div><!--end of content two -->

</div><!--end of main -->

<footer>

<div id="split_footer">

<nav id="bottomNav">Nottom Nav Bar
</nav><!--end of bottomNav -->

<div id="Social_Media">Facebook Icon
</div><!--end of Social_Media -->

</div><!--end of split_footer -->

<div id="details">Copyright logo and Site by Ben Loader
</div><!--end of details -->

</footer>

</div><!--end of secondary container -->
</div><!--end of container -->

</body>
</html>

Ben Loader
10-07-2014, 03:46 AM
If you need the CSS i can post that up also,

Thanks for your reply:)

edbr
10-07-2014, 03:52 AM
<img src="images/Image#1.jpg" width="960" height="300">
<img src="images/Image#2.jpg" width="960" height="300">
<img src="images/Image#3.jpg" width="960" height="300">
rename the images with out a pound sign

<img src="images/Image1.jpg" width="960" height="300">
<img src="images/Image2.jpg" width="960" height="300">
<img src="images/Image3.jpg" width="960" height="300">

Ben Loader
10-07-2014, 03:59 AM
Thank you so much!

works perfectly now :)

Obviously a newbie mistake of mine, had no idea the # sine could affect the path to the image.

Thank you again

edbr
10-07-2014, 05:11 AM
ur welcome