I'm trying to find a javascript solution where it dynamically overlay a blank image similar to David Walsh's dwImageProtector Plugin (http://davidwalsh.name/image-protector-plugin-for-jquery). My problem with that plugin is, first, it append the overlay to the 'body' which actually don't align to the targeted image and second, that plugin is not built for responsive, meaning if I adjust the width of my browser the overlay image will stay the same way as the original parsed image size.
my code look something like this:
//css
.column { position: relative }
.column img { width: 100%; }
// html
<div class='column'>
<img class='protect' src='img/source.jpg' />
<span>copyright 2013</span>
</div>
Note: The overlay trick only deters at best the uninitiated visitors who want to steal your images. There is no feasible way of detering thefts because:
Visitors can check the image source from Inspector, and download it directly (but you can circumvent that using .htaccess rules that prevents direct file access)
Visitors can hide the image overlay
Visitors can take a screenshot of the page
Visitors can sniff files that are served from the server to their browser
Back to my solution: You don't actually need to use JavaScript (or jQuery) for this purpose. A simple CSS trick using pseudo-elements will work. Let's say you have the following markup:
<div class='column'>
<div class='protect'>
<img src='img/source.jpg' />
</div>
<span>copyright 2013</span>
</div>
Your CSS:
.protect {
position: relative;
}
.protect:after {
background-image: url(/path/to/overlay);
background-size: cover;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
}
If you can't change the markup, though, then you should rely on using jQuery to wrap your image element with a <div class="protect"> element, and apply the same styles as mentioned above, i.e.
$("img").each(function() {
$(this).wrap('<div class="protect" />');
});
Related
I am making a webpage. Code can be found here: https://jsfiddle.net/saTfR/50/
I would like to insert a menu on the left side which will scroll down to different sections of the webpage which I will later add. I want the background map image to always stay in the same position when scrolling. I would like to make a section in the menu called "Portfolio" which will scroll down to different PNG images which I will insert. I would like for the user to be able to click on a PNG image and a new tab will open so that the user can better see the image.
I would also like my logo.png image to be displayed on the top-right hand corner of the page and be visible whenever the user scrolls up and down. (The logo cannot be currently displayed in the link because it is saved in my computer).
HTML:
<p class="text">text</p>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">text</p>
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
</html>
CSS:
* {font-family: Lucida Console; }
.text{
color:white;
z-index:999;
position:fixed;
bottom: 10px;
right: 5px;
left:60%;
font-size:25px;}
</style>
JavaScript:
$(".text").hide().fadeIn(2000);
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > pos)
{
$('.text').fadeOut();
}
else
{
$('.text').fadeIn();
}
pos = mywindow.scrollTop();
});
You can easily apply your image as background image and fix it.
Example CSS:
body {
background-image: url('your_image.jpg');
background-attachment: fixed;
}
It will stay fixed but the page's contents will scroll like normal above that background image.
To put the logo in the top right corner and make it stay, you need to give it a position: fixed and the place it in the corner (with html or top/left/margins in css). You may also want to give it a higher z-index to ensure it stays on top. I would provide code example but I'm on my mobile right now.
Now that I'm back, here is some sample code to get you started.
#logo {
position: fixed;
right: 0;
top: 0;
z-index: 10;
}
Please see #Mischback's answer for CSS background-image.
Please see the very useful fancyBox.js utility with regard to your image inquery.
The fancyBox jQuery pluggin makes image manipulation and viewing Super Easy.
I will let someone else anwer how to fix/lock a logo to the top of the screen when scrolling.
I agree with Mischback but I would actually put the image in its own instead of the body.
HTML
<div id="image"></div>
CSS
#image {
background-image: url('image.jpg');
background-attachment: fixed;
}
Bare in mind I'm fairly novice with HTML and CSS. I've got a logo in my bootstrap header on my website (www.prettyugly.co.nz)
I originally used the follow code to display it and it worked fine in Chrome
.image {
content: url("/img/logo-white.png");
}
then this in the HTML to call that CSS
<div class="image"></div>
I since learned that you have to use the :before command for content to work in Firefox, however I can't get it to work across the board.
Any ideas?
You should simply show the image using (HTML):
<div><img src="/img/logo-white.png" /></div>
But if you want to set it as background, then you should use (CSS):
.image {
background-image: url("/img/logo-white.png");
width: 225px; height: 63px; /* Dimensions of image */
}
I have an image that when clicked I wanna make fit screen. I'm currently using a simple IMG tag linking to the full image, but its not what i want.
<div> <img src="img.jpg" width="100%"> </div>
I want to make it fit screen (onclick), like it happens on the Tumblr or Twitter app on my iphone. Here's an example of the kind of effect I'm describing, but using an image.
I'm trying to make it happen in php or javascript, if possible, for Wordpress. Any help, including how you call this function, would be appreciated.
Assuming you mean "make it fit screen" to mean the browser window entirely, you can do this!
/* Adding the class to the image itself */
$('div').click(function () {
$(this).children('img').addClass('full-size');
});
/* Adding the class to the container div */
$('div').click(function () {
$(this).addClass('full-size');
});
/* CSS */
.full-size {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
}
Prequel: I am using Bootstrap Carousel . Since I want to use background-size: cover, I am using a div with background-image set, instead of the default .
The issue: For some reason, the carousel doesn't seem to preload the next image. When I click next image, I can see the image being downloaded. Unfortunately, I think because of this lack of preloading the images aren't getting the right size (Set by JS) in some browsers:
Anyway to make it preload all the images in the carousel?
This seems to work great. Just place this with your images in the url() outside of the carousel.
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
Credit:
http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
Create a class for e.g. .preload hide it using display: none; as it will not only hide element but also remove its impression on page(height/padding/margin/etc).
after that create div with .preload class.
<div class="preload"></div> below <body> tag. That will force it and its child elements to get loaded before anything below gets loaded.
Now you can add your images using tag into the div and it will load initially but won't display in preload div.
Refer below code for better understanding:
CSS: .preload{ display: none; }
HTML
<div class="preload">
<img src="preload-this-img-1.jpg" />
<img src="preload-this-img-2.jpg" />
<img src="preload-this-img-3.jpg" />
</div>
Note: Search engines may not be happy with loading one image two times and not using alt="" in image tag, I will update with solution for it, if found
i want to go to this image using jquery or javascript and then on hover the image change the href attrb to another src image
this is the code :
<a href="Sign-Up.aspx" ><img alt="Login" src="images/login3.png" style="width: 173px; margin-top: 0px; z-index:10;" /></a>
First, let's give ourselves a way of identifying this anchor/image combo from anything else in your page:
<a class="button" href="Sign-Up.aspx" ><img alt="Login"
src="images/login3.png"
style="width: 173px; margin-top: 0px; z-index:10;" /></a>
Then let's write some jQuery to swap the images:
$('a.button img').mouseover(
function() { $(this).attr('src', 'images/login3_hover.png'); }
);
$('a.button img').mouseout(
function() { $(this).attr('src', 'images/login3.png'); }
);
The second bit ensuring we get back to the original state when not hovering.
However you don't actually need Javascript for this; you can instead do it using just CSS and HTML. To achieve this you have to separate the text and the image of the link. Something like the following HTML:
<a class='button' href="Sign-Up.aspx"><b>Login</b></a>
with some CSS:
a.button {
width: 173px;
height: 73px; // or whatever your image height is
position: relative;
background-image: url("images/login3.png");
background-position: top left;
background-repeat: no-repeat;
display: block;
}
a.button:hover {
background-image: url("images/login3_hover.png");
}
a.button b {
position: absolute;
left: -9999px;
}
(I've omitted the margin-top and z-index rules, since they're presumably dependent on other things going on in your page.)
What we're doing there is attaching the image to the anchor as a CSS background image, and then changing it when we're hovering over that anchor. The text (which was previously in the alt attribute for the image) is then styled so that it doesn't show (but is still available for search engines and accessibility tools).
There's still a problem with both those solutions, however, because the images/login3_hover.png image won't be loaded before you hover, so you'll get a brief flash of whatever the background colour behind the anchor is while it loads. To solve this, you need to use CSS sprites, which builds on the background-image technique above.
Add an id to your image tag, E.G id="image", then add this javascript
<script type="text/javascript">
$(function(){
$('#image').hover(function(){
$(this).attr('src', 'images/new_image.png');
});
});