So basically i would like to make image bounding boxes expand when clicked on. I don't want the images to expand but rather the bounding box sort of like in adobe indesign(if you are familiar with it) when you double click an image and you can move the image within the frame. Is this even possible? I recently got into coding and would like to know how i would go about coding this. Can this all be done through css or would i need to use javascript? I illustrated the concept to help further explain what I'm talking about. Please excuse me if i am incorrectly using terminology.
So... I have to make a working prototype of a website to customize your own cupcake. I really don't know how to make it. I got an image in my head of what I want, but I absolutely don't know how to get it to work.
So, my question is: Is it possible to have multiple image sliders overlap filled with png images so if you click the thumbnails you can build up an image consisting of changeable parts?
I already found some basic image sliders that I would like to use. The thumbnails for the sliders will be hidden in the various menus. Every menu stands for a changeable part of the cupcake, so the thing I want to create with all of the sliders is a personal cupcake.
I made the png files myself so I really hope this idea is possible, because I need this working thing for school and otherwise I really don't know what to do to make it work :X.
I have to add a biger "i like" button to my webpage due to design requirements and i'm turning nuts, i tried this method: http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/ but it works as long as you are doing a equal size button (or i'm doing something wrong, wich is quite posible :P), otherways is just clickable the area were the original facebook button is.
So is it posible to change the size? i understand that facebook allows you (acording to their policy) change the size, but not the look of it, but i don't see any way to do it.
I managed to add embedded assets to htmlText of my TextArea like described here (Sly_cardinal's post, currently the third one):
Unable to access embedded images in htmlText
But all the images appear in the top left corner (overlayed)!
Interesting is that the place where the images should be, is actually empty and the text wraps around it, like they were there. But they are all in the corner.
I'm using large p tags for the text and all html displays perfectly where it should be. My only problem are these images.
Hope somebody has at least an idea. Thanks.
P.D. sorry for not showing code, it's cluttered at the moment with other things. But I hope the description is enough to get some useful tips.
P.D. 2. I did a test now with exactly the same code but using normal path to png file instead of asset and that works!.
i have a image that i don't want it drag-able or selectable so that no drag to other places on the page. how is that done?
If you want your visitors/users to see the resource on your page there is no way to stop them downloading it or saving it.
Possible options:
You can use JavaScript to prevent the context-menu popping up on right-click (related article: http://javascript.about.com/library/blnoright.htm).
You can cover the image with a transparent .png or .gif so that clicking on the image simple returns the transparent image.
But if the user can see the image on the webpage then it's already on their computer.
In reality this is far harder than you may think it will be, I assume you don't want people stealing your images which is a fair enough thing but just remember all the different ways in which someone can get an image from a web site. Your can catch the right click event and stop them at least doing that, but they can always just take a screenshot and save that instead. This is a slippery slope and it always ends the same way, if they really want to steal it, they're going to.
Since the image is just a binary data, and all the data is written on client PC's, for displaying reason it's up to th euser what they'll do with the data. There's no way you can prevent them from saving the picture displayed on a website.
All you might do is make it a little bit harder, by blocking right clicking on image, (displaying alert on right click, or something like this). But if the user really wants to save the picture they will do this anyway.
Why should you do it?
I can suggest a javascript that will able it: http://www.brownielocks.com/stopcopying.html
But every one, even with little experience can view the source and copy it. and even if you block them from viewing the source, they can use wireshark and get the picture directly. Even if you use flash to show the picture one can screen-capture the screen and retrieve the picture.
Put a watermark on the picture and use http://www.tineye.com/ from time to time and search for your picture. If you find others that use your picture - sue them. It is the most effective way.
It is impossible to prevent someone to store an image (or other resources) on their computer as others already have mentioned.
But another trick to make it harder (impossible for inexperienced people I guess) is to use CSS and background images:
<div style='background: url("myimage.gif");'></div>
The image is now on the background of the <div> block and cannot be dragged or right clicked in order to save it.
Using some coding knowledge it is possible to ind out the myimage.gif part, which can be added after the base URL in order download the image and save it. For example if the HTML page is at http://www.example.com/mypage.html the image could be found at http://www.example.com/myimage.gif
As I mentioned it is still possible to save the image, but for inexperienced people it is a lot harder.
Note: In this example the image is just put in the HTML tag, but with proper use of a CSS file, it is even harder to find for inexperienced people.
You cannot prevent a user from saving something from the web to his PC. The nearest thing that comes to my mind is the -moz-user-select CSS property... https://developer.mozilla.org/en/CSS/-moz-user-select
This javascript snippet does exactly what OP asks:
document.addEventListener("dragstart", preventDrag);
function preventDrag(event) {
event.preventDefault();
}