Output: Image Gallery hover Pacific Sunset Note: The image on the right will only appear when the mouse hover on the "thumb" image.
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
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.](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2Fd0e6e914-e5fa-4287-a098-b478b2ea749c%2F73c0ad62-fb93-4b66-9e94-d820d66fe8b5%2Fp94k8gf_processed.jpeg&w=3840&q=75)
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](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2Fd0e6e914-e5fa-4287-a098-b478b2ea749c%2F73c0ad62-fb93-4b66-9e94-d820d66fe8b5%2Fdftim4n_processed.jpeg&w=3840&q=75)
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
![](/static/compass_v2/shared-icons/check-mark.png)
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
Step by step
Solved in 3 steps with 1 images
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
Knowledge Booster
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.Recommended textbooks for you
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
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)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
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)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
![C How to Program (8th Edition)](https://www.bartleby.com/isbn_cover_images/9780133976892/9780133976892_smallCoverImage.gif)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
![Database Systems: Design, Implementation, & Manag…](https://www.bartleby.com/isbn_cover_images/9781337627900/9781337627900_smallCoverImage.gif)
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
![Programmable Logic Controllers](https://www.bartleby.com/isbn_cover_images/9780073373843/9780073373843_smallCoverImage.gif)
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education