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.

venereology answered 5 months ago
Next > < Previous

Related Solutions

Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image...
Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image Swap Application</title> <link rel="stylesheet" type="text/css" href="image_swap.css"> <script type="text/javascript" src="image_swap.js"></script> </head> <body>     <main>         <h1>Fishing Images</h1>         <p>Click on an image to enlarge.</p>         <ul id="imageLinks">             <li><a href="images/release.jpg" title="Catch and Release">                 <img src="thumbnails/release.jpg" alt=""></a></li>             <li><a href="images/deer.jpg" title="Deer at Play">                 <img src="thumbnails/deer.jpg" alt=""></a></li>             <li><a href="images/hero.jpg" title="The Big One!">                 <img src="thumbnails/hero.jpg" alt=""></a></li>             <li><a href="images/bison.jpg" title="Grazing Bison">                 <img src="thumbnails/bison.jpg"...
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 {...
<html> <head>     <title>Nick D'Angelo</title> </head> <body>     <h1>This is a header</h1>     <h2>This is a subheader</h2>  &nbs
<html> <head>     <title>Nick D'Angelo</title> </head> <body>     <h1>This is a header</h1>     <h2>This is a subheader</h2>     <p>The quick <b>brown</b> fox jumped <i>over</i> the lazy dog.</p>     <!--additional paragraph-->     <!--here two words are bold and two are italicized-->     <p>Pack my <b>box</b> with <i>five</i> dozen <b>liquor</b> <i>jugs</i>. Go to <a href='https://www.esu.edu' target="_blank">site</a></p>     <a href="http://ndangelo.com">Nick's Homepage</a>     <a href="http://ndangelo.com" target="_blank">Nick's Homepage</a> </body> <html> Add an Ordered, Unordered, Definition and Nested list to your html file (one for each). Each should be at least 10 lines or more....
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {...
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {    dispWin = window.open('','NewWin','toolbar=no,status=no,width=300,height=200')       message = "<ul><li>NAME:" + document.form1.name.value;    message += "<li>ADDRESS:" + document.form1.address.value;    message += "<li>PHONE:" + document.form1.phone.value;    message += "</ul>";    dispWin.document.write(message); } </script> </head> <body>    <h1>Form Display Example</h1>    <p>Enter the following information. When you press the Display button, the data you entered will be displayed in a pop-up.</p>    <form name="form1" method="get" action="">   ...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head>...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head> <title> Project for keeping all your input </title> </head> <body> <h1>Welcome to this Web Based Test!!!</h1> <p>Please answer the following questions:</p> <hr/> <form action="" method="post"> Name: <input type="text" name="name" value=""> <font color=red>*</font><br/><br/> E-mail: <input type="text" name="email" value=""> <font color=red>*</font><br> <hr/> Choose your major area of study: <select name="major"> <option value="Digital Media" >Digital Media</option> <option value="Software" >Software</option> <option value="Security" >Security</option> <option value="Business" >Business</option> <option value="Other"...
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"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */    #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ }    header h1 { text-align: center; }    nav { text-align: center; background: rgb(175, 196, 206); }    address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...
<!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)?
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT