So I am trying to find out a way to view images without hiding the rest when clicked on
for instance
<img src="someimage.jpg"/>
<img src="someimage2.jpg"/>
<img src="someimage3.jpg"/>
<img src="someimage4.jpg"/>
for instance when i click on the first image it opens up in a new window and thats it
i´d like to be able to scroll through these images. i´d like to be able to go to the next image by clicking "next" for instance or something like that!
Calling an image in the browser directly will return that file, not an html page with the file embedded. In your case you will have to write a page that handles this functionality for you.
You don't mention whether or not javascript / jquery is an option for you, but it would definitely be the easiest solution in my opinion.
Look into something like a jquery carousel to handle a basic slideshow.
And if this is not the answer you were looking for, then I'm afraid the solution for you - fitting your limits of html, css and image - is to make individual html pages for each image and hard code the next and previous links... each and every one... the good ol fashioned way.
... headers
<body>
<img src="someimage.jpg" alt=""><br>
Previous | Next
</body>
http://fancybox.net/ Has a great javascript type plugin for having the image show up in a type of lightbox. Otherwise seach for "jquery image zoom plugin". That should give you some good plugins if javascript will work for you.
Related
I have made an web page. There are two iframes
In it. First is of index and second one is description page. I want that when I click on the any index hyperlink, then it is displayed on main description page.
How it will be possible? please give me the HTML code
You can use a button and when clicking it, change the url of the iFrame using Javascript like this:
document.getElementById('iframe-id').src = newLink;
You can use the data-attribute to store the wanted link in your html.
In case you want to do that: It is not possible to react to things outside of an iFrame through an iFrame. So you cannot put a link in iFrame1 and have it reload iFrame2, because those are two different websites and don't see each other.
Now, idk what exactly you are planing to do, but I really hope, that you don't want to make your entire site like that. Using iFrames is really only useful for things like inserting widgets (like Codepen etc.), but should never be used to display information from your own site. If you don't want to copy your html for every site then use PHP. If you don't want to reload your entire webpage (which is pretty much never a problem) you can use AJAX-requests to load parts of your website. (Frameworks like React.js, Angular.js and Vue.js do that for you)
Suppose there is a html page containing some images.
we want to disable the downloading of the images from user side.
Is that possible?
Should I need to use any javascript or add some attributes in <img> tag?
My current code is
<td><img src="images/handmade (1).jpg" class="img-responsive" alt="" /></td>
</tr>
</table>
Is there any technique to prevent image from downloading?
No, it cannot be done. Explanation here: https://graphicdesign.stackexchange.com/a/39464/24086
For all intents and purposes, this is downright impossible.
You can disable right click, but people can still view the source code of your page (by adding view-source: to the URL in Chrome, or just using a browser menu) and find the URL.
You can use a CSS background-image instead of HTML , but people can still use their browser's inspector (F12 for most browsers) and find that element's CSS properties.
You can engineer some crazy thing that you think will work, but at the end of the day, the user has to download the image in some way to see it. If the user is completely unable to download the image, he/she won't even be able to see it in the first place! No matter what you do, nothing will prevent a simple glance at a network traffic monitor or the "Network" tab of your favorite browser's developer tools.
Depends what you mean by downloading, really.
The user has to be able to download the image (i.e. retrieve the image onto their computer) in order to display the image in their browser. I suspect what you mean is that you want to stop them saving that specific image onto their computer. Any attempt to try and stop them doing this is pretty pointless, as they can always take a screenshot, or just access the image directly using the URL.
I've seen various attempts using javascript to try and stop users from saving images, but they are all easily worked around.
Cut up the image server-side and store them that way, then assemble them as one image in javascript client-side. The user could download each segment via URL and assemble them manually, but that is much more work than most users are willing to do.
I'm wondering if anyone can help me. I'm hoping I can open an iFrame in the centre of my webpage from clicking a picture. So in effect the iframe would be hidden until the picture is clicked. I have a very small and simple upload form on another page that I would like to appear when the user needs to upload and click the picture. I've had a good look round on this site and google in general but not found what I'm looking for, or the basics weren't included because it's common knowledge for most people here. Would there also be a way of closing this when it's finished uploading too? The form currently diverts to the homepage when finished so It would be handy to have a close option as in the end (post successful upload) the iframe contents will be the same as the page it's displayed on.
The best/easiest I have come across has been on w3schools but I have read using html for iFrames is not widely accepted or it isn't the best option cross-browser.
I have been viewing and trying different code but without even the basic knowledge I can't get my head around it.
If anyone is able to help, please assume I'm 5 years old. I'm not daft but in terms of code I'm literally just starting.
Thanks in advance
You would need to add a javascript onclick function to your img tag which would open a new window upon a click. You would pass the window.open function the name of the html file you want to display. Something like this:
<img src="image.jpg" onclick="window.open('welcome.html')">
I have a web page wherein there is an image (background image of the page). I do not want the user to access the image directly by finding its location from the html source. How do I do that?
Also, I'm adding a barebone CSS for media= print. while doing a SAVE AS, I'm assuming the image will not be saved?
** I know there are ways to get the image if someone is really intent on it, but I want to make it difficult.
Edit:
I stumbled on this page - http://www.answerjam.com/privacy-policy - I would like to protect my image the same way they've done with their footer image.
There are a few different ways of protecting the image:
Use Javascript and override the right-click context menu (see this doc for a super easy way of doing it). However, all a user has to do is disable Javascript to get their hands on it.
Use a server-side language to check things like HTTP_REFERRER in your header and use a script to server the image (checking that field). Using a server-side language, you could also employ tricks like using GET parameters.
Having said all this, all that someone needs to do to get your image is use Firebug (or Chrome/Chromium) to check out the net tab to see downloaded content or visit their browser's cache. You could try to set your Cache-Control to no-cache when serving the image, but AFAIK, most browsers don't actually implement that for this purpose.
At the end of the day, trying to protect your images from anyone is much more of a headache than it's worth, when dealing with anyone but your grandmother visiting your site with IE6.
One way to do this that works well without JavaScript (so the site is still functional) is to use CSS to place a completely transparent PNG over the image you are protecting. If you try to right-click and save it, you'll end up saving the transparent image. The PNG can be a simple 1x1 image, and stretched to cover it.
<div class="imageContainer">
<img src="..." class="realImage" width="100" height="50"/>
<img src="/img/blank.png" class="blockImage" width="100" height="50"/>
</div>
CSS:
.imageContainer {
position: relative;
}
.imageContainer .blockImage {
position: absolute;
top: 0;
left: 0;
}
Of course, this still doesn't help at all if you have dev tools, but it eliminates right-click access without relying on JS or complicated tricks. It's also rather hard to get around without looking at the source.
You can combined this with the other examples.
It's still extremely easy to get around. I feel that needs to be restated a few dozen more times. Basic rule of internet content: if I can see it, I can copy it. (Like the "analog" hole - I can just screen-cap the browser.)
If you want to avoid standard visitors to see you're image directly, you can load it in javascript. Anyway, I assume that for visitors using firebug or any dev tool you just can't prevent it.
For example, to load your image with jQuery :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').css('background-image', 'url(your_image.png)');
});
</script>
I am wondering if there's a way I can embed a webclip into a webpage, as in, I can have a portion of a webpage embedded as a widget into another page. I was thinking it might be possible someway though Mac OS X's Dashboard widgets, one can take a webclip and make a dashboard widget, as I hear that they are HTML based, and thus one could reverse-engineer one into simple HTML code. Kind of the reverse of what google does for gadgets. Any ideas? I'm open to any solutions.
Thanks.
The easy, html-based way is with an iframe. What this does is put an entire webpage within a box on your page. You don't have much flexibility with it.
You can also do it with javascript. JQuery makes it easy with their .load() method. Going this route, you can load a webpage with javascript, load specific tags within that page, or even modify the incoming code before displaying it.
Most basically:
$("#xxxx").load("url.html");
Where xxxx is the id of the html tag where you want the content to be loaded on your page (e.g. if you have <div id="xxxx">content will go here</div> in your HTML). See more details at: http://docs.jquery.com/Ajax/load.
If these don't suffice, the next step would be PHP (I doubt you'd need it, but if you'd like to, you car search for file_get_contents on php.net).