1 – Create a webpage that contains a table with exactly three rows and two columns....

1 – Create a webpage that contains a table with exactly three rows and two columns.

The first row will contain a table heading containing the name of a US National Park, that spans across all columns. Hint: use the colspan attribute inside the opening th tag
Give the table heading an onmouseover that will change the text of the heading when it is moused over to read My Favorites Park! (Hint: use innerHTML). Use onmouseout to change it back.
The second and third rows will contain 2 thumbnail(small) images each. (See Creating Square Thumbnails section below).

These are images from the National Park that you selected
Remember your code, pages, images will not be like anyone else’s. When they are compared you do not want your file to be flagged.

Use the anchor element on the thumbnail images, so that each thumbnail image opens a larger version of the same image in a new tab. (Hint: if you give the target a name, you can have them all open in the same tab rather than using _blank and having a new tab open each time one is clicked. This avoids opening too many tabs.)
Apply style to the table. Again, your table will not be like anyone else’s. Your work is to be your own work.
Write the JavaScript code so that each thumbnail image in the table opens the larger original image in the large cell in row four/five of the table when the thumbnail is clicked.
1. E.g., clicking on dog_small.png should cause dog.png to open in the large cell of the table as a 300px by 300px image replacing the image that was previously there.
2. Note: Write a function to replace the large image with the new image.
3. Hint: The onclick will just call the function.

Solutions

Expert Solution

NOTE:
- I have taken some sample images. You can use your own images by replacing the src attribute of img tags.
Put the images in the same directory where you put these html, css and js files.
- External CSS and External JS have been used and imported at appropriate place in the HTML file.
- Read through the comments in the Javascript file (index.js) to understand its working.

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Favorite Park!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <table>
        <thead>
          <tr>
            <th colspan="2">US National Park</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <img class="thumbnail-img" src="np1.jpg"  />
            </td>
            <td>
              <img class="thumbnail-img" src="np2.jpg"  />
            </td>
          </tr>
          <tr>
            <td>
              <img class="thumbnail-img" src="np3.jpg"  />
            </td>
            <td>
              <img class="thumbnail-img" src="np4.jpeg"  />
            </td>
          </tr>
          <tr>
            <td>
              <img class="thumbnail-img" src="np5.jpg"  />
            </td>
            <td>
              <img class="thumbnail-img" src="np6.jpg"  />
            </td>
          </tr>
          <tr class="larger-img">
            <td colspan="2">
              <a target="_blank" href="np1.jpg"
                ><img class="image-lg" src="np1.jpg" 
              /></a>
            </td>
          </tr>
        </tbody>
      </table>
    </main>
    <script src="index.js"></script>
  </body>
</html>

styles.css

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

tr > th {
  cursor: pointer;
}
td {
  padding: 5px;
  text-align: center;
}

.thumbnail-img,
.image-lg {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

.image-lg {
  width: 300px;
  height: 300px;
}

table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  margin: 0 auto;
  width: 50%;
}

table td,
table th {
  border: 1px solid #ddd;
  padding: 8px;
}

table tr td:hover {
  background-color: #f2f2f2;
}

table tr td img:hover {
  cursor: pointer;
}

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #ff7a0e;
  color: white;
}

index.js

//First we get the reference to the DOM node of Table Heading th
const tableHeading = document.querySelector('tr > th')

//We add an event listener to the table heading to listen to mouseover event. We then pass the event listener the callback function that sets the text to "My Favorite Park" when we hover over the heading
tableHeading.addEventListener('mouseover', function () {
  tableHeading.innerHTML = 'My Favorite Park!'
})

//We also add a mouseout event on the heading so that when we remove the cursor from the heading, the heading text changes back to "US National Park"
tableHeading.addEventListener('mouseout', function () {
  tableHeading.innerHTML = 'US National Park'
})

//now we take the reference to the larger image and the link of the larger image and to the table
const largerImageLink = document.querySelector('.larger-img a')
const largerImage = document.querySelector('.larger-img img')
const table = document.querySelector('table')

