CompSci//Media Arts - Web Design: JS & MouseOver, p2

Web Design:
CSS Positioning
+ JS Image Swaps,
part 2

Today's Goal

We're going to finish what we started yesterday.
Today, we're going to tie the mouse over event
to change multiple things on the page.

Completed

Basics of HTML
Basics of MakeCode

Today

Core Languages of the Web
JavaScript to change multiple web page elements

Upcoming

Starting our Semester Project

Part Zero

Typing Practice

Today's typing practice:
https://shaunwegs.github.io/2024/focs/typing/d/10-25.html

Add a screenshot showing your typing practice to your slide

Part Three

Changing Multiple Images

Next, we're going to create a larger image that'll sit behind the others. We'll start with a placeholder, and we'll swap out the image based on which smaller image you've moved your mouse over.

Take this concept, and switch out the larger image for the other two as well.

artists-3.mp4

Part Two

Swapping Images with JS

Lastly, we'll add in a text element, and we'll have this change with mouse over as well.

Again, I'm just going to do it with one, but yours should change for all three.

artists-4.mp4

On Today's Slide

Add a video on your slide showing you were able to complete today's videos. When you mouse over one of the smaller images, multiple things on the page should change; including the small image, the large image, and text.

In my videos, I only showed you with one, but yours should work for all three.

Page updated

Report abuse

Web Design:CSS Positioning + JS Image Swaps,part 2