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

How to implement pagination for JSON response data

The AJAX .load() function will fail to retrieve any content

The Material UI Checkbox is displaying duplicate values within a single instance

Using JavaScript to develop a demonstration of the capabilities of Microsoft's Cognitive

What is the best way to determine which user is currently logged in to a Linux system?

Guide to displaying xmlhttpresponse in an image format

Unable to find component: "wrestler-choice-box". If this is a built-in custom element, please ensure it is not included in component resolution

Google Bar Graphs Cannot Display Decimal Values

Determine the overall sum of rows present within this particular tbody section

Issue with the recursive function in javascript for object modification

What is the best way to show distinct items and their frequencies from an array of objects in Vue.js/JavaScript?

The header that sticks on scroll is annoyingly blocking the content

Verifying X-editable input in Laravel (Server-side)

Methods for identifying Flash and guiding the user through installation

Methods for delivering static resources on multiple routes in Express JS

Examples of merging responsive design and equal height columns in CSS:

An issue arises when trying to loop using a while loop within an HTML structure

"Using JavaScript to toggle a radio button and display specific form fields according to the selected

Utilizing the power of JavaScript, CSS, and HTML to seamlessly transfer selected items from one webpage to the shopping cart displayed on another page

HTML5 allows users to choose data from a list using a ComboBox and submit the 3-digit code