// Here we are using event-delegation.
//In event delegation, we add an event listener to the parent rather than to each individual child
// Whenever a thumbnail image is clicked, we check for an event on the table.
//We determine if the click event occurred on the thumbnail image, if thumbnail image is clicked we set the src attribute of the largerImage to the thumbnail image that was clicked
table.addEventListener('click', function (e) {
  const target = e.target
  if (target.tagName !== 'IMG') {
    return
  } else {
    largerImage.setAttribute('src', target.getAttribute('src'))
    largerImageLink.setAttribute('href', target.getAttribute('src'))
  }
})

OUTPUT FROM THE BROWSER

NOTE:

Initially, the larger image in row 4 shows the first thumbnail image. As you click on the different thumbnail images the larger image will be replaced by that particular image which was clicked.

venereology answered 1 year ago

Next > < Previous

Related Solutions

"Create a program that displays a table consisting of four rows and five columns. The first...

"Create a program that displays a table consisting of four rows and five columns. The first column should display the numbers 1 through 4. The second and sub-sequent columns should display the result of multiplying the number in the first column by the numbers 2 through 5. If necessary, create a new project named Introductory14 Project, and save it in the Cpp8\Chap08 folder. Enter the C++ instructions into a source file named Introductory14.cpp. Also enter appropriate comments and any additional...

Create a table in SQL with foreign key reference: 1.Create the three tables without any columns...

Create a table in SQL with foreign key reference: 1.Create the three tables without any columns 2.Alter the tables to add the columns 3.Alter the tables to create the primary and foreign keys

Create a Word document and title it “College Expenses”. In the Word document, insert a table with at least 5 rows and 5 columns. Insert>Table.

Assignment 3 – Incorporating a Table into a Document.Create a Word document and title it “College Expenses”. In the Word document, insert a table with at least 5 rows and 5 columns. Insert>Table.Tell me about your college expenses you have by filling this table with subjects and data. Then write two paragraphs telling me about the information you provided in the table. Bold and color table heading. Example of table:College ExpensesTuitionBooksComputer/InternetOther suppliesScience ClassMath classC.I.S. ClassEnglish ClassGive the page a proper title....

When testing for independence in a contingency table with 2 rows and 2 columns at 5%...

When testing for independence in a contingency table with 2 rows and 2 columns at 5% level of significance, the critical value of the test statistic is____

JavaScript Create a welcome message on your webpage using three variables At least two of the...

JavaScript Create a welcome message on your webpage using three variables At least two of the variables should be concatenated together Use document.write to add a statement about what is your favorite past time? Format the HTML document appropriately with a title, and the correct HTML structure to hold the JavaScript Create an array to share what your favorite color is. The array must have at least three values and be called via the index value Correctly link the JavaScript...

Write a Python program which adds up columns and rows of given table as shown in...

Write a Python program which adds up columns and rows of given table as shown in the specified figure. Example test case (the four lines below “Input cell value” are input from user, and the five lines below “Results:” are the output of the program.): Input number of rows/columns (0 to exit) 4 Input cell value: 25 69 51 26 68 35 29 54 54 57 45 63 61 68 47 59 Result: 25 69 51 26 171...

Write a Python program which adds up columns and rows of given table as shown in...

Create a table with two columns. Name the table First Initial _ Last Name (e.g. John...

Create a table with two columns. Name the table First Initial _ Last Name (e.g. John Dow will create table j_dow). You have to audit all DML statements on your table. To do this you write two triggers: 1. To log any DML statements that users might run on this table. The results must be stored in the First Initial _ Last Name _ Log table (e.g. John Dow will create table j_dow_log). The table should have unique event ID,...

1. Write the statements to create a table named REQUIREMENTS. The table has the following columns:...

1. Write the statements to create a table named REQUIREMENTS. The table has the following columns: credits number (primary key) and degree name. 2. Write the statements to create a table named CANDIDATE with the following columns names. Pick the best column type: student_id, first name, last name, credits and graduation date. The credits column is a foreign key to the credits column in the REQUIREMENTS table. 3. Write the statement(s) to Insert 2 rows in your REQUIREMENTS table. Make...

/*Question 3: The following data contains five columns (variables) and five rows (observations). First, read the...

/*Question 3: The following data contains five columns (variables) and five rows (observations). First, read the data into SAS to create a data set. Notice that the first, third, and the fifth variable have missing values. Please replace the missing values of the first, third, and fifth variable with 30, 40, and 50, respectively. Next, for all the variables, if a value is at least 100, make an adjustment to the value such that its new value is equal to...

Subjects