I need to do an image rollover with the article image. Ill send the picture of the original html code and ill post the css in here. I also attached the directions/* the styles for the elements */* { margin: 0; padding: 0;}html { background-color: white;}body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; width: 850px; margin: 0 auto; border: 3px solid #931420; background-color: #fffded;}a:focus, a:hover { font-style: italic;}/* the styles for the header */header { padding: 1.5em 0 2em 0; border-bottom: 3px solid #931420; background-image: linear-gradient( 30deg, #f6bb73 0%, #fffded 30%, white 50%, #fffded 80%, #f6bb73 100%);}header h2 { font-size: 175%; color: #800000;}header h3 { font-size: 130%; font-style: italic;}header img { float: left; padding: 0 30px;}.shadow { text-shadow: 2px 2px 2px #800000;}/* the styles for the main content */main { clear: left;}/* the styles for the section */section { width: 575px; float: right; padding: 0 20px 20px 20px;}section h1 { color: #800000; font-size: 150%; padding: .5em 0 .25em; margin: 0;}section p { padding-bottom: .5em;}/* the styles for the article */article { padding: .5em 0;}article h2 { font-size: 115%; padding: 0 0 .25em 0;}article img { float: right; margin: .5em 0 1em 1em; border: 1px solid black;}/* the styles for the aside */aside { width: 215px; float: right; padding: 0 0 20px 20px;}aside h2 { color: #800000; font-size: 130%; padding: .6em 0 .25em 0;}aside h3 { font-size: 105%; padding-bottom: .25em;}aside img { padding-bottom: 1em;}/* the styles for the footer */footer { background-color: #931420; clear: both;}footer p { text-align: center; color: white; padding: 1em 0;} Run Terminal Helpspeakers> e11x sampson.html>html>DOCTYPE htmlhtml lang="en"781910111213141516171819202122232425262728293031323334353637383940head>San Joaquin Valley Town HallSan Joaquin Valley Town HallCelebrating our 75th Yearc11x samps#11x rollovers.casbody>header> imgⒸc11x sampson.html XAn Image Rollover Using Background ImagesGuest speakersOctoberDavid BrancaccioNovemberAndrew Ross SorkinJanuaryAmy ChuaFebruaryScott SampsonReturn to Home page© 2022, San Joaquin Valley Town Hall, Fresno, CA 93755DEUs 1 Cor 82 See UTF-8 CRLF HTML Go Live A NovemberAndrew Ross SorkinSan Joaquin Valley Town HallCelebrating our 76th YearGuest speakersOctoberDavid BrancaccioNovemberAndrew Ross SorkinAn Image Rollover Using Background Images1. Open these HTML and CSS files, and run the HTML file:short_exercises\town_hall\speakers\clix_sampson.htmlshort_exercises\town_hall\styles\clix_rollovers.cssNote that it displays the image for Scott Sampson (sampson_dinosaur.jpg), as shown above.1. Modify the HTML and CSS as shown in figure 11-6 so the image changes to the image forAndrew Ross Sorkin (sorkin_desk260.jpg) when the user hovers the mouse over the originalimage. To make this work, set the height and width properties for the element to 260px.Because the images aren't quite that size, you'll also need to set the background-repeatproperty to no-repeat.C

