Exploring Navigation States with JQuery: Active, Hover, and Inactive

I've been struggling with the code below as it doesn't seem to be working. I had a simpler code before for swapping images, so if there's an easier way to achieve this, I'm open to suggestions.

Just to recap, I'm trying to:

1. Land on home page > No selection in nav 2. Hover over - image switches to selected state 3. Click on image swaps to selected state

Thanks for any assistance!

Another issue I'm facing is that the images provided by the artist include text within the image itself. So, I have two different versions of each image - one in active state with text and another in inactive state with text. This makes it difficult to place text above the image.

Jquery

var menu = {
init: function () {

    $('.nav-image').hover(function () {
        if (!$(this).attr('id') != menu._selectedId + '-nav' && $(this).attr('src').indexOf("_on.png") == -1) {
            var src = $(this).attr('src').replace("_off.png", "_on.png");
            $(this).attr('src', src);
        }
    },

        function () {

            if ((page == "index" && $(this).attr('id') != "index-nav") || (page == "about" && $(this).attr('id') != "about-nav") || (page == "portfolio" && $(this).attr('id') != "portfolio-nav") || (page == "blog" && $(this).attr('id') != "blog-nav") || (page == "contact" && $(this).attr('id') != "contact-nav") || page == "index") {
                if (!$(this).attr('id') != menu._selectedId + '-nav' && $(this).attr('src').indexOf("_on.png") >= 0) {
                    var src = $(this).attr('src').replace("_on.png", "_off.png");
                    $(this).attr('src', src);
                }
            }
        });

}}

HTML

<div class="menu">
    <div style="float: left; hieght: 45px; width: 193px;"><img src="images/nav/left_end.png" class="nav-image"></div>
    <div style="float: left; height: 45px; width: 73px;"><a href="index.php"><img src="images/nav/home_off.png" class="nav-image" id="index-nav"></a></div>
    <div style="float: left; height: 45px; width: 80px;"><a href="about.php"><img src="images/nav/about_off.png" class="nav-image" id="about-nav"></a></div>
    <div style="float: left; height: 45px; width: 112px;"><a href="portfolio.php"><img src="images/nav/portfolio_off.png" class="nav-image" id="portfolio-nav"></a></div>
    <div style="float: left; height: 45px; width: 69px;"><a href="http://info.arkmediainc.com/blog"><img src="images/nav/blog_off.png" class="nav-image" id="blog-nav"></a></div>
    <div style="float: left; height: 45px; width: 98px;"><a href="http://info.arkmediainc.com/contact-us"><img src="images/nav/contact_off.png" class="nav-image" id="contact-nav"></a></div>
    <div style="float: left; height: 45px; width: 35px;"><img src="images/nav/right_end.png"></div>
</div>
jquerycssmenuhover

Answer №1

One way to achieve this is by using CSS.

Consider setting each div as a background image for a menu item, allowing you to display text over it effortlessly.

You can then implement code similar to the one in this example.

This approach can help keep your code neat and organized. Here's an example for each link:

<div class="nav home"><a href="index.php">Home</a></div>

