We Keep Coding

Get src type of img or video tag (not extension)?

Say I have an image tag such as this:
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
I know I can get the src by using myImageEl.src.
However, how do I get the type of the src (.gif in this case)?
Basically, my end goal is to pass the file type to window.URL.createObjectUrl()
let src = imageEl.src;
let srcType = src.type; // Here I need to get the type
let videoFile = new Blob([src], {type: srcType});
let videoSrc = window.URL.createObjectURL(videoFile);

var imgSrc = 'image.jpeg';
var ext = imgSrc.replace(/^.*\./, '')
I am not very good with regex, but using regex to fetch the extension of the image or video is the a good way of accomplishing this task.
For precision sake you could compare ext with a predeifined set of array
imgTag = ['jpg', 'jpeg', 'gif', 'png'];
vidTag = ['mp4', '3gp']
then you can compare using a forEach loop

From your tags I noticed you want to access image source type from javascript, if so you can use following codes base on what attributes we have for that image element:
for example if image element has id :
var imageElement = document.getElementById(id);
var imgsrc = imageElement.src;
var imgType = imgsrc.split('.').pop();
imgType will be the type of your image.
And if your image element doesn't have id, you can use document.getElementsByTagName("img") instead of document.getElementById(id) and code will look like this
var imageElement = document.getElementsByTagName("img");
var imgsrc = imageElement.src;
var imgType = imgsrc.split('.').pop();

Insert a variable into a URL

I'm a newbie here.
I would like to insert a value from JS variable into a URL part of an tag.
<script language="javascript" type="text/javascript">
var scrt_var = "xyz_nt";
</script
For example, take the above value and insert/replace in the below img src where it reads 'insert value here'.
<TD>
<img src="https://test.com/?target=alias(keepLastValue(aggregates.*.servera_*.abc-insert value here.errors)%2C%20'Errors')&preventCache=25308886" height="250" width="620" />
</TD>
Any help would be really appreciated.

You can add an ID to your img and do something like:
<script>
var scrt_var = "xyz_nt";
var mylink = "http://your_url?your_var=" + scrt_var;
document.getElementById('image').src = mylink;
</script>

You can use regex replace
var scrt_var = "xyz_nt";
var image = document.querySelector("td img");
image.src = image.src.replace( /insert value here/, scrt_var );

Pass variable to this.src

I have the name of an image file generated in javascript and passed to the src of an image in HTML - this currently works.
I want to pass another image file as the onmouseover attribute of the image.
(because my file name is dynamically generated I can't use hover in css).
var new_source_for_image = "/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + ".png";
});
});
</script>
{/literal}
<div id="visit_daynight">
<div class="change_visit">
<img id="visit_image" src="" width="350" height="350">
</div>
</div>
So i thought of adding another variable from a generated file name:
var new_source_for_image_with_glow = "/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + "_glow" + ".png";
and:
<a href="#"><img id="visit_image" src="" width="350" height="350"
onmouseover="this.src=???"
onmouseout="this.src=???"></a>
But I don't know how to pass my new variable in the this.src attribute.
Anybody have any ideas?
Much appreciated!

I believe this is what you're looking for. No jQuery required just plain old JavaScript.
const image = document.querySelector('img');
const baseImagePath = 'https://unsplash.it/';
const mouseEnterImage = '300';
const mouseLeaveImage = '400';
const replaceImage = (withImg) => {
image.src = `${baseImagePath}${withImg}`;
}
document.addEventListener('mouseenter', () => replaceImage(mouseEnterImage));
document.addEventListener('mouseleave', () => replaceImage(mouseLeaveImage));
Here is a fiddle of it working: https://jsfiddle.net/dkbewvay/
Hope this helps.

this will work:
<script>
var new_source_for_image_with_glow = "testA.png";
var anotherSrc = "testB.png";
function onmouseoverFunc(element) {
element.src = new_source_for_image_with_glow;
}
function onmouseoutFunc(element) {
element.src = anotherSrc;
}
</script>
<a href="#">
<img id="visit_image" src="new_source_for_image_with_glow" width="350" height="350"
onmouseover="onmouseoverFunc(this)"
onmouseout="onmouseoutFunc(this)">
</a>