In this question we have to create image roll over using the background image in HTML CSS Let's code HTML CODE: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title></head><body> <header> <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.yZHKfK-m734-JEYMTFs6vgAAAA%26pid%3DApi&f=1&ipt=6e9fd1fde7fa922275dfead07b8df653d1d982a2d7d9f9bf12898c40e662f14a&ipo=images" style="display:block;width:10%;" alt=""> <h2>San Joaqulin</h2> <h3>Celebrating our<span class="shadow">75<sup>th</sup></span> Year</h3> </header> <main> <section> <h1>An Image Rollover Using Background Images</h1> <a class="rollover" summary="rollover" href=""> <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.x5-Yt1WxbxP4vgqDTcKE8AHaE8%26pid%3DApi&f=1&ipt=68233e79c6c9a108c7cb4b0c3f715bdadf1880ac5dfa87258677f80b0f0389c3&ipo=images" style="display:block;width:260px;" alt="Nike FlyKnit 3" border=0> <div style="mso-hide:all;"> <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.zKEQNfNvHn6QG3vfrDUgWgHaFm%26pid%3DApi&f=1&ipt=27d342886b367250d381ac101ea8febe8be72c69f2743ed8b097c8e1fc88384b&ipo=images" style="max-height:0px;display:block;width:250px;" alt="" border=0> </div> </a> </section> <aside> <h2>Guest speakers</h2> <h3>October<br><a href="">David Brancaccio</a></h3> <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.BzVCION2Ew5HhDewgrfRzQHaJi%26pid%3DApi&f=1&ipt=b250ae35f05e66015818a42840fa6169c5d2a47dcc6040bda163f4a797973e59&ipo=images" style="display:block;width:50%;" alt=""> </aside> <footer> <p></p> </footer> </main></body></html> CSS CODE: /* the styles for the elements */ * { margin: 0; padding: 0; } html { background-color: white; } body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; width: 850px; margin: 0 auto; border: 3px solid #931420; background-color: #fffded; } a:focus, a:hover { font-style: italic; } /* the styles for the header */ header { padding: 1.5em 0 2em 0; border-bottom: 3px solid #931420; background-image: linear-gradient( 30deg, #f6bb73 0%, #fffded 30%, white 50%, #fffded 80%, #f6bb73 100%); } header h2 { font-size: 175%; color: #800000; } header h3 { font-size: 130%; font-style: italic; } header img { float: left; padding: 0 30px; } .shadow { text-shadow: 2px 2px 2px #800000; } /* the styles for the main content */ main { clear: left; } /* the styles for the section */ section { width: 575px; float: right; padding: 0 20px 20px 20px; } section h1 { color: #800000; font-size: 150%; padding: .5em 0 .25em; margin: 0; } section p { padding-bottom: .5em; } /* the styles for the article */ article { padding: .5em 0; } article h2 { font-size: 115%; padding: 0 0 .25em 0; } article img { float: right; margin: .5em 0 1em 1em; border: 1px solid black; } /* the styles for the aside */ aside { width: 215px; float: right; padding: 0 0 20px 20px; } aside h2 { color: #800000; font-size: 130%; padding: .6em 0 .25em 0; } aside h3 { font-size: 105%; padding-bottom: .25em; } aside img { padding-bottom: 1em; } /* the styles for the footer */ footer { background-color: #931420; clear: both; } footer p { text-align: center; color: white; padding: 1em 0; } .rollover:hover > img, * [summary=rollover]:hover > img{ max-height: 0px !important; } .rollover:hover > div img, * [summary=rollover]:hover > div img{ max-height: none !important; } @media screen and (max-device-width:1024px) { .rollover:hover > img, * [summary=rollover]:hover > img{ max-height: none !important; } .rollover:hover > div img, * [summary=rollover]:hover > div img{ max-height: 0px !important; } }

Engineering

Computer Science

I need to do an image rollover with the article image. Ill send the picture of the original html code and ill post the css in here. I also attached the directions /* the styles for the elements */ * { margin: 0; padding: 0; } html { background-color: white; } body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; width: 850px; margin: 0 auto; border: 3px solid #931420; background-color: #fffded; } a:focus, a:hover { font-style: italic; } /* the styles for the header */ header { padding: 1.5em 0 2em 0; border-bottom: 3px solid #931420; background-image: linear-gradient( 30deg, #f6bb73 0%, #fffded 30%, white 50%, #fffded 80%, #f6bb73 100%); } header h2 { font-size: 175%; color: #800000; } header h3 { font-size: 130%; font-style: italic; } header img { float: left; padding: 0 30px; } .shadow { text-shadow: 2px 2px 2px #800000; } /* the styles for the main content */ main { clear: left; } /* the styles for the section */ section { width: 575px; float: right; padding: 0 20px 20px 20px; } section h1 { color: #800000; font-size: 150%; padding: .5em 0 .25em; margin: 0; } section p { padding-bottom: .5em; } /* the styles for the article */ article { padding: .5em 0; } article h2 { font-size: 115%; padding: 0 0 .25em 0; } article img { float: right; margin: .5em 0 1em 1em; border: 1px solid black; } /* the styles for the aside */ aside { width: 215px; float: right; padding: 0 0 20px 20px; } aside h2 { color: #800000; font-size: 130%; padding: .6em 0 .25em 0; } aside h3 { font-size: 105%; padding-bottom: .25em; } aside img { padding-bottom: 1em; } /* the styles for the footer */ footer { background-color: #931420; clear: both; } footer p { text-align: center; color: white; padding: 1em 0; }

I need to do an image rollover with the article image. Ill send the picture of the original html code and ill post the css in here. I also attached the directions /* the styles for the elements / { margin: 0; padding: 0; } html { background-color: white; } body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; width: 850px; margin: 0 auto; border: 3px solid #931420; background-color: #fffded; } a:focus, a:hover { font-style: italic; } /* the styles for the header / header { padding: 1.5em 0 2em 0; border-bottom: 3px solid #931420; background-image: linear-gradient( 30deg, #f6bb73 0%, #fffded 30%, white 50%, #fffded 80%, #f6bb73 100%); } header h2 { font-size: 175%; color: #800000; } header h3 { font-size: 130%; font-style: italic; } header img { float: left; padding: 0 30px; } .shadow { text-shadow: 2px 2px 2px #800000; } / the styles for the main content / main { clear: left; } / the styles for the section / section { width: 575px; float: right; padding: 0 20px 20px 20px; } section h1 { color: #800000; font-size: 150%; padding: .5em 0 .25em; margin: 0; } section p { padding-bottom: .5em; } / the styles for the article / article { padding: .5em 0; } article h2 { font-size: 115%; padding: 0 0 .25em 0; } article img { float: right; margin: .5em 0 1em 1em; border: 1px solid black; } / the styles for the aside / aside { width: 215px; float: right; padding: 0 0 20px 20px; } aside h2 { color: #800000; font-size: 130%; padding: .6em 0 .25em 0; } aside h3 { font-size: 105%; padding-bottom: .25em; } aside img { padding-bottom: 1em; } / the styles for the footer */ footer { background-color: #931420; clear: both; } footer p { text-align: center; color: white; padding: 1em 0; }

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

See similar textbooks

Related questions

Concept explainers

Question

I need to do an image rollover with the article image. Ill send the picture of the original html code and ill post the css in here. I also attached the directions

/* the styles for the elements */

* {

margin: 0;

padding: 0;

}

html {

background-color: white;

}

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 100%;

width: 850px;

margin: 0 auto;

border: 3px solid #931420;

background-color: #fffded;

}

