Hovers and click effects for navigating through images

The website I'm currently working on is stipz.50webs.com.

p.s. HOME functionality is not active at the moment.

Having successfully implemented the onhover and onmouseout features, my next goal is to enhance the navigation effects for each div/img so that users can easily identify which one is clicked or active.

I aim to change the src and behavior of a div/img when it becomes active, but this requires resetting the other elements back to their default state. Is there a way to handle multiple declarations on different div ids within a single function?

If it's possible, I believe I can come up with a solution through code.

Currently focusing on:

$('#orgn').click("mouseenter", function() {
$(this).attr('src', 'elements/mp_onhover/origin_on.png');
}).on("mouseleave", function() {
$(this).attr('src', "elements/mp_onhover/origin_off.png");
});

Edit: Despite my efforts, I find myself struggling with this issue as a coder. I attempted to create a jsfiddle, but encountered some issues with its functionality View jsfiddle link here For an alternative link: Visit http://stipz.50webs.com/div_navigation.html

In my attempt to solve this problem, I experimented with adding/removing classes onClick for each div element

$("#div-origin").click( function () { $(this).addClass("ori-active"); }, function () { $(this).removeClass("ori-active"); } );
javascriptjqueryhtmlcssimage

Answer №1

Using only CSS, I believe we can achieve this. Take a look at this example

With some basic CSS, we can make it happen.

.link:link{
  text-decoration:none;
  display:block;
  width:100px;
  height:100px;
  border:1px solid #666;
  background-color:red;
}

.link:hover{
  background-color:green; 
}
.link:visited{
  background-color:blue;
}

I adjusted the color in the fiddle to avoid uploading an image. Feel free to customize the background image there without using jQuery.

PS: Noticed you used img inside a, consider removing img and setting a background image for a.

Answer №2

The code provided meets your requirements and focuses on the two specified links. Take a look at the following HTML and JavaScript snippet:

 <html>
    <head>
    <title></title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
    <style type="text/css">
    ul li{
      list-style-type: none;
    }
    
    ul li a{
      text-decoration: none;
      font-size: 20px;
      display: block;
      color: black;
    
    }
    
    .classOne{
      text-shadow:2px 2px 1px green;
    }
    
    </style>
    
    </head>
    <body>
    
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">CHARACTERS</a></li>
    </ul>
    
    <!-- js--> 
    <script type="text/javascript">
     $(document).ready(function(){
        $("ul li a").mouseenter(function(){
          $(this).addClass("classOne");
          });
        $("ul li a").mouseleave(function(){
          $(this).removeClass("classOne");
        });
     });
    </script>
     
    </body>
    </html>

Feel free to make any necessary modifications as per your specific needs.

Answer №3

After spending some time on coding, I finally nailed the navigation effect that I was aiming for.

To check out the live webpage with the updated navigation feature, click HERE

$(document).ready(function() 
{
$('.do').hover(
  function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
  function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});
$('.dp').hover(
  function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
  function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});
$('.da').hover(
  function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
  function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');});
$('.dc').hover(
  function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
  function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');});   
$('.do').click(function() 
 {
  $('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)');
  $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');
  $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');
  $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');
 $('.do').hover(
   function() {$('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)');},
   function() {$('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)');});
   $('.dp').hover(
   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});
 $('.da').hover(
   function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
   function() {$('.da').css('background-image', 'url(elements/mp_onhovern/m_affil.png)');});
    $('.dc').hover(
   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); 
});
$('.dp').click(function() 
 {
  $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');
  $('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');
  $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');
  $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');
 $('.do').hover(
   function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
   function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});
   $('.dp').hover(
   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');},
   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');});
 $('.da').hover(
   function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
   function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');});
    $('.dc').hover(
   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); 
});
$('.da').click(function() 
 {
  $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');
  $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');
  $('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');
  $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');
 $('.do').hover(
   function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
   function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});
   $('.dp').hover(
   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});
 $('.da').hover(
   function() {$('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');},
   function() {$('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');});
    $('.dc').hover(
   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); 
});
$('.dc').click(function() 
{
 $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');
 $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');
 $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');
 $('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');
$('.do').hover(
  function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
  function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});
$('.dp').hover(
   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
  function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});
    $('.da').hover(
  function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
  function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');});
$('.dc').hover(
  function() {$('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');},
  function() {$('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');}); 
});
});

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

$.ajax causing a JSON input string malfunction

