Utilizing Jquery Effectively to Dynamically Alter Images Based on Ids

HTML Section


    <div class="features-section">
        <div class="container">
            <div class="row">
                <div class="feat-heading text-center">
                    <h3>Features</h3>
                </div>

                <div class="col-md-3">
                    <div class="tabs">
                        <div class="icon-text-block text-center"> 
                            <a onmouseover="imgChange1()" href="#" class="icon-1">
                                <div class="icon-container icon-01" ></div>
                            </a>
                            <div class="text-container text-center">
                                <h5>Manage Registrations</h5>
                                <p>Check attendee list and ticket sales revenue upfront in your dashboard. Offer Discounts and more.</p>
                            </div>
                        </div>

                        ... (Additional similar sections with different icons)

                    </div>

                </div>

                <div class="col-md-6 text-center">
                    <div class="image-tabs">
                        <div class="icon-01-image tab_content" id="tab1"> <img class="img-responsive" src="images/smart-registration-management.png" width="555" height="450" /> </div>

                        ... (Further image tabs for other icons)

                    </div>
                </div>

                <div class="col-md-3">
                    <div class="icon-text-block text-center"> <a onmouseover="imgChange4()" href="#" class="icon-4">
                        <div class="icon-container icon-04" ></div>
                    </a>
                    ...

                </div>

            </div>

        </div>

    </div>

CSS Section


.features-section{width:100%; float:left; padding:80px 0;}
.feat-heading h3{ color:#683594; font-size:32px; padding-bottom:25px;}    

... (CSS styles continued)

JS Section -> This is the Javascript section


<script type="text/javascript" >
...
// JavaScript functions for changing images based on icon hover

</script>
jqueryhtmlimagecsshover

Answer №1

A clever technique for dynamically changing images based on ID is:

  1. Update the inline code like this:

    <div class="icon-text-blk text-center"><a onmouseover="imgSwitch('tab1')" href="#" class="icon-1">

Now, a new function has been created with a parameter: the element id.

  1. Delete all separate image change functions (e.g., imgChange1, imgChange2) and consolidate into one function:

    function imgSwitch(elementId) {

    [].forEach.call(document.querySelectorAll('[id^="tab"]'), function (element, index) {
        if (element.id === elementId) {
            element.style.display = "block";
        } else {
            element.style.display = "none";
        }
    });
}

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

Using Jquery to input selected dropdown values into a text input field

Currently, I am facing some challenges in achieving this task. My goal is to have the selected option from a dropdown list called programs_dropdown added to a text field named programs_input, with the option values separated by commas. For example: php, j ...

javascriptjqueryhtmlforms

Button that floats and leads to the previously visited page

Looking to incorporate a button that moves with the user's scroll or remains fixed at the bottom of the window. I have detailed instructions on certain pages (e.g. /georgia-insurance-license) that contain links to other related posts (e.g. How to Pas ...

cssbuttonnavigationstickysquarespace

Turn off the scrolling bars and only allow scrolling using the mouse wheel or touch scrolling

Is there a way to only enable scrolling through a webpage using the mouse wheel or touch scrolling on mobile devices, while disabling browser scroll bars? This would allow users to navigate up and down through div elements. Here is the concept: HTML: &l ...

javascriptjqueryhtml

Utilize CSS Animation to bring overlapped images to life

Trying to replicate the animation featured on the CISO website header. I have created a JSFiddle demo showcasing my attempt, but it seems like something is not quite right. img { transition: all .3s ease; overflow: hidden ...

htmlcsscss-animations

Is it possible to align two buttons side by side on a webpage using only HTML and CSS?

Can you help me figure out how to align two buttons next to each other with some space between them using only css and html? If you take a look at my html code and css code, you'll see that the two buttons are not aligned properly. * { margin: 0 ...

htmlcss

CLS notifies about an Unrecognized CSS Element in Page Insights' Core Web Performance

My experience with Google PageSpeed Insights has been quite frustrating due to the numerous alerts I'm receiving about Unsupported CSS Properties. The importance of avoiding non-composited animations: Animations that are not composited can appear gli ...

csspagespeedgoogle-pagespeedpagespeed-insightscls

Tips on adjusting the size of a font icon using an inline element prior to the font being fully loaded

I'm facing an issue with embedding an icon font within text so that it wraps properly. Currently, the only way I can achieve this is by using &nbsp; between the text and the icon (i tag with font awesome). However, this causes a problem as the ico ...

htmlcssfont-awesomeicon-fonts

What is the best way to ensure the checkbox functions correctly in this specific situation?

I am utilizing PHP, Smarty, and jQuery in the development of my website. Currently, I am working on implementing checkboxes within a Smarty template. Below is a snippet of my Smarty code related to checkboxes: <table cellpadding="5" cellspacing="0" bor ...

phpjavascriptjqueryhtmlcheckbox

Tips for swapping out a new line character in JavaScript

Hello! I'm currently facing a challenge with some code. I have a function designed to replace specific HTML character values, such as tabs or new lines. However, it's not functioning as expected. var replaceHTMLCharacters = function(text){ tex ...

javascripthtmlarraysstringascii

Horizontal SWF's are providing spaces of white in between them

I'm struggling with removing the white space between SWFs on my HTML page. I've tried using 'block' in CSS, but it's not working for a horizontal layout. Adding "0" for the border hasn't helped either. I'm getting frustr ...

htmlcssflashactionscript-3

Placing an Image in Next.js

I've been trying to position my image all the way to the right of the page using CSS properties like position: absolute and right: 0. I've also attempted setting the parent element's position to relative and the image's position to abso ...

cssreactjsnext.js

Utilize the power of AJAX for efficiently sorting search results retrieved from MySQL

I'm in the process of designing a flight search page. The initial page contains a form, and when the submit button is clicked, the search results are displayed on the second page. Here's the link to the first page: To test it out, please follow ...

javascriptphpjquerymysqlajax

Aggregate the data entered into input fields on one page and display them on a separate page

Can you help me with this task? - I have 2 pages set up (page 1 has input fields & page 2 is where the entered data should be displayed) - I want to retrieve all the text input from the first field and insert it into the "content" tag on the second page. ...

javascriptjqueryhtml

Issue with Laravel Blade: HTML elements are not being displayed in my blade template file

After implementing WYSIWYG fields in my form, I noticed that the html tags are not being properly rendered upon retrieving the data. The HTML tags still appear in their raw form within the form itself. Attempting solutions found on this thread, I believed ...

phphtmllaravelwysiwyg

Move the internal array pointer forward to the next record in order to apply the insertAfter function within the jquery code

As a new jQuery user, I'm attempting to develop a jQuery function using data provided by PHP. My goal is to arrange DIV elements in order of their values using insertAfter method. However, I seem to be encountering some difficulty in advancing the poi ...

javascriptphpjquery

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

javascripthtmlcss

Using AJAX to populate a dropdown menu in a CodeIgniter application

I'm having an issue with using AJAX to populate a dropdown option. Here is the JavaScript code I am using: <script type="text/javascript"> $(document).ready(function(){ $("#sepatu").click(function(e){ e.preventDefault() ...

javascriptphpjqueryajaxcodeigniter

What are some different CSS options for setting the indentation of the first line of

I've encountered an issue with how the <p> text-indent property appears when a page is printed using Internet Explorer's Active-X plugin. Here is the relevant CSS: p { font-family: Calibri; font-size: 20pt; line-height: 1.75em; margin-bot ...

htmlcss

How to position footer at the bottom of Material UI cards - see example below

After getting inspiration from the material-ui example of cards, I wanted to create a grid layout with multiple cards. My goal was to make all the cards have equal height (which I achieved using height:100%) and position the footer at the bottom of each ca ...

javascriptcssreactjsmaterial-ui

How to Eliminate Lower Borders from DataGrid Component in Material UI (mui)

I've been trying to customize the spacing between rows in a MUI Data Grid Component by overriding the default bottom border, but haven't had much success. I've experimented with different approaches such as using a theme override, adding a c ...

cssreactjstypescriptmaterial-ui