a:focus, a:hover {

font-style: italic;

}

/* the styles for the header */

header {

padding: 1.5em 0 2em 0;

border-bottom: 3px solid #931420;

background-image: linear-gradient(

30deg, #f6bb73 0%, #fffded 30%, white 50%, #fffded 80%, #f6bb73 100%);

}

header h2 {

font-size: 175%;

color: #800000;

}

header h3 {

font-size: 130%;

font-style: italic;

}

header img {

float: left;

padding: 0 30px;

}

.shadow {

text-shadow: 2px 2px 2px #800000;

}

/* the styles for the main content */

main {

clear: left;

}

/* the styles for the section */

section {

width: 575px;

float: right;

padding: 0 20px 20px 20px;

}

section h1 {

color: #800000;

font-size: 150%;

padding: .5em 0 .25em;

margin: 0;

}

section p {

padding-bottom: .5em;

}

/* the styles for the article */

article {

padding: .5em 0;

}

article h2 {

font-size: 115%;

padding: 0 0 .25em 0;

}

article img {

float: right;

margin: .5em 0 1em 1em;

border: 1px solid black;

}

/* the styles for the aside */

aside {

width: 215px;

float: right;

padding: 0 0 20px 20px;

}

aside h2 {

color: #800000;

font-size: 130%;

padding: .6em 0 .25em 0;

}

aside h3 {

font-size: 105%;

padding-bottom: .25em;

}

aside img {

padding-bottom: 1em;

}

/* the styles for the footer */

footer {

background-color: #931420;

clear: both;

}

footer p {

text-align: center;

color: white;

padding: 1em 0;

}

Transcribed Image Text:Run Terminal Help speakers> e11x sampson.html>html> DOCTYPE html html lang="en" 7 8 19 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 head> <meta charset="utf-8"> <title>San Joaquin Valley Town Hall</title> <link rel="shortcut icon" href="../images/favicon.ico"> <link rel="stylesheet" href="../styles/c11x_rollovers.css"> </head> <body> </header> <main> <header> <img src="../images/town hall_logo.gif" alt="Town Hall logo" height="80"> <h2>San Joaquin Valley Town Hall</h2> <h3>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h3> c11x samps #11x rollovers.cas body>header> img <aside> </body> </html> Ⓒc11x sampson.html X <section> <h1>An Image Rollover Using Background Images</h1> <img src="../images/sampson_dinosaur.jpg" alt="Scott Sampson with dinosaur"> </section> </main> <footer> <h2>Guest speakers</h2> <h3>October<br><a href="c06x brancaccio.html">David Brancaccio</a></h3> <img src="../images/brancaccio75.jpg" alt="David Brancaccio photo"> <h3>November<br><a href="#">Andrew Ross Sorkin</a></h3> <img src="../images/sorkin75.jpg" alt="Andrew Ross Sorkin photo"> <h3>January<br><a href="#">Amy Chua</a></h3> <img src="../images/chua75.jpg" alt="Amy Chua photo"> <h3>February<br><a href-"ce8x sampson.html">Scott Sampson</a></h3> <img src="../images/sampson75.jpg" alt="Scott Sampson photo"> <h3><a href="#">Return to Home page</a></h3> </aside> <p>© 2022, San Joaquin Valley Town Hall, Fresno, CA 93755</p> </footer> DE Us 1 Cor 82 See UTF-8 CRLF HTML Go Live A

November
Andrew Ross Sorkin
San Joaquin Valley Town Hall
Celebrating our 76th Year
Guest speakers
October
David Brancaccio
November
Andrew Ross Sorkin
An Image Rollover Using Background Images
1. Open these HTML and CSS files, and run the HTML file:
short_exercises\town_hall\speakers\clix_sampson.html
short_exercises\town_hall\styles\clix_rollovers.css
Note that it displays the image for Scott Sampson (sampson_dinosaur.jpg), as shown above.
1. Modify the HTML and CSS as shown in figure 11-6 so the image changes to the image for
Andrew Ross Sorkin (sorkin_desk260.jpg) when the user hovers the mouse over the original
image. To make this work, set the height and width properties for the <p> element to 260px.
Because the images aren't quite that size, you'll also need to set the background-repeat
property to no-repeat.
C

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 3 steps with 3 images

SEE SOLUTION Check out a sample Q&A here

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.