Looking to adjust the background-image size of a table cell (td) upon clicking a specific

I have a website where I would like to display logos of different games with links attached to them. I have managed to adjust the size of the image on hover, but now I am looking for a way to keep the size bigger after clicking on the link. Is there a simple solution for this? I haven't found anything straightforward so far, only some jQuery and JavaScript codes related to background color changes. Here is the code snippet:

<table id="containerlogos" style="width: 1200px; height: 150px;">
    <tr>
        <td id="pkmn"><a href="http://www.pkmnpro.cz"></a></td>
        <td id="ygo"><a href="http://www.ygopro.cz"></a>
        </td>
        <td id="mtg"><a href="http://www.mtgpro.cz"></a>
        </td>
        <td id="hs"><a href="http://www.svet-karet.cz/?page_id=7"></a></td>
    </tr>
</table>

and the corresponding CSS styles:

... ...

For the complete working version, visit this link.

javascripthtmlbackgroundcss

Answer №1

Give this a shot:

$('#containerlogos a').on('click', function (event) {
    event.preventDefault();
    $(this).closest('td').css('background-size','auto 80px');
});

Check out the demo

Answer №2

If you're wondering how to determine the dimensions of a background image, take a look at this helpful answer: Getting dimensions of background-image
To dynamically set the size of an element's background image using jQuery, simply add an 'onclick' event to your elements and use jQuery accordingly.

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

Changing the size of a dynamic watermark png in php

I'm trying to automate the resizing of a watermark to cover 1/4 of an image. The code for the watermark is functioning, but I'm facing issues with resizing it correctly. <?php $image = $_GET['src']; $path_parts = pathinfo($image); ...

phphtmlgd

Determine the position of the cursor in an editable span

Is there a way to add text at the cursor position in an editable span when a button is clicked? The span contains multiple lines of text and HTML tags. [Take a look at this example on JSFiddle](http://jsfiddle.net/8txz9sjs/) ...

javascriptjqueryhtml

Differentiating between swipe and click actions within Angular applications

Utilizing ng-click to display item details in a list while also implementing a jQuery mobile swipe event on the list item to reveal a delete button when swiped left has presented an issue. The problem arises when swiping triggers both the swipe event and a ...

javascriptangularjs

Is there a way to change a weather api into local time using ReactJS/JavaScript?

In order to display time in a specific format like 12:00 or 20:00 and change the background with images, I need to convert it to local time. This is essential for achieving my desired output. The JSON data structure that I am working with looks as follow ...

javascriptreactjsweather-api

Filtering data within a specific date range on an HTML table using JavaScript

I am attempting to implement a date filtering feature on my HTML table. Users should be able to input two dates (From and To) and the data in the "Date Column" of the table will be filtered accordingly. The inputs on the page are: <input type="date" i ...

javascripthtmlhtml-table

Doesn't IE support the use of jQuery.last()?

Here is the code snippet I am currently using: $('script').last().parent().html('kkkk') Unfortunately, I am encountering an error in Internet Explorer when running this code. Any suggestions on how to address this issue would be great ...

jqueryhtmlinternet-explorer

What is the best way to eliminate the border on Material UI's DatePicker component?

Check out this code snippet for implementing a datepicker component: import React, { Fragment, useState } from "react"; import { KeyboardDatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers"; import DateFnsUtils from &qu ...

javascriptreactjsdatepickermaterial-ui

HTML - Custom styled <select> element

My goal is to fully customize the style of a component and hide the selector image. All graphical styles such as borders and shadows have been defined in a previous table. Now, I want to remove all styling from the selection menu, including the icon used t ...

htmlcssselectwebviewstyles

Enhance the user experience with a personalized video player interface

I am facing difficulty in creating a responsive video with custom controls. While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also r ...

javascriptcsshtmlvideo

Implementing ngClass with a dynamic ID in the URL condition

I am attempting to create an ngClass condition that adds an active class to a list element. Specifically, I want it to work for both the URLs '/companies' and '/company/:id'. The issue I am facing is that the current setup does not fun ...

cssangulartwitter-bootstrap

Tips on steering clear of the issue of "Automatic grid alignment" when working with Bootstrap?

I'm attempting to achieve something along the lines of, |--------------Empty space---------------|-----first column(aligned to the right)-----| |---logo---||------Empty space-------|----second column(aligned to the right)---- However, it is automat ...

htmlcsstwitter-bootstrap

Select an item by populating it with JQuery

Here is the select HTML code I am working with: <div class="form-group col-lg-6 row"> {{ Form::select( 'state',array( 0 => '' ),null, array( 'class' => 'form-control', 'data-placeholder' =&g ...

phpjqueryhtmllaravel

Analyze a designated section and display the top 3 frequently used words

Below is the code snippet provided: <body> <div id="headbox"> <p>Whatever...</p> </div> <div id="feed"> <div> <p>I hate cats</p> </div> <div> <p>I like ...

javascriptjquery

What is the best way to create an animation where every letter in a word transitions to a different

Is there a way to animate a word so that each letter changes color within a range of 7 colors, with all letters displaying different colors simultaneously in an infinite loop? <div class="box"> <h1 class="logo animate__animated an ...

javascripthtmljquerycss

Reassemble the separated string while skipping over every other element in the array created by splitting it

Currently, I am working on the following URL: demo.example.in/posts/0ewsd/13213 My goal is to extract the hostname (demo.example.in) and the path (posts/0ewsd/13213) from this URL. urlHost = 'demo.example.in/posts/0ewsd/13213'; let urlHostName ...

javascriptarraysstringurl

Using the Javascript function getElementById to retrieve user input for passing a RSS FeedURL

I've been working on creating a basic form where users can input a Feed URL and see the contents displayed on the HTML page. For testing purposes, I have used "https://jquery-plugins.net/rss" as the feedUrl, and it has been functioning normally. This ...

javascripthtmljquery

Utilizing a Bootstrap column design with two columns in place - one column set at a fixed width while the second column stretches across the remaining

Need help with adjusting two columns on a webpage? The right column is fixed at 300px width, while the left column should take up the remaining space. Using flex works well, but when adding a responsive ad to the left column, it extends beyond the availabl ...

cssbootstrap-4

Sending data using jQuery when a button is clicked

Is there a way to display the text from a text box when a button is clicked? Here's what I have been attempting: <script type="text/javascript> $(function() { $('#button').click(function(){ $.ajax({ type: "PO ...

javascriptphpjqueryajax

Adhesive Navigation Bar

Check out this link: JSFIDDLE $('.main-menu').addClass('fixed'); Why does the fixed element flicker when the fixed class is applied? ...

javascripthtmlcss

Display the menu and submenus by making a request with $.get()

My menu with submenu is generated in JSON format, but I am facing issues displaying it on an HTML page using the provided code. Can someone please assist me in identifying what mistakes I might be making? let HandleClass = function() { ...

javascriptjqueryhtmljsonajax