I've noticed that in Google Chrome, one can click and hold an image and while holding a semi-transparent copy of that image attaches itself with the cursor. Then one can drag that image to the desktop to save it.
I want to prevent and stop the semi-transparent version of the image attaching itself to the cursor on hold of certain images in my site.
How can I do this?
You can prevent this behavior by using the property
-webkit-user-drag: auto | element | none;
See the doc of -webkit-user-drag CSS-infos.net (I didn't find an MDN doc, if someone has a better reference)
How to use
Add a .nonDraggableImage class on your img tags, and add on your CSS :
.nonDraggableImage{
-webkit-user-drag: none;
}
I had to use a different solution to get it working:
<img src="http://placehold.it/150x150" draggable="false">
Thanks: https://stackoverflow.com/a/7439078/2443005
Another way is to create a transparent picture over the top of the picture you want to prevent viewing.
Please see:
http://www.dwuser.com/education/content/stop-the-thieves-strategies-to-protect-your-images/
check under "Tricking the downloaders"
I like to use - draggable
draggable="false"
<img draggable="false" src="image.jpg">
But you can try - ondragstart
ondragstart="return false;"
<img ondragstart="return false;" src="image.jpg">
or - pointer-events (some browser don't support & also have other problems)
style="pointer-events: none;"
<img src="image.jpg" style="pointer-events: none;">
Related
The rollover works on the image itself, changing from one image to another then back again, but the problem is that it the image also changes on each side of the image on rollover where there is blank space.
I know there it can be done better in CSS, but it is a school assignment and must be in javascript. Below is the code in HTML, then what I have for it in CSS
HTML
<script>
imageout=new Image();
imageout.src="Pics/Image1.jpg";
imageover=new Image();
imageover.src="Pics/Image2.jpg";
function image_out(){
document.images['imageout'].src="Pics/Image1.jpg";
}
function image_over(){
document.images['imageout'].src="Pics/Image2.jpg";
}
</script>
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"
onmouseout="image_out();"><img src="Pics/Image1.jpg" class="center"
id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap"></a>
CSS
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
If someone can point out my error or if there is a better way to do this (must be javascript), I would certainly appreciate it!
As I have mentioned in the comment, block level elements will cover the entire row, So remove the class center from your anchor tag and If you want to align the items in middle then change your structure of html like below.
<div class="center">
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"onmouseout="image_out();">
<img src="https://www.delecta.co.za/wp-content/uploads/sample.jpg" id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap">
</a>
</div>
DEMO
I've found the answer by myself and posted it below.
I'm trying to implement a css sprite. And I would like to change a specific image's background (pointed to a css sprite) by hover, while using in-line code.
I tried this, it didn't work.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw=="
width="100" height="105"
style="background:url(y.png);hover{background:url('y.png') -20px -20px;">
I also tried this, onmouseover/out function but no avail:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw==" width="100" height="105" style="background:url(x.png);"
onmouseover="background: url(y.png) -47px -45px;"
onmouseout="bg.src='x.png'">
I also tried above without css sprite position, still doesn't work.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw==" width="100" height="105" style="background:url(x.png);"
onmouseover="bg.src='y.png';"
onmouseout="bg.src='x.png'">
And at last, I tried this:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw=="
width="100" height="105"
style="background:url(x.png);"
onmouseover="this.style.background='y.png'"
onmouseout="this.style.background='x.png'">
For my own reasons, I would like to do the css-sprite image hover thing with in-line code.
So if you are using the img tag I don't think it make sense to target the background... what you need to do is to change the source of your image...
1) Css won't work as you can't do a :hover state inline.. so you need javascript.
try this
<img src="http://www.guitarworld.com/sites/default/files/public/styles/article_detail_featured__622x439_/public/dimebag_2_3.jpg"width="200" height="205" onmouseover='this.src = "http://www.metalinjection.net/wp-content/uploads/2014/06/dimebag-darrell.jpg"'
onmouseout='this.src = "http://www.guitarworld.com/sites/default/files/public/styles/article_detail_featured__622x439_/public/dimebag_2_3.jpg"'/>
just replace the image sources for your won and you'll see the image change... is that what you want right???.
I've solved my own problem.
The magical phrase is this: "this.style.background='url(sprite.png) -100px -100px';"
The code required was this:
<img src="transparent-placeholder.png"
width="100" height="100" style="background:url(sprite.png) 0px -100px;"
onmouseover="this.style.background='url(sprite.png) -100px -100px';"
onmouseout="this.style.background='url(sprite.png) 0px -100px';">
more you ask, more knowledge you get. Right ? I don't know this question is basic or not but a little make me think hard.
Look pic 1 what do i have.
pic 1: http://imgur.com/YFpfo69
When i upload an image, it will show up to the container called <img id="image"/> and the image is horizontally draggable. My problem is, how do i hide the rest of unused image ? When i dragging the image, the rest will not showing up
To fix this you can place overflow: hidden in the CSS of the parent element of the #image element.
Add the style overflow: hidden; to the parent element, like this:
<div style="overflow: hidden;">
<img src="img.png" id="image" />
</div>
actully i m trying to use anchor tag with this slider image
<div class="smallsliderdiv">
<p class="smallslider"> Top websites </p>
<div id="makeMeScrollable">
<img width="400px" height="300px" src="g1.jpg"/>
<img width="400px" height="300px" src="g2.jpg"/>
<img width="400px" height="300px" src="g3.jpg"/>
<img width="400px" height="300px" src="k1.jpg"/>
<img width="400px" height="300px" src="k2.jpg"/>
</div>
<div>
but its not working images are not getting showed when i do like this? i dont want the alternative way .. what is the problem with this slider?? last two images have no problem .. when i remove anchor tag all is fine but i need this. Thank you.
This is working fine with html but not with the slider i m using which is http://www.smoothdivscroll.com/demo.html use js and css from this site
and i am using for each loop for echoing image address and link address .
This is how I would do it, since your .js or .css slider files probably has an issue with wrapping the images with an anchor tag, so instead of wrapping the images with an anchor you can add an onclick event to the img and have the javascript link the image. and manually change the cursor to a pointer in the CSS.
See fiddle for example: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/47/
html
<img onclick="image1()" width="400px" height="300px" src="http://lorempixel.com/400/200/"/>
CSS
#makeMeScrollable > img:hover{
cursor: pointer;
}
Javascript
function image1(){
window.location.href = 'www.google.com';
}
I make an image gallery. I have 9 fields, in each field there is an image (or better, there is a part of image). In total, I have 9 big images and in each of that fields there is a 1/9 of each big image.
When I "hover" one of these nine fields, I need to change the other fields to the rest of this image and see the whole image over all fields.
Okay, this I am able to make with CSS and a little bit of JS, but I am looking for any javascript/jQuery effect, let´s say to change image by image from right top corner to left bottom corner, any fluently change between images.
Example, with 3 images:
HTML:
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
CSS:
img {float: left; width: 30%; height: 100px; margin: 0 9px 9px 0;}
img:nth-child(3n+3) {margin-right: 0;}
.g {background: #070;}
.b {background: #00f;}
.r {background: #f00;}
JavaScript:
function show_image(id) {
$('img').removeClass().addClass(id).removeAttr('onmouseover');
}
(fiddle)
Do you have any idea how to make the fluent change of images when hover one of them?
In HTML there should be all 27 small images, it´s no problem, I´m looking for the switching effect. You can send links for examples, maybe I only don´t know how to call what I need :-)
Thanks.
Ok, I understand your question now!
You mean, when you hover over on an image, the rest of images get replaced by its remaining parts and whole of the 9 images match up to complete the image?
You need to set these functions!
Try to remove the onmouseover function from the element, and try to use jQuery for that!
Lets start the example!
The example image tag:
<img src="some/source/to_file.png" alt="photo" class="image5" id="red" />
First you need to get the image on which the mouse over event occured, like this:
$('img').mouseover(function () {
var id = $(this).attr('id');
var class = $(this).attr('class');
if(id == 'red') {
if(class == 'image5') {
/* replace all the other images with red one
* here you will check the image's class too, which is the number
* location where it is present at!
*/
}
}
}
After this, you will need to shift the image's back too! For that, use this:
$('img').mouseleave(function () {
// shift the src tag back as
$('.image5').attr('src', 'its/src/to_file5.png');
$('.image7').attr('src', 'its/src/to_file7.png');
$('.image6').attr('src', 'its/src/to_file6.png');
}
And so on.
And yes, you will be needed to keep the images in the browser as downloaded files on the page load and just keep shifting them once the user hover's over!
In your fiddle, all you're doing is adding a classname but you are not removing or reverting it back on mouseleave event; there is no mouseleave event.
You can use the jQuery UI switchClass() method which allows you to animate whole class.
Here is a working code sample using your as basis:
function show_image(id) {
$('img').each(function() {
var className = this.className;
if (className == id)
className = '';
$(this).removeClass().switchClass(className, id, 1000, 'linear').removeAttr('onmouseover');
});
}
Since it's removing one class and add other, if the one you remove and add is the same it won't work hence the need to check and reset.
As for "linear" it's just my personal choice of easing method, choose your own from the full list.
Updated fiddle.