1 Message
•
70 Points
Making content appear when mouse hovers over image or chart
I have a charity client whch wanted to create a chart that provided additional information about sponsorship opportunities at their car show fundraiser when visitors to the website hovered their mouse over a category of interest. Homestead said they didn't have a widget to help with the challenge, so I worked for hours and finally came up with the HTML code that did the trick and I thought I would share it with everyone. Believe it or not, I found a basic HTML code for starters, and used ChatGPT to help me modify the colors, sizes and look I was seeking! Here is the link to the page plus the HTML code.
https://copsncarsforkids.com/sponsor-page-redesign-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Event Sponsorship Levels</title>
<style>
*{box-sizing:border-box}
body{margin:30px;font-family:Segoe UI,Arial,sans-serif;background:#f4f7fb}
.wrapper{margin:0 auto;}
h1{color:#003b7a;text-align:center;margin-gap:30px;align-items:flex-start}
.tab{background:#0057c2;padding:18px;border-radius:10px}
.tab button{
;margin:0 0 8px;padding:8px 12px;
font-size:20px;text-align:left;color:#fff;background:#0b69db;
border:none;border-radius:6px;cursor:pointer;white-space:nowrap}
.tab button:hover,.tab button.active{background:#003f8a}
.panel{background:#0057c2;padding:18px;border-radius:10px}
.tabcontent{;background:#fff;padding:18px;border-radius:6px}
.tabcontent h3{margin-color:#003f8a}
</style>
</head>
<body>
<div class="wrapper">
<h1>Event Sponsorship Levels</h1>
<div class="container">
<div class="tab">
<button class="tablinks" "showInfo(event,'presenting')">Presenting Level $5,000</button>
<button class="tablinks" "showInfo(event,'chief')">Chief Level $4,000</button>
<button class="tablinks" "showInfo(event,'captain')">Captain Level $2,500</button>
<button class="tablinks" "showInfo(event,'lieutenant')">Lieutenant Level $1,000</button>
<button class="tablinks" "showInfo(event,'sergeant')">Sergeant Level $500</button>
</div>
<div class="panel">
<div id="presenting" class="tabcontent">
<h3>Presenting Level $5,000</h3>
<p>10X10 booth; 18' feather advertising flag; logo on car show T-shirt; your branded items in goodie bag; verbal recognition by DJ during show; logo on sponsor sign at all events; premium booth location; wrapped or custom vehicle; logo inclusion on web, digital and printed media; choose and present the "Presenting Level's Choice" trophy; optional additional 10X10 booth; meal tickets; snack pack.</p>
</div>
<div id="chief" class="tabcontent">
<h3>Chief Level $4,000</h3>
<p>10X10 booth; 14' feather advertising flag; logo on car show T-shirt; branded items in goodie bag; verbal recognition by DJ during show; logo on sponsor sign at all events; wrapped or custom vehicle; logo inclusion on web; choose and present the "Chief Level's Choice" trophy; optional additional 10X10 booth; meal tickets; snack pack.</p>
</div>
<div id="captain" class="tabcontent">
<h3>Captain Level $2,500</h3>
<p>10X10 booth; 10.5' feather advertising flag; logo on car show T-shirt; your branded items in goodie bag; verbal recognition by DJ during show; wrapped or custom vehicle; logo inclusion on web, digital and printed media; optional additional 10X10 booth; meal tickets; snack pack.</p>
</div>
<div id="lieutenant" class="tabcontent">
<h3>Lieutenant Level $1,000</h3>
<p>10X10 booth; 9' feather advertising flag; logo on car show T-shirt; your branded items in goodie bag; verbal recognition by DJ during show; wrapped or custom vehicle; logo inclusion on web, digital and printed media; snack pack.</p>
</div>
<div id="sergeant" class="tabcontent">
<h3>Sergeant Level $500</h3>
<p>10X10 booth; logo on car show T-shirt; your branded items in goodie bag; wrapped or custom vehicle; logo inclusion on web, digital and printed media; snack pack.</p>
</div>
</div>
</div>
<script>
function showInfo(evt,id){
document.querySelectorAll('.tabcontent').forEach(d=>d.style.display='none');
document.querySelectorAll('.tab button').forEach(b=>b.classList.remove('active'));
document.getElementById(id).style.display='block';
evt.currentTarget.classList.add('active');
}
document.querySelector('.tab button').dispatchEvent(new MouseEvent('mouseover'));
</script>
</div>
</body>
</html>
No Responses!