If you can dynamically set a src... I suppose you also can set a data attribute for an "alternate source" ?!?
// Simulating your dynamic file source for the image.
$("#visit_image").attr("src", "http://lorempixel.com/400/200/sports");
// The same way, you could set an "alternate source"...
$("#visit_image").data("altSrc", "http://lorempixel.com/400/200/animals");
// The mouse events handler
$("#visit_image").on("mouseenter mouseleave", function(){
var src = $(this).attr("src");
var altSrc = $(this).data("altSrc");
// Interchange the urls
$(this).attr("src", altSrc).data("altSrc", src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="visit_daynight">
<div class="change_visit">
<img id="visit_image" src="" data-altSrc= "" width="350" height="350">
</div>
</div>
This demo interchanges the URL between "sports" and "animals".

With jQuery by using mouseover() and mouseout() and attr() methods.
$(document).ready(function(){
var file_name='your_file_name';
var new_source_for_image ="/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + ".png";
var new_source_for_image_with_glow = "/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + "_glow" + ".png";
$("img#visit_image").attr('src',new_source_for_image);
$("img#visit_image").mouseover(function(){
$(this).attr('src',new_source_for_image_with_glow);
});
$("img#visit_image").mouseout(function(){
$(this).attr('src',new_source_for_image);
});
});

the better way to use these event handlers, onmouseover & onmouseout is to supply them with their respective functions defined inside the your script. And you also need to properly assign the image to img element (ev.srcElement) Have a look:
<script>
MouseOverHandler = function(ev){
ev.srcElement.src = new_source_for_image
console.log('should change',ev);
}
MouseOutHandler = function(ev){
ev.srcElement.src = old_source_for_image
console.log('should change',ev);
}
</script>
<a href="#"><img id="visit_image" src="" width="350" height="350"
onmouseover="MouseOverHandler(this)"
onmouseout="MouseOutHandler(this)"></a>

How to display dynamic url image in html from which created by javascript

I am trying to display the image directly in HTML through a dynamic link I generated by Javascript.
function dynamicUrl() {
var url = "http://xxx.xxx.xxx" + dynamic_variables + ".jpg";
return url;}
Most of my research, people display image by click on buttons
or what I can do for now is link to the image.
test
Anyone know how to directly display the image using the dynamic URL?
Thanks!

Dynamic create DOM for example:
function dynamicUrl() {
var url = "https://is1-ssl.mzstatic.com/image/thumb/Purple111/v4/dd/95/7e/dd957e3a-abd3-da8a-2211-726a67108938/source/256x256bb.jpg";
return url;
}
var img = document.createElement("img");
img.src = dynamicUrl();
document.body.appendChild(img);
Manipulate DOM to dynamic change img url:
function dynamicUrl() {
var url = "https://www.62icon.com/client/assets/img/like-icon.svg";
var img = document.getElementById('imageid');
img.src = url;
}
<div>
<p>Image goes here</p>
<button onclick="dynamicUrl()">Change Image</button>
</div>
<img id="imageid" src="https://is1-ssl.mzstatic.com/image/thumb/Purple111/v4/dd/95/7e/dd957e3a-abd3-da8a-2211-726a67108938/source/256x256bb.jpg" />

Adding a id for the link element
<a id="link" href="">test</a>
Using click event of link element
var link = document.getElementById("link");
link.onclick = function goToDynamicUrl() {
var url = "https://image.flaticon.com/teams/new/1-freepik.jpg";
window.location.href = url;
}

Here is another method:
<div id="dimg">Here add image</div>
<script>
var dimg = document.getElementById('dimg');
function addImg(dv){
dimg.innerHTML ='<img src="http://xxx.xxx.xxx'+ dv +'.jpg'" >';
}
addImg('imgname');
</script>

Name an id dynamically with javascript?

How can I dynamically name id's using javascript?
Something like this:
js:
var idName = "fruit";
html:
<img id="javascript:idName" src="banana.jpg">

var bananaImage = new Image();
bananaImage.id = "fruit";
bananaImage.src = "banana.jpg";

Using the jQuery framework you could do something like:
<img class="idName" src="banana.jpg"/>
<img class="idName" src="cherry.jpg"/>
The script ...
var idName = 'fruit';
$(function() {
$('img.idName').each(function(i) {
$(this).attr({id: idName+i});
});
});
... which results in:
<img id="fruit0" class="idName" src="banana.jpg"/>
<img id="fruit1" class="idName" src="cherry.jpg"/>

You can dynamically create elements, such as <img>, and set their attributes using JavaScript's DOM API.

or you can get the element any other way IE
imgs = container.getElementsByTagName("img");
foreach(imgs as img){
if(imgs.src == "banana.jpg") img.id = "fruit";
}
Note: foreach doesn't work in JS you'll need a for loop, but I'm too lazy :P

I think this is what your looking for. You need some sort of event to trigger the JavaScript. Since IMG doesnt have it, except for user events, you need something like:
<head>
<script language="JavaScript" type="text/javascript">
function nameMyIds() {
var idToName = "firstImageId";
var theImage = getImageBySrc("banana.jpg");
if (theImage!=null)
theImage.id = idToName;
}
function getImageBySrc(src) {
// using DOM, using jQuery would make this easier
var allImages = document.body.getElementsByTagName("IMG");
for (var i=0; i<allImages.length; i++ ) {
var img = allImages[i];
var i = img.src.indexOf(src);
if (img.src == src || img.src.indexOf(src) > 0) { return img };
}
}
</script>
</head>
<body onload="nameMyIds()">
<img src="banana.jpg">
</body>