<script>
jQuery('.nav').click(function() {
    jQuery(this).css("background-image",jQuery(this).css("background-image").replace("on","clicked");
});
<script>

<style>
.nav {
    float: left; 
    height: 45px; 
    width: 73px;;
}

.home {
    background-image: url("images/nav/home_off.png");
    }

.home:hover {
    background-image: url("images/nav/home_on.png");
    }

</style>

Answer №2

In my opinion, a more streamlined approach would be to utilize CSS background-images for two designated classes and then simply switch between the classes on the respective elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some ways to add border styles to the Material UI TableRow Component?

In my project, I am utilizing the Table component from Material UI. I have been trying to apply border styles to the TableRow Component using scss classNames for styling purposes. Usually, the border styling is applied in the TableCell, but this doesn&apos ...

cssreactjsmaterial-ui

Conflict between iOS 7+ swipe back gesture and stateChange animations

When transitioning between states in an AngularJS application, I utilize CSS animations to add visual appeal to the view change. This may involve applying fades or transforms using classes like .ng-enter and .ng-leave. In iOS 7+, users can swipe their fin ...

javascriptjqueryioscssangularjs

Hide the div in PHP if the active variable is null

It looks like I'll need to implement Jquery for this task. I have a print button that should only appear if my array contains data. This is a simplified version of what I'm aiming to achieve: HTML <?include 'anotherpage.php'?> ...

javascriptphpjqueryhtml

Converting Scalable Vector Graphics to Hypertext Markup Language and

So I've got this SVG file called 7.svg. What's the best way to show this image using HTML or CSS on my index.html page? ...

htmlcsssvg

Unable to create a post request using jQuery with a JSON payload

When using the Chrome REST service, I successfully make a post request to a specific URL by sending a JSON string in the body and setting the content type as application/json. However, when trying to achieve the same with jQuery, I encounter some issues. ...

javascriptjqueryajaxjson

Displaying a webpage within a div section of another webpage by referencing it from a separate webpage

If I have three html pages named index.html, page1.html, and page2.html. Imagine that I am currently on page2.html and there is a list of items, each linking to different pages. Let's say one item links to page1.html. Is it feasible to load page1.ht ...

javascriptjqueryhtml

Dynamic stacking of buttons in response to user navigation choices

Is it possible to create a navigation bar with 5 buttons using CSS and JS? Here is what I am looking to achieve: Display 5 nav/button options When a user clicks on a button, the other buttons should transition or hide, leaving only the selected button vi ...

javascripthtmlcss

Comparing AJAX to a source script request

As I was exploring the Google API today, I came across their sample code where they simply request a URL using: <script src="src="https://www.googleapis.com/customsearch/v1?key=AIzaSyCVAXiUzRYsML1Pv6RwSG1.."></script> Before seeing this, I ha ...

javascriptjqueryajax

jquery, slideToggle not behaving correctly on mouse hover

Whenever the mouse hovers over my div with the class .frame, I slideToggle a div with the class .content. And when the mouse leaves .frame, I toggle .content back again. Everything seems to be working fine except for two issues: the effect gets messed up i ...

javascriptjqueryhtmlcssslidetoggle

How can I vertically align a photo or image on Facebook?

Can anyone explain how Facebook manages to vertically align its photos without using padding or margins? I've looked into their img tag and its parent, but neither seem to have any spacing properties. Although there is a vertical-align attribute prese ...

javascripthtmlcssfacebookvertical-alignment

Problem with CSS dotted borders appearing as dashed in Chrome when applied to adjacent columns in a table

After testing the code on both Chrome and Firefox browsers, I noticed that they display the border differently. In Chrome, there is a dash in between adjacent cells while in Firefox, there are no dashes rendering. Can anyone suggest a solution to fix thi ...

htmlcssfirefoxgoogle-chromeborder

The identical function necessitated a particular course of action

I am encountering an issue with a loop that contains multiple content divs each with a hidden div and a "more" button. When I click the "more" button, it is currently displaying all hidden divs in every content div rather than just the specific one. The c ...

jquery

Tips on presenting messages to users after clicking the submit button?

I am trying to extract data from a table. I am unsure if my current code is able to retrieve the value from the table. <script> function validateForm() { var x = document.forms["assessmentForm"]["perf_rating11"].value; var y = document.f ...

javascriptphpjqueryhtmlcss

I'm encountering some strange blank white space when I view my webpage on a phone or Safari. It seems to be affecting the CSS grid and flexbox of images

Currently, I am engaged in a 180-day challenge to create webpages on . For website number 9, the task at hand is to showcase 8 images in a grid layout. Surprisingly, this layout appears flawlessly on my Mac when using Chrome but encounters issues displayin ...

htmlcssflexbox

The HTML elements may have identical heights, but visually, one appears larger than the other

The size of the "login to enter chat" button seems to be larger than the messageBox div, despite adjusting padding and margins. What could be causing this issue? Any suggestions on how to fix this design glitch? #chatbox { width: 500px; height: ...

htmlcss

Unknown identifier in the onClick function

I want to create a JavaScript function that can show or hide a paragraph when clicking on an arrow. The challenge I'm facing is that I have a list of titles generated in a loop on the server, and each title is accompanied by an arrow. Initially, the c ...

javascriptjqueryhtml

Incorporate jQuery into your MVC view by including Html.BeginForm

Using Ajax, I have info boxes that are loaded by calling a function in my controller and generating the HTML dynamically. Now, I want to implement an edit functionality for these info boxes where the static text will be replaced with a form. I am familiar ...

jqueryhtmlajaxasp.net-mvc

CSS: Position an element based on the size of the screen

I'm currently developing a program that will dynamically resize elements based on the viewer's screen size. The program is being built using JSP/SQL/XHTML/CSS, and I have a couple of queries. Is there a way to select a CSS file by storing the sc ...

cssjspalignment

What is causing the Jquery form submit event to not trigger?

I am attempting to use jQuery to submit a form. I need the form submit event to be triggered when jQuery submits the form. However, the submit event handler is not being called successfully after the form is submitted. Here is the code snippet: <html ...

javascriptjqueryhtml

Design an arrangement using div elements and CSS styling

Creating a layout for a website can be challenging. I am using three div tags - container, left, and right. My goal is to have the left side fixed-width for navigation, while the right side displays dynamic content loaded from a database. However, I'm ...

htmlcssweb