Adjust the transparency of a separate image within a different container by hovering over another image container

Question

Adjust the transparency of a separate image within a different container by hovering over another image container

Is my goal too complex to achieve? I am attempting to create a hover effect where the opacity of artwork1 and button1 changes simultaneously when hovered over. However, I am having trouble properly labeling my elements and getting them to interact as intended. Below is the code snippet explaining my issue:

<html> <body> <div id="buttons">

<a href="..." id="button1"><img src="..." class="spaced"(to spaced the buttons)></a>
<a href="..." id="button2"><img src="..." class="spaced"></a>

<div id="artwork">

<a href="..." id="artwork1"><img src="..." class="mainbuttons & greydout"</a>
<a href="..." id="artwork2"><img src="..." class="mainbuttons & greydout"></a>

I have tried using JavaScript to achieve this effect, however, I am encountering issues with other scripts running on the page possibly causing conflicts. Additionally, I have attempted using CSS but have not been successful in achieving the desired interaction between the divs. Any assistance or advice would be greatly appreciated. Thank you for taking the time to read through my explanation.

javascript jquery css hover

Answer 1

Answer №1

Consider implementing the following approach.

Assign a class to both your buttons (galleryButtons) and images within the other div.

You can actually skip the wrapping with the a tag altogether. Instead, add classes to your button elements and artwork.

<div id="buttons">
    <img id="gbutton1" class="galleryButtons" src="button.png" />
    <img id="gbutton2" class="galleryButtons" src="button.png" />

<div id="artwork">
    <img id="artwork1" class="artworkImage" src="art1.jpg" />
    <img id="artwork2" class="artworkImage" src="art2.jpg" />

$(document).ready(function () {
    var intID;
    $(".galleryButtons").hover(function (e) {
        console.log(e.target.id);
        var id = e.target.id;
        intID = id.replace(/^\D+/g, '');
        $("#artwork" + intID).addClass("opac_art");
    }, function () {
        $("#artwork" + intID).removeClass("opac_art").addClass("greydout");

    });
    $(".artworkImage").hover(function (e) {
        var id = e.target.id;
        intID = id.replace(/^\D+/g, '');
        $("#gbutton" + intID).addClass("opac_art");
    }, function () {
        $("#gbutton" + intID).removeClass("opac_art").addClass("greydout");

    });
});

View the full example in a fiddle: http://jsfiddle.net/djwave28/et6tD/4/

Simplifying this can involve more efficient selection methods, but for the purpose of demonstrating the relationship between elements, this setup is beneficial. When hovering over an element, the event triggered contains valuable information such as e.target.id which captures the id of the specific element. http://www.w3schools.com/jsref/dom_obj_event.asp

Answer 2

Consider implementing the following approach.

Assign a class to both your buttons (galleryButtons) and images within the other div.

You can actually skip the wrapping with the a tag altogether. Instead, add classes to your button elements and artwork.

<div id="buttons">
    <img id="gbutton1" class="galleryButtons" src="button.png" />
    <img id="gbutton2" class="galleryButtons" src="button.png" />

<div id="artwork">
    <img id="artwork1" class="artworkImage" src="art1.jpg" />
    <img id="artwork2" class="artworkImage" src="art2.jpg" />

$(document).ready(function () {
    var intID;
    $(".galleryButtons").hover(function (e) {
        console.log(e.target.id);
        var id = e.target.id;
        intID = id.replace(/^\D+/g, '');
        $("#artwork" + intID).addClass("opac_art");
    }, function () {
        $("#artwork" + intID).removeClass("opac_art").addClass("greydout");

    });
    $(".artworkImage").hover(function (e) {
        var id = e.target.id;
        intID = id.replace(/^\D+/g, '');
        $("#gbutton" + intID).addClass("opac_art");
    }, function () {
        $("#gbutton" + intID).removeClass("opac_art").addClass("greydout");

    });
});

View the full example in a fiddle: http://jsfiddle.net/djwave28/et6tD/4/

Simplifying this can involve more efficient selection methods, but for the purpose of demonstrating the relationship between elements, this setup is beneficial. When hovering over an element, the event triggered contains valuable information such as e.target.id which captures the id of the specific element. http://www.w3schools.com/jsref/dom_obj_event.asp

Answer 3

Answer №2

Based on my interpretation of your query, a possible solution could be as follows:

$(document).ready(function()
{
    $("#one").hover(function()
    {
        // Adjusts the opacity of the first image
        // and its corresponding link from 1 to 0.3.
        $("#artone").css({ "opacity": "0.3" });
        $(this).css({ "opacity": "0.3" });
    });

    $("#two").hover(function()
    {
        $("#arttwo").css({ "opacity": "0.3" });
        $(this).css({ "opacity": "0.3" });
    });
});

The HTML structure would resemble the following:

<div id="links">
    <a href="#" id="one">Link one</a>
    <a href="#" id="two">Link two</a>
</div>
<div id="artwork">
    <img src="" id="artone" class="spaced">
    <img src="" id="arttwo" class="spaced">
</div>

A few additional pointers -

Ensure that you properly include jQuery in the header section of your webpage, as it appears to be missing:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

This script is sourced from Google's CDN, but you can opt for local inclusion if needed.

<a href="#" id="artwork1"><img src="#" class="mainbuttons & greydout"></a>

When assigning multiple classes to an element, separate them using spaces instead of ampersands (&).

<a href="#" id="artwork1"><img src="#" class="mainbuttons greydout"></a>

Answer 4

Based on my interpretation of your query, a possible solution could be as follows:

$(document).ready(function()
{
    $("#one").hover(function()
    {
        // Adjusts the opacity of the first image
        // and its corresponding link from 1 to 0.3.
        $("#artone").css({ "opacity": "0.3" });
        $(this).css({ "opacity": "0.3" });
    });

    $("#two").hover(function()
    {
        $("#arttwo").css({ "opacity": "0.3" });
        $(this).css({ "opacity": "0.3" });
    });
});

The HTML structure would resemble the following:

<div id="links">
    <a href="#" id="one">Link one</a>
    <a href="#" id="two">Link two</a>
</div>
<div id="artwork">
    <img src="" id="artone" class="spaced">
    <img src="" id="arttwo" class="spaced">
</div>

A few additional pointers -

Ensure that you properly include jQuery in the header section of your webpage, as it appears to be missing:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

This script is sourced from Google's CDN, but you can opt for local inclusion if needed.

<a href="#" id="artwork1"><img src="#" class="mainbuttons & greydout"></a>

When assigning multiple classes to an element, separate them using spaces instead of ampersands (&).

<a href="#" id="artwork1"><img src="#" class="mainbuttons greydout"></a>

Adjust the transparency of a separate image within a different container by hovering over another image container

Answer №1

Answer №2

Similar questions

Updating the CSS properties of a specific element within a dynamically generated JavaScript list

The absence of req.body in the app reflects an undefined state

Unable to retrieve post data during AJAX insertion in CodeIgniter

Display elements in an array of objects when the value changes with React

The order of event handlers in jQuery

Unable to locate element in Internet Explorer when using frame switching within Selenium

The Angular application is receiving a 404 error when trying to access the .NET Core

Is it best to stick with a static page size, or

Attempting to trigger a second modal confirmation from within a modal confirmation

Intercepting 401 with Angular 5 HTTP Interceptor recognizes it as status code 0

Tap and hold with Zepto

Embed a stackoverflow.com iframe within a jsbin

The loading animation does not appear in the NextJS 14 - loading.tsx component while a GET request is being processed

Dealing with AJAX errors consistently in jQuery

What is the standard way to write the server-side code for HTTP request and response handling?

Classify the JavaScript objects according to the array of object lists

Remove the javascript file once the modal dialog has been closed

Django Dynamic Field Error: Please choose a valid option from the available choices

Looking for a discreet JavaScript-based text editor with advanced features?

Tips for refreshing Facebook's og tags