Trey’s Monster Mash — Unity Edition

An image with a white background does not “float” against a dark background — it produces a white rectangle with a picture inside it. This is one of the most common beginner mistakes in web design, and one of the easiest to fix: find the same artwork as a .png with a transparent background, or use the browser’s CSS mix-blend-mode: multiply to approximate transparency against light backgrounds.

For dark backgrounds, the correct approach is transparent-background PNGs. The local mMashImages/ folder contains four such images — ghost.png, pirateZombie.png, pumpkinHat.png, and bat.png — downloaded specifically for this purpose.

The side-by-side comparison that the Unity toggle makes possible is the most direct way to teach this: students see both versions in the same page, with the same layout, differing only in the src attribute of four images. The flaw is surgical. The fix is surgical. The lesson is precise.

The JavaScript stores the two image source sets as objects (origSrcs and localSrcs), keyed by the element IDs (ghost, zombie, pumpkin, bat). The toggle function then iterates over the IDs with forEach and swaps each image’s src.

This is marginally more code than a flat array of pairs, but it is far more readable: srcs.ghost is self-documenting in a way that srcs[0] is not. When a future developer (or the student) needs to add a fifth image, they add one key to each object and one ID to the forEach array. The structure announces its own pattern.

The brief opacity: 0 fade on each image before the src swap prevents the flash of a missing image (the browser briefly shows a broken-image icon while the new source loads). This is a standard defensive pattern for dynamic image swaps: fade out, swap, fade in.

Trey’s original CSS had this rule:

span {
    font-size: 60px;
    text-shadow: 2px 2px 5px black;
    display: inline-block;
    letter-spacing: 5px;
}

As a standalone page, this was fine: the only span elements on the page were Trey’s letter spans. In the TNT ecosystem, Bootstrap uses span elements everywhere — in the navbar brand, in badges, in utility classes, in icons. A bare span { font-size: 60px } rule would make the navbar brand unreadable and break every Bootstrap component that uses span.

The fix: scope the rule to #treyZone span. All of Trey’s tag-level selectors (h1, main, div.orange, div.purple, span) were moved inside the #treyZone wrapper. Bootstrap and tnt-base-styles are unaffected. Trey’s design is preserved exactly. This is the standard approach for embedding a standalone page inside a larger ecosystem.

The original design was categorized as Styl’n because it was purely HTML and CSS. The Unity Edition uses JavaScript to manipulate the DOM: it reads element IDs, writes to src attributes, toggles a CSS class on the button, and manages a state variable (isLocal) across clicks. This is a JavaScript application, not a styled document.

The distinction matters beyond taxonomy. When students see this page in the JS Apps collection, they understand that JavaScript’s job is not only to compute and calculate — it is also to respond to user actions and change what the page shows. The toggle is a minimal but complete example of event-driven programming: a user gesture (click) causes a state change (isLocal flips) which causes a DOM update (four src swaps) which causes a visual result (the page looks different).

This is precisely the chain every JavaScript app follows, from a simple toggle to a full single-page application. The Monster Mash toggle is a clean introduction to the pattern.

A well-structured HTML document has exactly one <h1>: the page’s primary heading. Subsequent headings use <h2>, <h3>, and so on in order. Screen readers and search engines use this hierarchy to understand the document outline — a second <h1> is ambiguous: which one is actually the title of the page?

The visual appearance of a heading is entirely controlled by CSS. Changing <h1> to <h2> inside #treyZone does not change how the tumbling title looks — it still gets all of Trey’s font, border, and border-radius rules via #treyZone h2 {}. The only thing that changed is the semantic rank.

This is a common issue when embedding a standalone page (which correctly used <h1> as its single heading) inside a larger ecosystem page that already has its own <h1>. The fix is always the same: demote the embedded heading by one level.

When an element is floated, its parent container collapses unless it contains other in-flow content or uses a clearfix. This means:

• Margins on the parent have no visual effect — the box is zero height.
• Margins on the float itself do work — the browser reserves space around the float when wrapping content around it.

margin-right on the pumpkin image pushes the wrapped text (the .orange div to the right of the float) away from the image’s right edge. margin-bottom on the image would push content below the float’s bottom edge. Both are valid; both must be on the img, not on the aside.

The general rule: when you want to control the space around a floated element, apply the CSS to the floated element itself — not to a wrapper around it.

The monster.png icon already appeared in three places: the js_apps.html grid card, the monsterMashSong.html hero heading, and the movie_clips.html card. Adding it to the Unity page and chatlog hero headings completes the visual thread: every Monster Mash page in the TNT collection now shows the same cartoon monster in the same position relative to the title.

This is a minimal but deliberate branding move. A student who arrives at the Unity page from the song clip page will recognise the icon and understand they are in the same family of content without reading any prose. The linking icon says “same universe” at a glance.

The icon is decorative in the accessibility sense — aria-hidden="true" and empty alt — because the heading text already carries the full accessible name. Repeating the description in the alt attribute would cause screen readers to announce “monster Monster Mash”, which is redundant. The icon is a visual signal only; the text is the semantic one.