Javascript image changer: MDN Javascript basics - javascript

I'm going through the web development guide on the Mozilla Developer Network, and in the JS basics section, I came across this example:
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}
}
When I worked out this example, although it did execute as expected, I have a question about the image path. Here's my file structure:
My question is: when working with images in html, if the present .html file would be in a folder called pages, along side with other sibling folders as images, scripts, etc, the file structure I would have followed in this case to reach an image would be so: ../images/filename.jpg. The .. would be used to reach the main(root) folder from the pages folder, then access the images folder from there.
How does this image changer example work then, without the .. being used? The file here main.js is in a sub-folder of the root.

How does this image changer example work then, without the .. being
used?
It works because the js file doesn't live alone, it is included in an HTML file, and that HTML file happens to be in the root folder.

The JavaScript is adding the new image path to the <img> node on the html page. All it's doing is inserting some information onto the page, it doesn't know anything about images.
The browser sees that something on the DOM has changed, so it reads the new src attribute, downloads the image, and repaints.
As the path is written to the html page, it's relative to where that page is. It doesn't matter that JS inserted it.

Related

HTML + JS image viewer not loading images

So I found this piece of code: https://gist.github.com/NoUsername/9308327
I downloaded it as zip, created a new folder name "images"in the root directory (same folder where I put the HTML file), and added some jpg pics in it. But when I opened the HTML file, the images won't load.
Is something wrong with the code?
P/S: When I changed the source of the tag to "/images/<1st pic's name>.jpg", the 1st image showed up just fine, though.
I believe this script assumes you have enabled directory listing feature of apache for /images
See https://support.tigertech.net/directory-index
When you access http://your.server/images it should show a list of the files as a html page. This script uses this list to get the image urls and render them.
To enable the feature you need to create a .htaccess file inside /images with the options provided in the documentation link.
If the answer of #venimus doesn't work. Be sure about your image path. You can use fullpath istead of "/iamges", like "http://localhost/image_directory". Last of all If you image's extension in uppercase like "image.PNG" it can't find your images.

jquery how to add image from computer

i am working on a website and creating my own gallery.
However there seems to be a little problem with the code.
i wanna add my picture from my computer so it has the right width and heihgt.
here is the code.I tried to do cover in css but some images are too big and wont fit.Thank you for reading.
<script type="text/javascript">
$('#button1').click(function()
{
$('#gallery').css("background-image", 'src=C:\Users\Eigenaar\Desktop\Nieuwe map\luffy');
//luffy serieuse kop
}); </script>
and this is my second button wich works perfectly fine but also wanna change because width and height problems
<script type="text/javascript">
$('#button2').click(function()
{
$('#gallery').css("background-image", "url(http://vignette3.wikia.nocookie.net/mvl/images/e/e9/Luffy-One-Piece.png/revision/latest?cb=20140221162732");
//luffy lachende kop
}); </script>
so what i wanna know is how to add my own picture.
The image path you use shouldn't be the actual path of the image on your computer, it should be the path that the specific html file you're in would use to get to the image.
Your link here is the problem:
'src=C:\Users\Eigenaar\Desktop\Nieuwe map\luffy'
For example, if I had a directory that contained:
index.html
img.jpg
index.html could display img.jpg using src='img.jpg'.
However, imagine I have a directory where index.html is on the same level as a directory called "images" which contains your image file, like this:
index.html
images
img.jpg
Then, in order to display the image I would use src='images/img.jpg'.
Most of the time, people have a folder with all of their website images in the same folder as their index.html file so they can pull directly from the folder.
Hope this helps!
Bonus learning note:
.. means "go up a directory". This is useful if you can't directly access the images folder from your html file. For example, if your directories looked like this:
html
index.html
images
img.jpg
You would first have to go up a directory before entering the images folder and displaying img.jpg. Then, your file path would be src='../images/img.jpg'.

Image source in html file

I tried to put a picture in an HTML file. If I put them using for example background-image: url('file:///C:/Users/faycel/Desktop/site%20guide/paris.jpg'); it works However when I tried another link for a picture it doesn't work. The problem is what can I do when I will put my website online.No image will appear since this link work only in my computer I thinked about google drive so I put some pictures that I will use in my website in google drive but when I used the links I didn't get any picture on my web page (all the pictures were public in my drive)
PS: I used the method ./images/logo.png" but in vain .
There are two ways to reference images and other documents with HTML: with absolute linking and with relational linking. A good practice is to have an ordered folder estructure and reference with relational URLs.
For instance, you can have a main directory where you store all your html files and sub-directories for your images, css stylesheets, scripts and so on. Using this folder estructure, you'd reference your image with img/paris.jpg, where img is the containing folder for all your images.
This way, when you upload all your files, nothing will break.
For more infor, visit the W3C documentation: http://www.w3.org/TR/WD-html40-970917/htmlweb.html
The link "file:///C:/Users/faycel/Desktop/site%20guide/paris.jpg" calls the image in your computer. Try with the public URL of the file in Google Drive.
Its simple, you just need to put an absolute link in your image.
For example..
If your website have an img directory you can use
<img src="http://www.example.com.br/img/img.png"/>
You can use relative links.
Create a folder named images on the same location where html file is
Add all images to this directory
Instead of full path like c:/something/something/images/fil.png just use images/fil.png
When uploading the website also upload the images folder and it's contents
This fixes your problem. But don't forget to read tutorials about IMG tag and its SRC attribute.

Putting a image in a pdf generated with jsReport

I need to generate a PDF with an image in the background.
To generate the PDF I'm using jsReport.
I'm using the HTML tag image <img src="Content/img/boleta2.png" /> and this is working great, because when I open this in Firefox, the image shows up.
But when I generate the PDF, only shows the HTML without any image.
In the official page http://jsreport.net/learn/images
it says something like "To upload an image you can use simple http POST...."
But I don't understand this very well.
Content/img/boleta2.png seems like a relative path to somewhere. In every case jsreport has no idea what is the full path.
You can use html base tag to specify the root path http://www.w3schools.com/tags/tag_base.asp
Or you can use full path directly in the img src.
The image extension is used for uploading images directly into the jsreport storage where it can be later referenced. Image is uploaded usually from html jsreport studio, the mention about http POST is about using API what is an advanced use case you probably don't struggle with right now.

Smart linking for resources?

I have a somewhat annoying issue... I have a JS function which toggles the image of an element on a certain event (click). This function is executed on multiple pages.
In the js, I have a like that goes like so:
img.style.backgroundImage = 'url(../assets/img.png)';
Everything works perfectly fine when the function is being called from a file that exists in a different folder... Folder structure is like so:
/project
/assets
/html
/js
index.html
Notice the index file sitting the parent folder? When I execute the function from this index.html file, the images can't be found (Since the JS is looking outside the parent folder thanks to the '../'), but it works for all other pages inside the html folder, since the relative path finding will go out to the parent folder, and then into assets...
Anyway I can make this smart without having to resort to other completely different approaches? I know I can just rely on some CSS here, add and remove classes to toggle images instead of directly changing the image source...
Its odd though, the relative path works from css where the css behaves as the anchor for the path finder... But if you use JS to change the css property, the html file becomes the anchor...
img.style.backgroundImage = 'url("assets/img.png")';
Make the path relative to site NOT the current page or style sheet.
When including a relative url in CSS the url is relative to CSS's url, which is I assume is in the assets folder.
img.style.backgroundImage = 'url("/assets/img.png")';

Categories

Resources