Output: Image Gallery hover Pacific Sunset Note: The image on the right will only appear when the mouse hover on the "thumb" image.

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question
Output:
Image Gallery
hover
Pacific Sunset
Note: The image on the right will only appear when the mouse hover on the "thumb" image.
Launch a text editor and modify the index.html file to configure a web page as indicated:
2.
1. Configure the text, Image Gallery, within an h1 element, and within the title element.
Image Gallery 4
hl
Code a div assigned to the id named gallery. This div will contain the thumbnail images, which
will be configured within an unordered list.
Transcribed Image Text:Output: Image Gallery hover Pacific Sunset Note: The image on the right will only appear when the mouse hover on the "thumb" image. Launch a text editor and modify the index.html file to configure a web page as indicated: 2. 1. Configure the text, Image Gallery, within an h1 element, and within the title element. Image Gallery 4 hl Code a div assigned to the id named gallery. This div will contain the thumbnail images, which will be configured within an unordered list.
Lab 6
3. Configure an unordered list within the div. Code four li elements, one for each thumbnail image.
The thumbnail images will function as image links with a :hover pseudo-class that causes the
larger image to display on the page. We'll make this all happen by configuring an anchor element
containing both the thumbnail image and a span element that comprises the larger image along
with descriptive text. An example of the first li element is
<li><a href="photo1.png"><img src="photo1thumb.png" width="100"
height="75" alt="Golden Gate Bridge">
<span><img src="photo1.png" width="250" height="150"
alt="Golden Gate Bridge"><br>Golden Gate Bridge</span></a>
</li>
Photo2 is California Beach
Photo3 is Rocky Shoreline
Photo4 is Pacific Sunset
4. Display your page in a browser. You'll see an unordered list with the thumbnail images, the larger
images, and the descriptive text.
Image Gallery
Golden Gate Brider
California Beach
I
Transcribed Image Text:Lab 6 3. Configure an unordered list within the div. Code four li elements, one for each thumbnail image. The thumbnail images will function as image links with a :hover pseudo-class that causes the larger image to display on the page. We'll make this all happen by configuring an anchor element containing both the thumbnail image and a span element that comprises the larger image along with descriptive text. An example of the first li element is <li><a href="photo1.png"><img src="photo1thumb.png" width="100" height="75" alt="Golden Gate Bridge"> <span><img src="photo1.png" width="250" height="150" alt="Golden Gate Bridge"><br>Golden Gate Bridge</span></a> </li> Photo2 is California Beach Photo3 is Rocky Shoreline Photo4 is Pacific Sunset 4. Display your page in a browser. You'll see an unordered list with the thumbnail images, the larger images, and the descriptive text. Image Gallery Golden Gate Brider California Beach I
Expert Solution
steps

Step by step

Solved in 3 steps with 1 images

Blurred answer
Knowledge Booster
Running Time of Application
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education