SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question A question about selecting images

    Hey all i'm new here and found this site quite useful to ask my question. So, I wanted to know how to avoid images on my website from getting selected. Now what I mean is, check out this site and there you'll find the image "Free forever. Sign up today!".. We are unable to drag or select it! How do we do that? I hope you know what I mean.

    Thanks.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Welcome to SitePoint.

    That's yet another unsung advantage of using CSS. What you are seeing is background-image (part of the CSS) to an element and not a IMG tag. This is why you cant select it or D/L it.


    assuming you had a 150 x 50 px image named myImage, here is hands on example:

    <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>
    p{padding: 10px 10px 150px 10px; background: url(myImage) no-repeat center bottom; }

    You can now see the image centered at the bottom or your paragraph and the TEXT CONTENT can be selected and copied, but not the image.

    Hope that helps.

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so does that mean if my image (myImage) is just a transparent image, I can hide any text behind it?

  4. #4
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,598
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Mr.Anonymous

    Is your aim to prevent visitors copying the image (either by right-clicking and selecting "Save as", or by copying to the clipboard)?

    If so, then using a background image won't achieve that. Depending on the visitor's browser, they might be able to "view background" (which will open a new browser window, with the image displayed as a normal image), or use a tool like FireFox's Page Info (which gives direct access to each individual image).

    If your reason for preventing the image being selected is purely cosmitic, then none of this applies.

    Mike

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mr.Anonymous View Post
    Ok so does that mean if my image (myImage) is just a transparent image, I can hide any text behind it?
    That text, as you've seen, is in an image that is otherwise transparent. So if you are asking about hiding text behind this image, then the answer is really No, because the text will show through the image. It's a good idea to provide text for those who can't see the image, but to do it well, it's best if the image isn't transparent. If the image is transparent, you can have the text there but move it way off screen. That way, it can be read with CSS off or by screen readers, but people with images disabled won't see the text. So ideally, use a non-transparent image. This is called "image replacement". Here's an example of it:

    http://www.pmob.co.uk/temp/headerreplacement3.htm

    Of course, as others have said, this may not be what you are asking at all.

  6. #6
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mikl View Post
    Mr.Anonymous

    Is your aim to prevent visitors copying the image (either by right-clicking and selecting "Save as", or by copying to the clipboard)?

    Ok just in short, my aim is that no one can just click and drag the image to url box. I want that if someone does so, the text would be highlighted instead.

    Greatest example, GOOGLE!

    Now if you goto the 404 page of google (click here), you'll see a picture of a robot.. right? That robot cannot be dragged anywhere compared to the google logo.

    Now thats what I mean.. How do we do that?

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,374
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    It's a background image:

    Code CSS:
    body {
        background: url("//www.google.com/images/errors/robot.png") no-repeat scroll 100% 5px transparent;
        padding-right: 205px;
    }

    (And as Mikl said above, it's very easy to save in Firefox by right-clicking and choosing "View Background Image".)

  8. #8
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    It's a background image
    Ohh dint notice that.. but still how do we do the thing I mentioned? Select text instead of image ?

    Quote Originally Posted by TechnoBear View Post

    (And as Mikl said above, it's very easy to save in Firefox by right-clicking and choosing "View Background Image".)
    I know that there are many ways for viewing the images, but I want my site to look kinda pro! :P

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,374
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Sorry - I'm not really clear what you're trying to achieve here. You want to hide the image and display text instead any time somebody clicks one of your images?

  10. #10
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm.. NO. Ok here is the final thing I could do.

    Here is a picture from a certain part from my website.



    Over here you can see the image "Upload". I can actually click and drag the image anywhere.

    But what I wanna do is, No one can drag the image like that.. Here is a pic of what I mean (somewhat)



    The text is selected (highlighted) instead of the image
    If you understand what I mean.. The image is there, the text is also there, but when someone tries to drag that image, the text is highlighted instead.

    Hope that helps.

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,374
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    I'm still lost - that just looks like a background image to me. A background image won't be selected unless somebody actively chooses to select it. Isn't that what you want? Of course, that assumes that your image is purely decorative, because you can't add alt text to a background image. If it's a necessary part of the content, you shouldn't insert it as a background image.

  12. #12
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok can you just tell me is it possible to add a transparent image over any text so it cannot be selected?

  13. #13
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,374
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    You mean so that the text can't be selected? Yes. You'd need to have a very good reason for doing it, though. Anything that prevents "normal" behaviour, as web users have come to expect it, is liable to severely irritate your visitors.

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Holly crap.. I never new about FF view bg images!!! For the longest time whenever i wanted to obtain a bg image from someone website I went to VIEW SOURCE, searched for '.css' and scanned the code for the appropriate css rule... then followed that link. Which goes to show that even in handy browsers like FF, if someone really wants your image they will get your image.

    You could generate a pseudo element and use AP to pace it above your text/image.
    p{position:relative;}
    p:after{position: absolute; content:""; top:0; bottom:0; left:0; right:0;}

    Be forewarned that they won't be able to click on any of the links that are covered by the pseudo element either. As TechBear said, this is bound to just annoy users rather than protect you. But still, if someone wants your text they can just view source and copy it. In short if you don't want to share something.. don't post it on the web.

  15. #15
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    You could generate a pseudo element and use AP to pace it above your text/image.
    p{position:relative;}
    p:after{position: absolute; content:""; top:0; bottom:0; left:0; right:0;}
    I'm sorry i'm not trying to be annoying, but i'm quite weak in HTML and still in learning progress. How do you use the code you gave me above? Does that code place a transparent image over text if I have any? Or if you could give me a certain code to do so if my transparent image is " tpimg.png "

    Thanks.

  16. #16
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Holly crap.. I never new about FF view bg images!!! For the longest time whenever i wanted to obtain a bg image from someone website I went to VIEW SOURCE, searched for '.css' and scanned the code for the appropriate css rule... then followed that link.
    Print Screen is easier

  17. #17
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    How do you use the code you gave me above? Does that code place a transparent image over text if I have any?
    It does exactly that. Clear your mind and just follow and you wills ( other wis its really difficult to explain) Each HTML element can create up to TWO pseudo elements with CSS thus :before and :after;
    so .coverup:after {content:"";} creates an element after the last character in the element with class "coverup"

    you will want to position this pseudo element element so it's exactly the same size as your 'coverup' element and put it ABOVE your content element so in a sense it interferes with the cursor when the cursor hovers over the 'coverup' element.

    so now the code is :
    .coverup:after {content:""; position:absolute; z-index:10000}
    .coverup {position:relative}

    almost there, but we still need to make sure the pseudo element covers all of the 'coverup' element for this we use top:0; left:0..ect. so the final code is

    you do this by giving cover up position:relative; and giving the pseudo element position absolute and a a z-index of a high number

    .coverup:after {content:""; position:absolute; z-index:10000; left:0; right:0; top:0; bottom:0;}
    .coverup {position:relative;}



    To see this in action, put those rules in your CSS. and give some element that you want to be unhighlightable class='coverup'

    if ON TOP OF THAT you want to place an image.. you canmake the pseudo element rule as follows:
    .coverup:after {content:""; position:absolute; z-index:10000; left:0; right:0; top:0; bottom:0; background: url(path/to/your/images/yourPNG.png) no-repeat center center;}

    ( Still if you test is up on the web some can still copy it either by going to 'view source' or simply paper and pencil.. if you don't want info copied.. really the only way is NOT to put it up on the web)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •