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

HTML <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Clock</title>     <link rel="stylesheet" href="clock.css">    &n
HTML <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Clock</title>     <link rel="stylesheet" href="clock.css">     <script src="clock.js"></script> </head> <body>     <main>         <h1>Digital clock</h1>         <fieldset>             <legend>Clock</legend>             <span id="hours">&nbsp;</span>:             <span id="minutes">&nbsp;</span>:             <span id="seconds">&nbsp;</span>&nbsp;             <span id="ampm">&nbsp;</span>         </fieldset>     </main> </body> </html> CSS: body {     font-family: Arial, Helvetica, sans-serif;     background-color: white;     margin: 0 auto;     width: 450px;     border: 3px solid blue;     padding: 0 2em 1em; } h1 {     color: blue; } label {     float: left;     width: 11em;     text-align: right;     padding-bottom: .5em; } input {     margin-left: 1em;     margin-bottom: .5em; } fieldset {...
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.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet"...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet" href="main.css" /> </head> <body> <div class="app-wrap"> <header> <input type="text" autocomplete="on" class="search-box" placeholder="Enter your location..." /> </header> <main> <section class= "location"> <div class="city">Hyderabad, IN</div> <div class="date">Thursday 23 July 2020</div> </section> <div class="current"> <div class="temp">25<span>°c</span></div> <div class="weather">Rainy</div> <div class="hi-low">20°c / 23°c</div> </div> </main> </div> <script src="main.js"></script> </body> </html> MAIN.js const api = { key="091ff564240e0e16c46ae680b188ca3e" base: "https://api.openweathermap.org/data/2.5" }; const searchbox = document.querySelector(".search-box"); searchbox.addEventListener("keypress", setQuery); function setQuery(evt) {...
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)     {        ...
What are the benefits and disadvantages of North American Free Trade Agreement (NAFTA)?
What are the benefits and disadvantages of North American Free Trade Agreement (NAFTA)?
hi i do not know what is wrong with my python code. this is the class:...
hi i do not know what is wrong with my python code. this is the class: class Cuboid: def __init__(self, width, length, height, colour): self.__width = width self.__length = length self.__height = height self.__colour = colour self.surface_area = (2 * (width * length) + 2 * (width * height) + 2 * (length * height)) self.volume = height * length * width def get_width(self): return self.__width def get_length(self): return self.__length def get_height(self): return self.__height def get_colour(self): return self.__colour def set_width(self,...
What is wrong with this code and how can it be fixed? import java.util.Scanner; public class...
What is wrong with this code and how can it be fixed? import java.util.Scanner; public class admissionRequirement { public static void main(String[] args) { // TODO Auto-generated method stub Scanner myObj = new Scanner(System.in); System.out.println("What is your name?"); String name = myObj.nextLine(); System.out.println("What is your Reading Score?"); int reading = myObj.nextInt(); System.out.println("What is your Math Score?"); int math = myObj.nextInt(); System.out.println("What is your Writing Score?"); int writing = myObj.nextInt(); System.out.println("What is your Class Standing?"); int standing = myObj.nextInt(); System.out.println("What is...
How many native American Cultural areas are there in North America and what are they? Where...
How many native American Cultural areas are there in North America and what are they? Where do they reside Geographically? What are some of the similarities among these Native American Cultures? What are the Differences?
What is wrong with the following code? Give two effective ways to fix it. 1 import...
What is wrong with the following code? Give two effective ways to fix it. 1 import javax.swing.*; 2 import java.awt.event.*; 3 4 public class H2ClassJ extends JFrame { 5    public static final long serialVersionUID = 22; 6 7 public H2ClassJ () { 8      addMouseListener (new MouseListener () { 9    public void mouseClicked (MouseEvent e) {} 10     }); 11   } // end constructor 12 13 } // end class H2ClassJ
What are the major prohibitions provided by the Code of Ethics of Engineers? What is the...
What are the major prohibitions provided by the Code of Ethics of Engineers? What is the purpose of imposing on the engineer and the surveyor the obligation to participate in courses, talks, conferences and workshops? Under what circumstances can the engineer and surveyor make public statements? Under what circumstances is an engineer who does not meet all the necessary qualifications allowed to accept a job assignment?
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT