Reference no: EM131985448
Make the appropriate changes using JavaScript to the HTML below
1. You will add event handlers to the thumbnail images and to the larger image.
2. All of your event handlers must execute only after the page has loaded.
3. You are going to add a click event handler to each of the thumbnail images. When the smaller image is clicked, you code will show the larger version of the image in the <img> element within the <figure> element. This same even handler will also set the <figurecaption> text of the <figure> to the clicked thumbnail image' title attribute. Your event handler must use event delegation (I.E., the click event handler will be attached to the <div id=thumbnails'> element and not to the individual <img> elements).
4. You must also add event handlers to the mouseover and mouseout events of the <figure> element. When the user moves the mouse over the larger image, then you will fade the <figcaption> element to about 80% opacity (its initial CSS opacity is 0% or transparent/invisible).When the user moves the mouse out of the figure, then fade the <figcaption> back to 0% opacity. You can set the opacity of an element in JavaScript by setting its style.opacity property.
~~~~~~~~~~~~~~HTML~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/chapter09-project02.js"></script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" />
<img src="images/small/5856697109.jpg" title="Luneburg" />
<img src="images/small/6119130918.jpg" title="Bermuda" />
<img src="images/small/8711645510.jpg" title="Athens" />
<img src="images/small/9504449928.jpg" title="Florence" />
</div>
</main>
</body>
</html>
|
What is the expected range of current
: A resistor with color bands of yellow, violet, brown, and gold is placed across a 12-volt source. What is the expected range of current?
|
|
Connected one after the other
: If resistors A, B, C, and D are connected one after the other (which means they are in series), and then one end of resistor E is connected to the point between
|
|
What is the time the signal is high for each period
: A periodic signal has a duty cycle of 25%. If the signal is LOW for 25.5 microseconds for each period, what is the time the signal is HIGH for each period?
|
|
Useful for decision-making-variance or standard deviation
: Which is more useful for decision-making; variance or standard deviation? Why? What is the relationship between the two?
|
|
Make the appropriate changes using javascript to the html
: Make the appropriate changes using JavaScript to the HTML below 1. You will add event handlers to the thumbnail images and to the larger image.
|
|
Compare dsl and cable internet connections
: Compare DSL and cable Internet connections based on availability, consistent high speed, reliability, security, and price.
|
|
Write a paper about any disease or condition of the body
: Write a paper about Any disease or condition of the body. The required elements: Your paper should contain the following elements in the order listed below.
|
|
Examine the model of procurement of honda
: BUSS 1503 - Procurement management - Examine the model of procurement of Honda and Critically analyze the advantages of the procurement strategies of Honda
|
|
Users in the engineering department need a higher level
: Users in the Engineering Department need a higher level of access on their local computers than other users do.
|