Question

In: Computer Science

-Insert an image of a hydrangea flower. -Insert an image of a spider lily.- -Without using...

-Insert an image of a hydrangea flower.

-Insert an image of a spider lily.-

-Without using a function write the JavaScript code so that when you to mouse over the spider lily, both the spider lily and the hydrangea are replaced by the image of a perennial hibiscus.

Solutions

Expert Solution

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Change Image on Hover in CSS</title>

<style>

    .card {

        width: 300px;

        height: 300px;

        background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT1QBsHZLOBwuGUonpvo7GW89XA2odTkM8gjw&usqp=CAU") no-repeat;

        margin: 50px;

    }

      .card2 {

        width: 300px;

        height: 300px;

        background: url("https://www.nature-and-garden.com/wp-content/uploads/sites/4/2018/10/spider-lily.jpg") no-repeat;

        margin: 50px;

    }

    .main:hover div {

        background: url("https://i0.wp.com/schmittsfamilyfarms.com/wp-content/uploads/2017/07/unnamed-3.jpg?ssl=1") no-repeat;

      }

    

</style>

</head>

<body>

    <div class="main">

  <div class="card"></div>

  <div class="card2"></div>

  </div>

</body>

</html>

// happy coding :)


Related Solutions

Surgical Instruments: insert an image and use of each of the following types of surgical instruments....
Surgical Instruments: insert an image and use of each of the following types of surgical instruments. Identify any of the following parts present on each instrument by labeling the instrument: box lock, spring handle, ratchets, serrations, cutting edge, and teeth. Needle holder: Splinter forceps: Standard hemostatic forceps:   Suture scissors: Operating scissors: Thumb forceps: Scalpel: Bandage scissors: Sponge forceps: Used to hold sponges. Tissue forceps: Mosquito hemostatic forceps
-Insert an h2; you decide the content. -Below your headings put an image of you and...
-Insert an h2; you decide the content. -Below your headings put an image of you and an image of your pet or favorite animal. -Use a function to swap the positions of the images when the mouse is over either image. (Call the same function in the onmouseover event handler for both images. The function will load images in the appropriate positions.) -Swap the images back to their original positions when the mouse is moved off of the images (Use...
When would using an image be unnecessary?
When would using an image be unnecessary? Give an example. answer should be in complete sentences and  200--500 words long. ------------------------------ When would you use graphic organizers (such as maps, charts, lists, or graphs) in your writing? Give an example. answer should be in complete sentences and  200--500 words long.
Using Matlab 1. Create a color image of size 200 × 200. The image should have...
Using Matlab 1. Create a color image of size 200 × 200. The image should have a blue background. 2. Create 100 yellow regions within the image that have a variable size. More specifically, their width should be an odd number and vary between 3 and 7 and their height should also be an odd number and vary between 3 and 7. For example, you may get rectangular regions of size 3 × 3, 3 × 5, 5 × 3,...
Write the methods that insert and remove an element at the kth position in Java using...
Write the methods that insert and remove an element at the kth position in Java using recursion (NOT iteration) (Hint for the remove method: we have to recursive position -1 times, and each time we do the recursion, we have to create a method to move the head to the right) public void insertRecursive(int position, int data) { //enter code here } public int removeAtRecursive(int position) { //enter code here } Here is the given class for the Node: public...
pros and cons of using a drain rooter with live image with handheld screen or using...
pros and cons of using a drain rooter with live image with handheld screen or using a drain rooter device with smartphone.
Produce an equivalent proposition without implications (">") and without not's ("-") using DeMorgan's Laws and the...
Produce an equivalent proposition without implications (">") and without not's ("-") using DeMorgan's Laws and the implication rule. -Ǝ x Ǝy ∀z [ [ ( -X>Z ) > (Z > -Y)] + -(Y + Z )]
To become familiar with using the image of one instrument as the object of the next...
To become familiar with using the image of one instrument as the object of the next and tracing rays through a system of multiple instruments. Multiple optics refers to any system of more than one optical instrument through which light passes. Most devices related to optics, such as cameras, microscopes, and telescopes, contain multiple optics systems. In multiple optics, the image of one optical instrument becomes the object of the next one. Thus, in multiple optics problems, you need to...
Your task is to take the below code, and insert comments (using the “%” symbol) next...
Your task is to take the below code, and insert comments (using the “%” symbol) next to each line of code to make sure that you know what every line does. clc clear close all NMax = 100; partialSum = 0; exactAnswer = pi^2; for k=1:NMax partialSum = partialSum + 6/k^2; percentDiff(k) = abs(partialSum - exactAnswer)/exactAnswer*100; end NVector = [1:NMax]; plot(NVector,percentDiff); xlabel('{{Noob}}'); ylabel('% Difference');
Your task is to take the above code, and insert comments (using the “%” symbol) next...
Your task is to take the above code, and insert comments (using the “%” symbol) next to each line of code to make sure that you know what every line does. close all; clear all; clc; thetaAB = 0; angleIncrement = 0.1; numOfLoops = 360/angleIncrement; thetaABVector = [angleIncrement:angleIncrement:360]; rAB = 5; rBC = 8; for i=1:numOfLoops bothResults = SliderCrankPosn(rAB,rBC,thetaAB); rAC(i) = bothResults(1); thetaBC(i) = bothResults(2); thetaAB = thetaAB+angleIncrement; end subplot(2,1,1) plot(thetaABVector,thetaBC,'Linewidth',3); xlabel('\theta_{AB} [degrees]'); ylabel('\theta_{BC} [degrees]'); xlim([0 360]); ylim([300 400]); grid...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT