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 1 year ago
Next > < Previous

Related Solutions

Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body>    <form>...
Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body>    <form> <table style="color:white;background-color:blue;border:solid black 7px;border-radius:25px;"> <tr><th colspan="2" style="color:white;background-color:black;border:solid black 2px;outline:solid black 2px;">SQUARE PROBLEM</th></tr> <tr> <td><label>Enter side:</label></td><td> <input type="text" style="background-color:#DEDEE6;border:4px solid red;"/> </td> </tr> <tr> <td><label>Area:</label></td><td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr> <tr> <td><label>Perimeter:</label></td>   <td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr> <tr>    <td colspan="2" >    <center>    <input type="button" value="Area" style="color:white;background-color:black;border:1px solid red;"/>    <input type="button" value="Perimeter" style="color:white;background-color:black;border:1px solid white;"/>...
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"...
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>           
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>                     </head>      <body>     <script type="text/javascript">              function findAnswer() {           var a = new Date(2020, 12, 29);           // HINT: Be careful with getMonth()           var d =  a.getFullYear() + a.getMonth();           var sum = d % 5;           document.getElementById("ans").innerHTML = sum.toString();         }     </script>              <form action="#" method="post" name="form1" id="form1" class="form" >        <input type="button" name="Submit" id="submit" value="Submit" onclick="findAnswer();"/>          </form>     <p id ="ans"></p>   </body> </html> none Will the code from above print anything, if so, what printed ?...
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>           
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>                     </head>      <body>     <script type="text/javascript">              function findAnswer() {           var a = document.getElementById("box1").value;           var b = document.getElementById("box2").value;                        if (typeof(a) == "number" && typeof(b) == "number") {               var c = (a + b) % 5;               document.getElementById("ans").innerHTML = c.toString();             } else {                document.getElementById("ans").innerHTML = "no Good";             }         }     </script>              <form action="#" method="post" name="form1" id="form1" class="form" >        <label>Enter Numbers: </label> <br />           <label> Value 1  : </label><input type="text" name="box1" id="box1"  value="10" /><br/>           <label> Value...
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="">   ...
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.
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"...
<!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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT