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; }
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
1st Edition
ISBN:9780357392676
Author:FREUND, Steven
Publisher:FREUND, Steven
Chapter8: Working With Trendlines, Pivottables, Pivotcharts, And Slicers
Section: Chapter Questions
Problem 8EYW
Related questions
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
Transcribed Image Text: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
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
This is a popular solution!
Trending now
This is a popular solution!
Step by step
Solved in 3 steps with 3 images
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
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:
9780357392676
Author:
FREUND, Steven
Publisher:
CENGAGE L
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:
9780357392676
Author:
FREUND, Steven
Publisher:
CENGAGE L