Develop Reference

Can't add omouseover attribute dynamically from javascript

I'm trying to add the attributes dynamically to an img tag but only onmouseenter is not been included else everything is been added perfectly
let img_elem = document.createElement('img')
img_elem.src = movies[i].large_cover_image
img_elem.alt = 'poster'
img_elem.id = i
img_elem.className ='poster'
img_elem.onmouseover = 'give_me_id(this)'
This is my HTML after adding attributes dynamically
<img src="https://yts.mx/assets/images/movies/woodstock_99_peace_love_and_rage_2021/large-cover.jpg" alt="poster" id="0" class="poster">
Just an issue with onmouseover else everything working perfectly.
I have already found other ways to add onmouseover attribute but the above method seems to be easier than I have used, so let me know the issue here. Thank you in advance

It's not working because we are trying to add the attribute but what we really want is add event listener. Below is the code please try it out
let img_elem = document.createElement('img');
img_elem.src = 'https://upload.wikimedia.org/wikipedia/commons/1/12/User_icon_2.svg'
img_elem.alt = 'poster';
img_elem.id = 'img1'; //i;
img_elem.className ='poster';
img_elem.addEventListener("mouseover",function(event){console.log('mouseover');});
document.getElementById('imgParent').appendChild(img_elem);
<div id='imgParent'>
</div>

