Exploring the anatomy of the img src tag

Using jQuery, I have successfully implemented code to display an image when clicked by storing the image source into a variable like this:

var imgSrc = $(event.target).attr('src');

I then use this variable to add the image to a div and show it on the webpage:

var newImg = '<div class="gallery"><img src="'+imgSrc+'"></div>';

Now, my goal is to modify the image source slightly by appending "Big" to the file name in order to display a larger version of the same image. For example, changing image.png to imageBig.png. Is there a way to achieve this using jQuery?

jqueryhtmlcss

Answer №1

Here is an example of how you can achieve this:

const source = $(target).attr('src');
let newSource = source.split(".")[0] + "Big." + source.split(".")[1];

Answer №2

My preferred method would be to utilize the .replace() function instead of .split() in this scenario:

const srcElement = $(event.target).attr('src').replace( '.png', 'Big.png' );

Another recommendation I have is to avoid unnecessary words like the in variable names. For instance, opt for src over theSrc and img over theImg. The term the adds no value or clarity, only cluttering the name unnecessarily.

Answer №3

Of course:

$("img").attr("src", "imageLarge.png");

You can refer to the jQuery documentation here: http://api.jquery.com/attr/#attr3 for more information on using different variations of attr.

If you want to make it dynamic, you can check out @tymeJV's suggestion in their post, which should work as long as there is only one period in the file name.

Answer №4

Although it can't be done with jQuery, you have the option to achieve this using pure Javascript:

let urlParts = imageUrl.split('.');
let newUrl = urlParts[0]+'Large.'+urlParts[1];

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

Why do my paths encounter issues when I alter the manner in which I deliver my index.html file?

I recently made a decision to change the method of serving my index.html file from app.use('/', express.static(__dirname + '/..')); to app.get('/', function(req, res) { res.sendFile(path.join(__dirname + '/../index.htm ...

javascripthtmlexpressget

Tips for inserting values into a string array using jQuery or Angular 7

I have a series of checkboxes with values obtained from a loop. Instead of pushing these values into an array, I need to join them together as "parent1", "parent2", "parent3" and display the result in the console. Below is the code snippet for reference: ...

jqueryhtmlangular

Turn off info windows for businesses and other points of interest, except for those within your own polygons on Google Maps

Is there a way to make only the infowindows attached to my polygons clickable on Google Maps? I don't want Points of Interests like Restaurants to have clickable infowindows. I tried changing the map style to hide business labels, but infowindows stil ...

cssgoogle-mapsgoogle-maps-api-3infowindow

Can anyone explain how to successfully implement AJAX data in a PHP file?

I've been struggling to transfer data from my JavaScript file to a PHP variable. I've spent hours searching for solutions, but none seem to apply to my unique code. Here's the JavaScript code I'm working with... $(function(){ ...

javascriptphpjqueryajaxbackend

Arranging inline-flex elements within a div container

I have been struggling to position two elements side by side within a single div, where the second element should be on the right side. <div className={classes.container}> <div className={classes.first}> First </div> <d ...

cssflexboxmaterial-ui

Having difficulties with DIV elements

Having some difficulty creating a webpage with divs. The site I'm working on is similar to the old Myspace, so CSS can't be used in the code. Attempting to create tables using DIV elements but facing some issues. This is what my page currently l ...

html

Utilize JQuery to target all elements except for those within a specified excluded class

I am looking to target all elements within a container that has the class DnnModule-efforityEaloHTML var all = $(".DnnModule-efforityEaloHTML *") <== This method is effective However, I now want to exclude any items with the class nostrip I have atte ...

jquery

In Outlook, images are always shown in their true dimensions

While everything is working perfectly fine in Gmail, Yahoo, and Hotmail, there seems to be an issue with the display of the logo image on Outlook. The custom width and height settings are not being applied properly, resulting in the logo being displayed ...

asp.nethtmlcssemailoutlook

What are the steps to retrieve information from a raw HTML document?

Can data be extracted from a poorly written HTML file without IDs or classes? For example, if there is an unstructured saved HTML file of a profile webpage and I want to extract specific information like 'hobbies', can PHP be used for this task? ...

phphtmlparsinghtml-content-extraction

jQuery can be used to obtain the label for a checkbox with a particular value

Currently, I am facing an issue with retrieving the label for a checkbox using jQuery. Let me provide you with the relevant HTML code: <div class="checkbox"> <label><input type="checkbox" name="cb_type[]" value="sold" >Sold</label ...

javascriptjquery

Submission of the form was cancelled, causing a loop to occur

I'm encountering an issue with submitting a file through a standard HTML form. After uploading the file, the process seems to get trapped in a continuous loop where the file keeps uploading repeatedly. The submission of the form is done using jQuery, ...

javascriptjqueryhtmlgoogle-chromesetinterval

What is the best way to update specific content with fresh URLs?

I am interested in keeping certain sections of my page static, such as the header and footer, while allowing the main content to change dynamically. Additionally, I would like the URL to update based on the new content being displayed. Although I am famil ...

htmlurlpartial

Changing the description doesn't affect the fixed height of the box - here's how to do it with CSS

Here are the references I used: GetBootstrap Jumbotron CoreUI Base Jumbotron This is how my script looks like: <template> <div class="wrapper"> <div class="animated fadeIn"> <b-card> <b-row v-for="row in ...

cssvue.jsvuejs2bootstrap-4vue-component

The keyframe spinner fails to function properly on Firefox and results in blurry text

I am facing an issue with a keyframe spinner that rotates an image on the y-axis. It works perfectly in Chrome but fails to function in Firefox. I have tried changing the HTML tags to div or span class/id, but nothing seems to work. Interestingly, other ke ...

htmlcss

CORS error causing Jquery ajax request to fail

I'm having an issue with my calendar and PHP file interaction. When I click on a day, I want to display the content from my PHP file, but I keep getting a 403 error message stating: "No 'Access-Control-Allow-Origin' header is present on the ...

phpjqueryajaxcors

Press the Enter key to submit

Encountering issues while trying to enter an event. Despite reviewing several posts on this matter, a solution has not been found yet. The project needs to function properly in Chrome, FF & IE (8,9,10,11), but it is currently not working on any browser. T ...

c#javascriptjqueryasp.net.net

How to properly utilize $.ajaxComplete and $.ajaxError functions?

I have been utilizing the code snippet below for my ajax form submissions: $.ajax({ url: "", data: ilmoittautumisdata, type: "POST", success:function(){ }); error:function(){ }); }); However, I recall being advised to discontinue using success and erro ...

javascriptajaxjquery

Remove the </div> text and replace it with nothing

I'm attempting to substitute the end tag div with an empty string. Here is my code: $('#textDiv').html().replace(/'</div>'/g,'').replace(/<div>/g,'\n') This is the HTML: <div id='tex ...

javascriptjqueryhtml

Display issues with CSS Absolute Positioning in IE11

I have encountered an issue with my html and css code that uses absolute positioning. While it functions correctly on Chrome and Firefox, I am facing a problem with Internet Explorer. The absolute position property in the SVG class does not seem to work in ...

htmlcss

What can be done to improve the elegance of this jQuery function?

I am facing an issue on my webpage where I have a drop-down select box with a default value of (empty). The problem arises when the user selects an entry, and the appropriate form for that entry type should be displayed. However, there are a couple of iss ...

javascriptjqueryhtmlformshtml-select