<strong class="logo">
<a href="/">
<img width="254" height="236" src="/themes/musika/images/logo.png" alt="logo"></img>
<span>text</span>
</a>
</strong>
Looking to dynamically update the image URL using JavaScript while keeping the HTML code unchanged.
It is important to note that the HTML code must remain unchanged.
Avoid assuming that this image is the first one on your page or adding an id tag. You have the option to loop through all img tags and locate the specific element for modification.
var images = document.getElementsByTagName("img");
for(var i = 0; i<images.length; i++){
if (images[i].scr == "/themes/musika/images/logo.png")
images[i].scr = "INSERT YOUR NEW IMAGE HERE"
}
If you are unable to modify the code and add an ID, consider the following options:
As previously recommended,
If the image is the first one:
document.getElementsByTagName("img")[0].src="anotherimage.jpg";
Using a function:
function changeimage(newimage){
document.getElementsByTagName("img")[0].src=newimage;
}
changeimage("anotherimage.jpg");
If you are unsure if it's the first image but know the name, search for it:
var
imgs=document.getELementsByTagName('img'),
l=imgs.length;
while(l--){
if(imgs[l].src=='/themes/musika/images/logo.png'){
imgs[l].src='anotherimage.jpg';
}
}
Function:
function changeimage(newimage){
var
imgs=document.getELementsByTagName('img'),
l=imgs.length;
while(l--){
if(imgs[l].src=='/themes/musika/images/logo.png'){
imgs[l].src=newimage;
}
}
}
changeimage('newimage.jpg');
If this happens to be the INITIAL picture displayed:
document.getElementsByTagName("img")[0].src = "c:\media\latest_img.jpg";
Of course, substitute c:\media\latest_img.jpg with your desired image URL.
<img width="500" height="400" id="imageid" src="/themes/musika/images/banner.png" alt="banner"></img>
document.getElementById("imageid").src="new image url";
Include an identifier to the element:
<img id="image1" width="254" height="236" src="/themes/musika/images/logo.png" alt="logo">document.getElementById("image1").src="path/newImg.png";
Make sure to include an ID attribute in your image tag
<img width="300" height="200" id="new_image" src="/images/placeholder.png" alt="placeholder"></img>
Now you have the ability to update the image source using the following code:
var newImage = document.getElementById("new_image");
newImage.src = "path/to/new/image.png";
I'm currently working on developing a code learning application that allows users to write code for creating games and animations, similar to scratch but not block-based. I've provided users with a set of commands that they can use in any order t ...
I'm trying to customize the font color for tooltip labels in Chart.js, but I want to set different colors based on certain conditions. Specifically, I want the label color to be white by default, but change to red if a condition is met. I've look ...
When de-structuring the image array from the product and using log to verify if it's getting correctly. Despite confirming that, an error still occurs while passing the image to the urlFor function which is in client.js file. [slug].js import React, ...
I may have approached this project completely wrong from the start, so any advice is greatly appreciated. My goal is to design a simple webpage with input fields on the right and corresponding hints on the left. When an input field is focused on, the rele ...
When I click a button, my basic form component appears without using the router. I would like the scroll position of the form to automatically move down slightly (for example, on the y-axis at 40) once it is displayed. However, I am unsure of how to achi ...
After creating an application with RN and Redux, I have a unique colors.js file structured as follows: const Colors = { mainColorDark: '#E34b3d', mainColor: '#e3596d', mainColorLight: '#F0965C', } export default Colo ...
I have been working on developing a complex Angular menu, and while I have made progress with the overall structure, I am stuck on a particular issue. The menu needs to display different options based on the user's role, such as "admin." However, desp ...
I'm struggling with incorporating date-converted unix timestamps as values in my ECharts graph. The x-axis of my chart is meant to display the recording time for each buy or sell price, represented by respective lines. Everything functions properly wh ...
My current code for the service now rest outbound call is functioning correctly. However, I am facing issues while trying to parse the JSON body in the second REST call and fetch values in the desired table format. try { var r = new sn_ws.RESTMessageV2 ...
I am currently working with Reactjs (Nextjs) and PHP. I am trying to send form data using Axios, but I am facing an issue where I am unable to retrieve any parameter on the API side. How can I resolve this problem? Below is my current code: const handleSu ...
Can someone assist me with a problem I'm facing? I need to display a success message after successfully submitting a form. I'm utilizing bootstrap and jQuery for this task, along with an email service known as emailJS. This service enables us to ...
Whenever vm8 encounters a property that doesn't exist, it will display an error message like this: Cannot read property 'value' of null. For example, when passing an id that doesn't exist: var pass = document.getElementById('pass ...
As a newcomer to js development, with experience in server-side and XAML, I am accustomed to intellisence and a smooth debug experience. Currently, I am facing challenges when debugging asp.net with javascript in VS2012. I am using jQuery and wish for an ...
I came across a query on how to convert a file path into a treeview, and I'm uncertain about achieving the desired outcome using JavaScript: My goal is to transform an array of paths into a JSON tree structure: var paths = [ "/org/openbm ...
I could use some assistance with creating a basic rss feed that pulls content from websites like arstechnica. I've spent the last few hours researching how to do this, but I'm feeling a bit lost on the correct approach. Currently, I'm trying ...
Seeking assistance with changing the background color of a component based on user scrolling behavior. I have attempted to achieve this using the following code snippet: const [mainColor, setMainColor] = useState('red') const listenScrollEve ...
I am currently developing an Angular.js application that consumes the public Flickr API. My goal is to create a list/detail view showcasing the most recent photographs from Flickr. To achieve this, I have implemented a factory in Angular to provide data t ...
Struggling with an apparently simple task that has left me completely stumped. After exhausting all my research efforts, I've hit a dead end and decided to seek help from the community. Let me outline the issue: An ASPX page (Q2.aspx) decorated wit ...
I've decided to incorporate History.js into my web application to address the lack of support for history.pushState() in Internet Explorer. After reviewing various demos and tutorials, I have written this code snippet: var historyJs = window.History; ...
UPDATE: Found a similar question at Call Angular JS from legacy code Working on adding a new feature to an existing application using Angular. Unable to do a complete rewrite, so the challenge is integrating Angular models with the rest of the app that di ...