Question

In: Computer Science

images wont show what is wrong with this code? <html> <head> <title>Major North American Sports Leagues</title>...

images wont show what is wrong with this code?

<html>

<head>
<title>Major North American Sports Leagues</title>

<!-- Calling CSS File -->
<link rel="stylesheet" href="layout.css">
<!----------------------------------------->


<!-- Navbar Links to both Pages -->
<ul>
<li><a class="active" href="MarcosPage.html">Marcos Page</a></li>
<li><a href="JessesPage.html">Jesses Page</a></li>
</ul>
<!----------------------------------------------------------------->

<!-- Java Script for creating arrays -->
<script>
//Creates array for title names
var title = [];
title[0] = ["NBA"];
title[1] = ["MLB"];
title[2] = ["NHL"];
title[3] = ["NFL"];
title[4] = ["MLS"];
title[5] = ["CFL"];
//Creates array for Image locations
var image = [];
Image[6] = ["image1.jpg"];
Image[7] = ["image2.jpg"];
Image[8] = ["image3.jpg"];
Image[9] = ["image4.jpg"];
Image[10] = ["image5.jpg"];
Image[11] = ["image6.jpg"];

function diplay_ID() {
//Sets titles and images to id value
for (i = 0, leng = title.length; i < leng; i++) {
document.getElementById(i).innerHTML = title[i];
}
   for (i = 6, leng = image.length; x < leng; x++) {
document.getElementById(i).innerHTML = image[i];
}
}  
</script>
<!------------------------------------------------------------->


</head>


<!-- Grid Gallery -->
<body onload="diplay_ID();">
<div class ="gridcontainer">
<div>
<a href="NBA.html"><h3 id="0"></h3></a>
   <a href="NBA.html"><img class = "image" id = "6" src = "" width="452" height="322" title="NBA" ></a>
</div>
<div>
<a href="MLB.html"><h3 id="1"></h3></a>
   <a href="MLB.html"><img src="image2.jpg" width="452" height="322" title="MLB" ></a>
</div>
<div>   
<a href="NHL.html"><h3 id="2"></h3></a>
   <a href="NHL.html"><img src="image3.jpg" width="452" height="322" title="NHL" ></a>
</div>
<div>
<a href="NFL.html"><h3 id="3"></h3></a>
   <a href="NFL.html"><img src="image4.jpg" width="452" height="322" title="NFL" ></a>
</div>
<div>
<a href="MLS.html"><h3 id="4"></h3></a>
   <a href="MLS.html"><img src="image5.jpg" width="452" height="322" title="MLS" ></a>
</div>
<div>   
<a href="CFL.html"><h3 id="5"></h3></a>
   <a href="CFL.html"><img src="image6.jpg" width="452" height="322" title="CFL" ></a>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------->


</body>
</html>

Solutions

Expert Solution

Hi,

I have resolved the issue and Images was not showing because of the Image URL was not set for the first Image Control. And for remaining Image controls, I thik the path you have set was incorrect.

Please see the below attached screenshot which indicates that the Image Source was not correct:

Please see the outpur below:

For last 2 image controls, you can see that I have not set the Proper path i.e. Images are not available on that respected path so that images won't show in the browser:

It is working now on Chrome and Internet Explorer Browsers.

Thanks.


Related Solutions

Using supply and demand, with the 4 major north american sports league. From most expensive to...
Using supply and demand, with the 4 major north american sports league. From most expensive to least expensive ticket prices it goes #1 NFL #2 NHL #3 NBA #4 MLB. Why is that the case? Include one other sports related source.
Okay, can someone please tell me what I am doing wrong?? I will show the code...
Okay, can someone please tell me what I am doing wrong?? I will show the code I submitted for the assignment. However, according to my instructor I did it incorrectly but I am not understanding why. I will show the instructor's comment after providing my original code for the assignment. Thank you in advance. * * * * * HourlyTest Class * * * * * import java.util.Scanner; public class HourlyTest {    public static void main(String[] args)     {        ...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT