Question

Write an HTML document using rollover effect to change the original image and the styles of the texts (example below). Can use any image.

Computer Science Department Spring 2019 Instructor :

CSC 3332 Spring 2019 Instructor: File D/Courses/CSC3332/Tests/Final%20New/Final-9.html Faculty & Staff Settings - Extensions

0 0
Add a comment Improve this question Transcribed image text
Answer #1

Code -

<html>

<head>

    <style>

        /* css defined  */

        /* normal */

        .rollover {

            display: block;

            width: 400px;

            height: 200px;

            background: url(img1.jpg) no-repeat;

        }

        /*for hover effect (rollover)  */

        .rollover:hover {

            background: url(img2.jpg) no-repeat;

        }

        .comSciText {

            text-align: center;

            font-size: 30px;

        }

        /*for hover effect (rollover)  */

        .comSciText:hover {

            background: pink;

            color: green;

            content: 'CSC 3332';

        }

        .semester {

            font-weight: bold;

            font-size: 20px;

            padding: 20px;

        }

        /*for hover effect (rollover)  */

        .semester:hover {

            font-weight: 100;

            font-size: 20px;

            color: white;

            background: blue;

        }

    </style>

</head>

<body>

    <!-- image added to this -->

    <div style="text-align: -webkit-center;">

        <a class="rollover"></a>

    </div>

    <!-- Computer Science Department text  using mouseout and mouseover-->

    <div class="comSciText" id="txt" onmouseover="document.getElementById('txt').innerHTML='CSC 33323'"

        onmouseout="document.getElementById('txt').innerHTML='Computer Science Deparatment'">

        Computer Science Deparatment

    </div>

    <!-- added semester  -->

    <div>

        <span class="semester">

            Spring 2019

        </span>

        <span style="float: right;">

            Instructor:

        </span>

    </div>

</body>

</html>

img1.jpg -

img2.jpg -

Add a comment
Know the answer?
Add Answer to:
Write an HTML document using rollover effect to change the original image and the styles of...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • And there was a buy-sell arrangement which laid out the conditions under which either shareholder could...

    And there was a buy-sell arrangement which laid out the conditions under which either shareholder could buy out the other. Paul knew that this offer would strengthen his financial picture…but did he really want a partner?It was going to be a long night. read the case study above and answer this question what would you do if you were Paul with regards to financing, and why? ntroductloh Paul McTaggart sat at his desk. Behind him, the computer screen flickered with...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT