Is it possible to have an image without watermark on my page and when people try to download the image by accessing the right click menu and "save image as". To let them download an image with the watermark applied to it?
So apparently you can check which mouse button was pressed in a mousedown event handler and if it was the right button change the source of the image:
$('img').on('mousedown', function (event) {
if (event.which == 3) {
this.src = this.src.replace('.jpg', '_watermark.jpg');
}
});
Here is a demo: http://jsfiddle.net/s6A9m/
No, this isn't possible, as you haven't any information about what is user currently doing with these images. You can, however, apply your watermark to the bottom or to the top of the image and then just hide part of an image in your html
To my knowledge, you're going to have to break the normal UX (User eXperience) to do this.
You could disable the right-click context menu and then create your own (say just for the images you want to watermark) so that when a user right-clicks an image, they are given the option to download the image but they are directed to the watermarked element instead of the non-watermarked element.
Here is the first search result from the search: "jQuery context menu"
http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/
You could also remove the users ability to right-click the image by placing a transparent element over the image that does not allow the click event to reach the image. Then give the user a clearly labeled link to download the image (but of-course you just direct the user to the watermarked image).
Here is a demo of this method: http://jsfiddle.net/xAjDp/
HTML --
<div class="container">
<div class="overlay"></div>
<img src="[src]" />
</div>
Download Image
CSS --
.container {
position : relative;
display : inline-block;
/*IE7&6 Compatibility*/
*display : inline;
zoom : 1;
_height : 366px;
}
.container .overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0;
filter : alpha(opacity=0);
zoom : 1;/*give the element "hasLayout"*/
}
Related
I am integrating opentok broadcast using hls.
In the hls video, i need to remove black background color,
Please refer the attached screenshot
How can i remove this black color?
Neither HLS/HTML5 Video nor the OpenTok SDK provide any means for manipulating the video.
If you want to limit the actual video to a certain area, you need to do that at the source.
What you can do in the browser is zoom and pan into your video by just treating the video element like any other HTML element and cleverly positioning it inside a smaller box.
If the black background is always in the same part of the video and not something dynamic, you can reduce the visible area of your video to the actual image size by putting the video tag inside of a block-level element of fixed size.
i.e.:
<div class="videobox"><video src="..." /></div>
Then go on and position the video element within your block element (div), so that the black parts will flow out of the div.
i.e. (your visible image is 625x465px centered at the top, the whole box is 1875x708):
.videobox {
position: relative;
width: 625px;
height: 465px;
overflow: hidden;
}
.videobox video {
position: absolute;
right: 625px;
}
More details on how to zoom into a video and cut off excess parts can be found in this guide from Mozilla:
https://hacks.mozilla.org/2011/01/zooming-and-rotating-for-video-in-html5-and-css3/
They demonstrate the cutoff in an example about rotating the video inside a stage area, but as this is just normal HTML+CSS, it applies in the same way to "just zooming/panning".
I'm wondering how I could echo an image depending on a css style?
To be more clear: My navigation is transparent, if I scroll down the navigation sticks to the top of the screen but gets a white background.
My logo can be used in gray and white. When transparent its hard to read in gray, so I use the white version.
When the navigation becomes white, the white logo isn't visible so I want it to change to the gray logo.
Is there a way to change an image with an if / else?
Something like if navigation is white echo graylogo, else echo whitelogo
Thanks a lot!
if I was you, i'd put the 2 images in my code, then, you'd simply have to do show the logo depending on the class. Example:
<div class="nav">
<img src=".." class="white-img">
<img src=".." class="black-img">
</div>
Then the css:
.nav.white .white-img{
display: none;
}
.nav.black .black-img{
display: none;
}
Then, using PHP when you create your page, you could set the right class to your nav element, or using javascript if it's event driven. (user click, user scroll or etc)
I am trying to open the pop-up when an image is clicked, rather than on button click.
How could it be done?
Its a gallery kind of thing, where the images are loaded categorically and when clicked on the image, a bpopup show up and the details of the products are shown
I tried that,
Please check the fiddle file http://jsfiddle.net/psps/NhRHC/
The problem that I am facing now is it opens up in the first image click, but not in the second image.
HTML
<img id="my-button" src="http://placehold.it/200&text=A">
<img id="my-button" src="http://placehold.it/200&text=B">
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
Some text
</div>
CSS
#element_to_pop_up {
background-color:#fc0;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.b-close{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
JS
its in that jfiddle link.
Using jQuery, you can do it like this -
$('#div img').click(function(){ $("#popup").bPopup(); });
This statement will make the images in the container element with id "div" open up a bPopup when they are clicked.
I have this project:
And i want the content scrolls inside the grey box. Not go under the box or get out of the box.
How can i do this?
You need CSS to limit the height of your grey box, and say the rest of the content (incase it's higher than the hight you gave) is scrollable:
#grey_box {
height:300px;
overflow-y:scroll;
}
In this code I assumed your grey box was a div with id="grey_box" and height 200px. Change those values if it's not correct. The important is to give a height to the div, and overflow:scroll;
There is a vertical bar on my homepage. It is actually an image that looks something like this:
The white boxes are the place-holders for the product images that will be added dynamically. I want to know how to stretch the blue vertical bar as new product images are added. This must be done programmatically.
Use the image as background and repeat it vertically.
Something like this
<style>
.pageBG { background: url(your_image_source) repeat-y; }
</style>
<div class='pageBG'>
<!--your content goes here -->
</div>
From your image I think you can make a small image of dimension 5*5 or something and make it repeat vertically and horizontally. For that you don't have to set the background position, because repeat is the initail value for background-position.
Why to use image at all? Why not simply set the background color for the div:
<style>
.pageBG { background: #35f; }
</style>
You do not need a white hole in the background to display an image.