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>

<link rel="stylesheet" href="layout.css">

<ul>
<li><a class="active" href="MarcosPage.html">Marcos Page</a></li>
<li><a href="JessesPage.html">Jesses Page</a></li>
</ul>

<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"];

</head>

<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>

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 4 months ago

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"> </span>: <span id="minutes"> </span>: <span id="seconds"> </span>  <span id="ampm"> </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 {...

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"> <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)?

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?