I'm guessing that you're following the W3Schools example, but the example is adding a method through the attribute. You can't really do that in javascript code. Instead, you send in a function and then use event.target to get which image that the user is hovering. I'm taking one more step, and using shorthand properties (I think that's the name) to get target directly by using {target}.
Another way is to add an eventlistener instead, like in Bharat's answer.
const imageIds = [100, 200, 400];
for (const id of imageIds) {
let img_elem = document.createElement('img');
img_elem.src = `https://picsum.photos/id/${id}/200/200`;
img_elem.alt = 'poster';
img_elem.id = id;
img_elem.className = 'poster';
img_elem.onmouseover = giveMeId;
document.body.appendChild(img_elem);
}
function giveMeId({target}) {
console.log('id:', target.id);
}

DOM background-Image add

I'm a beginner.
I encounter a small problem which is I cannot add an image to my div block.
here is my HTML code
<span class = 'memepic'>
<img src ="https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTmvCGIVavqB6jVObiS1sqkvwlzYgpjCVfWBg&usqp=CAU">
</span>
and I wrote my js code is like this one
//it is my <span> id
const img = document.getElementsByClassName('memepic')
//it is my divblock id
const memebox = document.querySelector('#meme')
for(i of img){
i.addEventListener("click", function(e) {
console.log(e)
memebox.style.backgroundImage = 'url("e.path[0].currentSrc")';
});
}
the error shows my console is
e.path[0].currentSrc:1 GET file:///C:/Users/kevin/Desktop/bootcamp/officialclass/meme%20generator/e.path[0].currentSrc net::ERR_FILE_NOT_FOUND
my purpose is when I click that picture, that picture will show on my divblock which is in the center of the screen.
I checked the path[0].currentSrc is correct.
and it will show the picture if I replace 'e.path[0].currentSrc' to the content inside the 'e.path[0].currentSrc'.
like this
memebox.style.backgroundImage = 'url("https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTmvCGIVavqB6jVObiS1sqkvwlzYgpjCVfWBg&usqp=CAU");

Hey can you try this code in for loop :
`url(${e.srcElement.currentSrc})`

Javascript doesn't parse variables that are inside a string, so you're asking for the background URL to literally be set as "e.path[0].currentSrc".
Instead of this:
memebox.style.backgroundImage = 'url("e.path[0].currentSrc")';
Do this:
memebox.style.backgroundImage = 'url("' + e.path[0].currentSrc + '")';

Set an image from Firebase as the background of div via jQuery

I'm trying to get an image from fire base and set it as the background of a div. Does anyone know how to do that? I tried all of my ideas and they did not work. Can someone provide any examples?
<div class="museBGSize rounded-corners grpelem" id="u525"></div>
I tried it this way and it didn't work:
fbRef4.on("child_added", snap => {
var image = snap.child("Image").val();
//concatenated the img tag using the image variable at the top
$("#tableBody3").append("<img src=" + image + "/img>");
});

hello every one i found an answer for it and will post the answer just in case if some one want to know
((my html))
<div class="museBGSize rounded-corners grpelem" id="u525"><!-- simple frame --></div>
((my js))
var fbRef4 = firebase.database().ref().child("slide");
fbRef4.on("child_added", snap => {
var image = snap.child("Image").val();
var newimgsrc = 'image' + (new Date().getTime());
var newimg = $('#u525');
$('#u525').css("background-image", "url("+image+")");
newimg.css({'background-image': 'url('+image+')'});
newimg.show();
});
((my firebase))
-slide
-asdasdasd
Image:"https://firebasestorage.googleapis.com/v0/b/awe..."

Displaying Images in Javascript

OK, so I'm making a website in HTML, and it's working great, but I need to know how to display images on the page in javascript. I have in my website where there is a part on the homepage called news, and it's going to display an image about the topic, but I don't know how to display the image. When I use other website's ways, the image just displays as a square with a ? in the middle. Please help!!

var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.appendChild(content);
I got these answers from:
How to display image with javascript?
How to append data to div using javascript?

This will work:
DEMO
javascript:
var i = document.getElementById('test'); //get the element to put the picture in
i.innerHTML = '<img src="http://pathtopicture.jpg"></img>'; // append the picture to the divs inner HTML
HTML:
<div id="test"></div>
Or without HTML in the first place (of course you need html and body tag...)
DEMO2
Code:
var i = document.createElement('div');
i.id = 'test';
document.getElementsByTagName('body')[0].appendChild(i);
i.innerHTML = '<img src="http://pathtopicture.jpg"></img>';

is it possible to display pictures in a popup.php window, using the src from the main page?

I have a page with pictures, which I want to displayed in a popup.php when clicking on them.
I want the popup window to display a picture(the one I'm clicking on), some text, and a print button.
I'm doing this on the page:
<img src="graphics/picture1.png" width="340" height="200" border="0"/>
In the JS file:
function popup()
{
window.open('popup.php', 'window', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=520,height=400,left=350,top=100');
}
function showImg(img)
{
var imageSrc = "imageName/imagePath.png";
if(img.src != imageSrc){
img.src = imageSrc;
}
}
And in the popup.php:
<img src="graphics/picture03.png" onload="showImg(this)" />
There should be an obvious way, but I can't find it.

I would think adding the image name and text content to the URL would be the obvious way.
popup.php?image=myImage.gif&text=Say%20something%20witty%20here

Well, you'll want to have your popup contain a holder for the image (which it seems like you already have), but you'll also need to have a holder for your text. Your popup.php should have something like <div id="textHolder"></div> - then your javascript function needs to accept the appropriate text as well as populate it into the textHolder div.
I'm not sure how you're calling these JS functions, or from where - so some of the code might need to change - it should be something to the tune of....
function showImg(img, textHolderObj, text)
{
var imageSrc = "imageName/imagePath.png";
if(img.src != imageSrc){
img.src = imageSrc;
}
textHolderObj.innerHTML= text
}

If is that simple, you could create it:
var win = window.open('', 'win', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=520,height=400,left=350,top=100');
var img = win.document.createElement('img');
img.src = 'image.png';
img.alt = 'Some text';
var label = win.document.createElement('p');
label.innerHTML = 'Some text';
var button = win.document.createElement('a');
button.href = 'javascript:window.close()';
button.innerHTML = 'Close';
win.document.body.appendChild(img);
win.document.body.appendChild(label);
win.document.body.appendChild(button);

I don't get the question too well. You want to access a function that was defined in the page that opened a popup? You should be able to use opener.showImg(this)

your popup has no idea what image you clicked on. you need to do this:
onClick="popup('imgSrc')"
and in your window reference:
window.open('popup.php?imgSrc='+imgSrc, ...
then... your popup window has to run off of url vars, but php now knows what its looking for:
<?php echo '<img src="' . $_GET["imgSrc"] . '" />'; // this is going to load the image, so you don't need the onLoad()

It is possible to create a new popup window using a variable
top.mydocument=window.open('','window','toolbar=no,location=no,
status=no,menubar=no,scrollbars=no,resizable=no,
width=520,height=400,left=350,top=100');
and then use document.write to write the content:
top.mydocument.document.write(
'<html><head></head>'
+'<body bgcolor=white onLoad="self.focus()">'
+'imageName/imagePath.png'
+'</body></html>'
)
Make sure you close it.
top.mydocument.document.close()