JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<ul id="navigation" data-img="default.jpg">
    <li><a data-img="home.jpg" href="index.html">HOME</a></li>
    <li><a data-img="accommodation.jpg" href="accomodations.html">ACCOMODATIONS</a></li>
    <li><a data-img="services.jpg" href="services.html">SERVICES</a></li>
    <li><a data-img="meeting.jpg" href="meetings-dining.html">MEETINGS &amp; DINING</a></li>
    <li><a data-img="attraction.jpg" href="things-to-do.html">LOCAL ATTRACTIONS</a></li>
    <li><a data-img="location.jpg" href="location.html">LOCATION</a></li>
    <li><a data-img="contact.jpg" href="contact-us.html">CONTACT US</a></li>
</ul>

<div id="imageHolder">default.jpg</div>
<!-- <img id="imageHolder"src="default.jpg" /> -->

CSS

#navigation { list-style-type: none; padding: 0px; margin: 0px; float:left; margin-right: 10px; font-family: sans-serif; }
#navigation  li a { text-decoration:none;  color: white; display:block; width: 250px; height: 39px; background-color: #6280E2; line-height: 39px; padding-left: 10px; border-bottom: 1px solid #556FBA; }
#navigation  li a:hover { }
#imageHolder { float:left; border: 1px solid #6280E2; padding:10px; width: 280px; height: 260px; }

JavaScript

$('#navigation a ').hover(
    function() {
        //set the src of the image
        $('#imageHolder').html($(this).data('img'));
        //$('#imageHolder').attr('src', $(this).data('img'));
    },
    function() {
        //revert the src back to a default
        $('#imageHolder').html($('#navigation').data('img'));
        //$('#imageHolder').attr('src', $('#navigation').data('img'));
    }
);