My web API requires the following JSON format for input: [{ "atrSpaUserId": "47fe8af8-0435-401e-9ac2-1586c8d169fe", "atrSpaClassLegendId": "00D18EECC47E7DF44200011302", "atrSpaCityDistrictId": "144d0d78-c8eb-48a7-9afb-fceddd55622c"}, { "atrSpaUserId": "47 ...

javascriptjqueryjsonajax

The issue with Google Maps API not loading is being caused by a problem with the function window.handleApiReady not being

Having trouble with the Google Maps API, specifically encountering an error during page load that says window.handleApiReady is not a function, even though it definitely exists. Examining the code snippet below reveals its usage as a callback function: ...

javascriptgoogle-mapsgoogle-maps-api-3

Looking to merge two components into one single form using Angular?

I am currently developing an Angular application with a dynamic form feature. The data for the dynamic form is loaded through JSON, which is divided into two parts: part 1 and part 2. // JSON Data Part 1 jsonDataPart1: any = [ { "e ...

javascriptjsonangulartypescriptangular-reactive-forms

Tips for saving the circular slider value to a variable and showcasing it in the console

I have coded a round slider and need assistance with storing the slider value in a variable and displaying it in the console using JavaScript. I want to store the tooltip value in a variable for future use. $("#slider").roundSlider({ radius: 180, min ...

javascripthtmlcssconsoleround-slider

jQuery Popup Button - Maintain the Current Design

I'm currently working with a jQuery dialog and trying to make one of the buttons appear and function as a default button, while still keeping focus on form elements. I managed to achieve this using the code below. However, I encountered an issue where ...

jquerybuttondialogdefault

Tips for confirming date is earlier than current date in Reactjs?

Looking for guidance on how to ensure a date selected by a user is always before the current date when using Material UI in my project. For instance, if it's January 6th, 2021 and the user selects either January 5th or 6th that would be acceptable. Ho ...

javascriptreactjsecmascript-6material-uifrontend

Tips for establishing and connecting numerous connections among current nodes using the same criteria

While browsing StackOverflow, I came across similar questions. However, I believe this one has a unique twist. The main issue at hand is: How can I establish multiple relationships between existing nodes? I have the following code snippet: session . ...

javascriptnode.jsmongodbneo4jcypher

What is the recommended approach for running a Node.js application in a production environment on a Windows operating system?

I am currently working on a Node.js application that needs to run on a Windows Server. During development, we usually start the app by running a command in either the command-line or PowerShell: node index.js What is the most efficient and recommended way ...

javascriptnode.jspowershellexpresswindows-server

Dynamically importing files in Vue.js is an efficient way to

Here's the code snippet that is functioning correctly for me var Index = require('./theme/dir1/index.vue'); However, I would like to utilize it in this way instead, var path = './theme/'+variable+'/index.vue'; var Inde ...

javascriptreactjsmeteorvue.jsvuejs2

There was a SyntaxError that caught me by surprise in my Javascript code when it unexpectedly encountered

I have been encountering an error in my code consistently, and I am struggling to comprehend why this is happening. The problematic area seems to be in line 29 of my Javascript file. HTML <link href="Styles12.css"; type="text/css" rel="stylesheet"> ...

javascripthtml

What is the best way to show an array object from PHP to AJAX in JavaScript?

I am facing an issue with a function that returns an array object from PHP using MySQL. I need to call this array in an AJAX function using JavaScript, but I am unsure of how to display the PHP array object in a dynamic table or console log. Here is my PH ...

javascriptphpjqueryajaxfunction

The expect.objectContaining() function in Jest does not work properly when used in expect.toHaveBeenCalled()

Currently, I am working on writing a test to validate code that interacts with AWS DynamoDB using aws-sdk. Despite following a similar scenario outlined in the official documentation (https://jestjs.io/docs/en/expect#expectobjectcontainingobject), my asser ...

javascriptnode.jstypescriptjestjs

Load information from several folders into a dropdown menu, dynamically updating the options based on the selected folder using AJAX and JSP

As a newcomer to AJAX, I have a specific requirement to populate data in a dropdown menu. I have two dropdowns - the first one should display the names of folders stored locally on our system, each containing different kinds of files. My task is to dynami ...

javascriptjavajqueryajaxjsp

tips for sending an array from an HTML page to a PHP server via AJAX

I am having issues passing an array using jQuery with AJAX and back, but my code isn't functioning correctly. I've tried making changes multiple times, but it's still not working. Can someone please advise me on what to do? I suspect that my ...

phpjqueryajaxarrays

Sending a document through the input field with React Hook Form

In my application, I have implemented a file input to submit a file and send it to a firebase storage bucket. To achieve this functionality, I am utilizing the react-hook-form library. However, I encountered an issue - I wanted the file to be uploaded with ...

javascriptreactjsformsinputnext.js

Discreet elements are not functioning

It's frustrating that everything in the 'wrapper' won't stretch to fit properly, instead staying at a fixed height. I'm trying to make the 'sidebar' and 'content' inside the area have the same height at all time ...

htmlcss

How to trigger an Angular JS route without loading a view

Could someone help me with calling the /auth/logout url to get redirected after a session is deleted? app.config(['$routeProvider',function($routeProvider) { $routeProvider .when('/auth/logout',{ controller:'AuthLo ...

javascriptangularjscontrollersroute-provider

Troubleshooting Problems with Deploying Next Js on Firebase

I am currently working on a new Next Js application and have successfully deployed it on Vercel by linking the GitLab project. Now, I need to deploy the same project on Firebase. Here's what I have tried so far: - Ran firebase init This command gen ...

javascriptreactjsfirebasenext.jsserver-side-rendering

Imposing the situation

In my current class, I have a private property and a public method for access: Person = function () { this.Name = "asd"; var _public = new Object(); _public.Name = function (value) { if (value == undefined) { //Get return ...

javascriptjqueryscopethis

nyroModal automatically adapts its dimensions according to the size of the webpage, not the size of

A situation has arisen with a link that opens an image using nyroModal. While everything is functioning correctly, the Modal window appears in the center of the page instead of aligning with the middle of the browser window. As a result, only the upper por ...

javascriptjqueryhtmlcssnyromodal