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

An easy way to pass props to a component using useNavigate in React Router

Is it possible to send props directly to a component in React? const goToProjectPage = useNavigate(); useEffect(()=>{ ..... goToProjectPage("/projectpage"); //send props here },[]); ...

javascriptreactjsreact-router

When the screen is resized, the embedded iframe moves smoothly to the left side

I recently created a projects page, but I am facing an issue with the iframe embed. Whenever the screen is resized, it keeps shifting to the left. However, what I really want is for it to be centered instead of being on the left side: https://i.stack.imgu ...

htmlcssfonts

What is the best way to toggle the visibility of a div when a button is clicked?

I have a container with a registration wizard, and I want to toggle the visibility of this container when a button is clicked. How can I achieve this? Check out the code snippet below. Thank you :) <div id="wizard" class="swMain"> <ul> ...

htmlbuttonhideshow

Creating a custom image component in React that is capable of rendering multiple images

Apologies for my poor English, as I am fairly new to React (just started learning yesterday). I am interested in learning how to render a variable number of images. For example, if I specify the number of images with an array containing file names, I want ...

javascriptreactjsweb

Begin counting starting from 1 all the way up to 24, then feel free

I've developed a counter that increments from 0 to 24, and once it reaches 24: setInterval(function(){DayAndNight()}, 1000); var iState = 12; function DayAndNight() { //console.log('test'); switch(iState) ...

javascriptjqueryhtml

Unable to deploy Firebase functions following the addition of an NPM package

Scenario: I recently tried integrating Taiko into my Firebase web application, similar to Puppeteer. It's worth mentioning that Taiko downloads Chromium for its operations. Challenge: Ever since then, none of my functions are deploying successfully. ...

javascriptnode.jsfirebasenpmgoogle-cloud-functions

Loop through every item in Typescript

I am currently working with the following data structure: product: { id: "id1", title: "ProductName 1", additionalDetails: { o1: { id: "pp1", label: "Text", content: [{ id: "ppp1", label: "Tetetet" ...

javascriptarraystypescriptobjectforeach

Showcasing pictures on ReactJS

I am currently working on developing an application to showcase images on my React webpage. These images have already been uploaded to a local folder. In order to integrate my React application with a NodeJS server and MongoDB, I connected the two. My goa ...

javascriptnode.jsimagereactjs

What could be causing the readTextFile function to return undefined?

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; function readFile(file) { let fileContents = new XMLHttpRequest(); fileContents.open("GET", file, false); fileContents.onreadystatechange = function () { ...

javascriptnode.jsxmlhttprequesttxt

Utilizing Vue.js: Dynamically Rendering Components Based on Routes

I needed to hide some components for specific Routes, and I was able to achieve this by using a watcher for route changes that I found in this StackOverflow question - Vuejs: Event on route change. My goal was to not display the header and sidebar on the c ...

javascriptvue.js

Creating a straightforward text/logo design for your HTML website?

After creating a standard website using HTML and PHP, I am now looking to add an exciting text/logo effect for when users first visit the site. Essentially, I want the logo to break apart and transition into loading the homepage once a user lands on the si ...

jqueryhtmlflash

The AJAX response consistently returns a 405 status code

I am experiencing an issue with an AJAX post request. $.ajax({ type: "POST", contentType: "application/json", url: "/rating/save", data: JSON.stringify(rating), dataType: "json", mimeType: "application/json" ...

javascriptjavaajaxspringspring-mvc

Error: JSONP Label Validation Failed

My JSON URL is: The above URL returns the following JSON: { token: "2cd3e37b-5d61-4070-96d5-3dfce0d0acd9%a00a5e34-b017-4899-8171-299781c48c72" } Edit: Changed it to {"token": "2cd3e37b-5d61-4070-96d5-3dfce0d0acd9%a00a5e34-b017-4899-8171-299781c48c72"} ...

javascriptjqueryajaxjsoncross-domain

Incorrect footer navigation on my Vuepress website

I'm in the process of developing a vuepress single page application for showcasing and providing downloads of my personal game projects. When it comes to website navigation, I am aiming to utilize the native sidebar exclusively. This sidebar will hav ...

javascriptvue.jsvuepress

Retrieving Data Entries from a MySQL Database with AJAX, PHP, and JSON

I'm facing a challenge with my AJAX/PHP implementation and would greatly appreciate any assistance in identifying the error(s) I might be making. Below is a snippet from my initial file that effectively populates the select element in the HTML: < ...

phpjquerymysqljsonajax

Is it possible to remove an element from a data structure in a web application using an HTTP command?

Apologies for the confusing title, I struggled to find a better way to describe it. Imagine sending a GET request to an API and receiving this data: { {id: 1, name: "John Doe", tags: ["Apple", "Orange", "Pear"]}, {id: 2, name: "Jane Doe", tags: [ ...

javascriptarraysajaxobjectxmlhttprequest

javascript implement a process to iteratively submit a form using ajax

I have a dynamic form with an unknown number of input fields that are not fixed. While searching for solutions, I came across jQuery ajax form submission which requires manually constructing the query string. In this scenario, the number of input fields ...

javascriptjqueryajax

Please view the file by accessing exclusively mydomain_name/filename.html

I am looking for a way to block access to specific URLs on my domain and redirect them to another page. The user should still see the original URL in the address bar, and all styles and scripts need to function properly. Can someone help me achieve this? ...

phphtml.htaccess

How to arrange data in angular/typescript in either ascending or descending order based on object key

Hey there! I'm fairly new to Angular and have been working on developing a COVID-19 app using Angular. This app consists of two main components - the State component and the District component. The State component displays a table listing all states, ...

javascriptangularreactjstypescriptsorting

The ajax code is failing to retrieve the data from the table and populate it in the

hi guys i have an issue on ajax. where ajax can't work to take the data of second rows. This's code in model function getdtbarang($barcode = FALSE) { if ($barcode === FALSE) { $query = $this->db1->get(&a ...

javascriptphpajax