I am trying to import images from a folder on my server strictly using JavaScript so that I can switch it out with a new image on button click. I know how to import photos using HTML, but is there a way to do it through JavaScript? What is the best way to do this? Any help, guidance or examples would be greatly appreciated.
You can embed an image within a dom element on your page. Here is a really simple example html file which does this assuming the myimage.jpg file is in the same directory. Check out w3schools for more info on javascript.
<html>
<head>
<script type="text/javascript">
function btnClick()
{
spanElement = document.getElementById("imgContainer");
spanElement.innerHTML = '<img src="myimage.jpg" />';
}
</script>
</head>
<body>
<button onclick="btnClick()">Show Image</button>
<span id="imgContainer"></span>
</body>
</html>
Related
I plugin external script.js to index.html in react js project .
<!DOCTYPE html>
<html lang="en">
<head>
....
</head>
<body>
<script id="zoom" src="./script.js"></script>
</body>
</html>
and i try use function in this script in automatic generate object in react file:
const image = document.createElement("IMG");
image.onclick="magnify(this, 3)";
image.onmousemove="init(event)";
It's not work for me (i have error with type),but if add attribute in dev tool its work enter image description here . Im sure i add script with this information.
How add it's i my code ?
sorry for my bad english
I see in your devtools the image is being rendered, is the problem that you cannot see it?
Try setting the width and height of the image:
image.style.cssText = "width: 100px; height: 100px"
I'm trying to use the download attribute to automatically download generated PDFs with unique links and have the downloaded file have a name based on an identifier from the link (the last several digits).
I'm using this download attribute I found when Googling the issue.
<a href="/images/myw3schoolsimage.jpg" download="w3logo">
But I'm having trouble trying to reconcile it with a list.
<!DOCTYPE html>
<html>
<body>
<p>Click the button.</p>
<button onclick="myFunction()">Download PDF</button>
<script>
var links = ['LINK1','LINK2','LINK3','LINK4','LINK5'];
function myFunction()
{
links.forEach(function(element))
{
var ID = element.substring(5);
}
};
</script>
<a href=element download=ID>
</body>
</html>
I'm suspecting that it's this part that is causing the issue:
<a href=element download=ID>
But I'm not too familiar with html/javascript. Thank you for the help.
I'm teaching myself JavaScript and I'm a little bit stuck. Here's what I'm trying to do: I have an image, and once that image is clicked it disappears and is replaced by two other images. My code works, but it replaces everything on the page instead of just swapping out the images. I think that I have to use innerHTML somehow, but when I tried that, none of the images showed up. My code is below-I'd greatly appreciate any insights or explanations-thank you!
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
document.write(puppy);
}
var dog = '<div id="dog"><img src="images/dog.jpg" onclick="showImage();"></div>';
var puppy = '<div id="puppy"><img src="images/puppy.jpg"><img src="images/puppy2.jpg"></div>';
document.write(dog);
</script>
</body>
Write out the dog div as normal html and then replace it's contents:
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
document.getElementById("dog").innerHTML = puppy;
}
var puppy = '<img src="images/puppy.jpg"><img src="images/puppy2.jpg">';
</script>
<div id="dog"><img src="images/dog.jpg" onclick="showImage();"></div>
</body>
Look into document.createElement() or the whole jQuery library.
for an image swap you can just get the image (give the image you create an Id first) and then say:
document.getElementById("PetImg").src("images/puppy2.jpg");
To follow with what you're doing you could also take change puppy to do something like:
document.getElementById("dog").appendChild(puppy);
Inner HTML works like this:
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
var div = document.getElementById('images');
div.innerHTML = '<img src="images/dog.jpg" onclick="showImage();">'
}
</script>
<div id='images'>
<img src="images/puppy.jpg">
<img src="images/puppy2.jpg">
</div>
</body>
Although there may be better ways of switching the images, if your learning Javascript stay away from jQuery as the other comments may have said its a good idea to learn these fundamentals first.
You could use jQuery... This will replace dog.jpg with puppy.jpg when the link is clicked.
<script type="text/javascript">
function showImage(){
$('#dog').attr('src', 'images/puppy.jpg');
}
</script>
<img id="dog" src="images/dog.jpg" />
You may consider picking up a Javascript framework, jQuery is popular and makes this task relatively easy. Instead of replacing all of the HTML, you can update the src attribute on the image. Something like:
$('#some_div img').attr('src', 'images/some_image.jpg');
Alternatively you can replace the html as well:
$('#some_div').html('<img src="images/some_image.jpg" />');
i am new to jquery, can anyone tell me how to display and image using external jquery in my html file.
i want my html to be clean and load the image where the image path is mentioned in the external jquery file.
my jquery file will be like this testjquery.js
// url to load the image (which i dont know ,whats the code for it)
and in my html file.
<html>
<head>
<script type="text/javascript">
(function() {
var test = document.createElement('script');
test.type = 'text/javascript';
test.async = true;
test.src = 'testquery.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(test, s);
test.onload=function(){
// function to load the external image
}
})();
</script>
</head>
<body>
</body>
</html>
Thanks in advance!
You can simply use:
HTML
<div id="divWhereYouWantAddImage"></div>
JQUERY
$('#divWhereYouWantAddImage').append("<img src='img.jpg' />");
You can read more about jquery .append() function here.
i think your question is wrong
so test this
first sure Loaded Jquery script file
and Set html for div Element
<div id="imageContainer"></div>
<script>
$('#imageContainer').html('<img src="/images/test.jpg" />');
</script>
Below is the file content in ExternalJSFile.js
imageUrl = 'your/img/path.png';
Your html file
<html>
</html>
<script src="ExternalJSFile.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
alert(imageUrl);
});
</script>
I dont know exactly what you mean... but i guess you mean obtrusive jQuery. So your html stays clean. The javascript you can put it in an external file or at the bottom of your page. If you put it in an external file you can delete the script tags.
<html>
<head>
<script src="style.js" type="text/javascript"></script>
</head>
<body>
<div id="image"></div>
</body>
</html>
and in style.js (you can put it in the same directory)
$(document).ready(function(){
imagePath = 'your_image.png';
$('#image').html("<img src='" + imagePath + "' />")
});
You can use html or append. The html function clears the whole image div and replaces it with the image. The append, appends it to the div so you can add another one later. The (document).ready function will run after the whole document is loaded.
I'm trying to make my header looks like this: http://wareztuga.ws/index.php and i was wondering how they managed to do that when we pass over the home bottum it flashes.
I know we need to have two images for that result but i need the funcion.
There are many approaches to implementing an image rollover. Here's a very basic approach:
<html>
<head>
<title>rollover demo</title>
<script type="text/javascript">
function swap(element, image) {
element.src = image;
}
</script>
</head>
<body>
<img src="home_normal.png" onmouseover="swap(this, 'home_rollover.png');" onmouseout="swap(this, 'home_normal.png');"/>
<img src="about_normal.png" onmouseover="swap(this, 'about_rollover.png');" onmouseout="swap(this, 'about_normal.png');"/>
</body>
</html>
A more preferable method would be to use jQuery or some other library that keeps the HTML free of JavaScript code. You'll find many, many different ways to do it if you Google "javascript image rollover" or "jquery image rollover".
this is not related to PHP. you just change the image-src ... there are many code-examples for that out there. here is one.