Is there a way to display an image on a webpage such that it won't be copied if the surrounding text is copied?
For instance, I'd like to be able to put a diagonal up arrow after hyperlinks opening in a new window, but I'd like users to be able to copy the link with its surrounding content without copying the up arrow image.
Possible without extravagant CSS?
EDIT: I don't care if the user has access to the image, I just want a streamlined copy-paste experience.
You could use a background image in the CSS of an element like a <div>, but if they want a copy of the image there are still ways of getting it.
If you use a CSS background-image on a div for example, it will not get copied.
Use div and background image for that div, if you can.
Related
I created this single page site (https://pixelwatch-bycliff.web.app/) using HTML, CSS and JS but I thought of going extra by adding this video clip (https://www.pexels.com/video/multi-colored-vapor-1943483/) to the text (Wear OS) so the text would be vibrant while coming to life with the video. PS: I've tried doing it myself but can't get it to work, any help right now would be greatly appreciated.
Link to the files on github: https://github.com/ManLikeCliff/pixelwatch-bycliff
click to view the text
I think there are two ways for you to achieving it.
Making the text with overlayed on the video as .gif format. That is, you are basically inserting image file.
I believe you wanted to do with CSS. Then, you might as well think of layout wisely.
First, make your video goes back to the text. In this case, video could be set as a background. Then, give z-index to the overlay text above by giving position: absolute; attribute.
If you want, you may check here
I am facing a problem in css alignment.
The problem is, i have a single image which is like collage with multiple images in it.
I want to postion on particular image in that collage using css.
I need to set that in my div background.
I checked in internet, i am unable to find a proper solution.
Thanks,
Karthikeyan J
If you download a chrome addon called "SelectorGadget" you may be able to get the exact CSS selector for what you are trying to edit. Then just apply styling to this element. If you post your code, might be able to help more though.
I'm playing around with Active Desktop on an old WinXP machine.
I have my background set up with an iframe and links pointing it to certain folders to make it easier/faster to navigate. I'd like a link to change the background-image of the iframe without having to resort to make a new page everytime I find a new image I want as a background-image. While I have no clue how, I'm fairly sure it's something CSS ought be able to handle.
The catch is that Active Desktop refuses to run Javascript.
So is it possible to change the background image of a page by clicking a link without using javascript?
via CSS you could use the pseudo :hover
However, that would only last for as long as you hover. If I understand you correct, you want a permanent change of image without scripting, or just without JS? You could try WSH. Perhaps there is some useful function in there, or maybe VB?
When I search in Google, instead of their main page, when I look at their logo, and copy the image path, it shows that:
http://www.google.com/images/nav_logo91.png
Well, it is not a logo only, it have many icon as well. Is there any reason why Google use this way to do so? any results or just for showcasing their technique skill? Also, how can only show a part of a image only? Thanks.
It's a sprite. Doing this can reduce file size and load time.
You can splice the image using JavaScript or using CSS (CSS being the more popular choice). You can make the element with a div tag, then set the background-image property to the URL you've specified. Then use the background-position property to align it appropriately. Lastly, set the expected width and height of the div.
Its called CSS sprites. A lot of websites use this technique, where in all (decorative) images on the site are contained in a single image.
This single image tends to be smaller in size than the sum of all the individual images (each image holds its own color table). Also, fetching a single image from the server means lesser HTTP server requests.
The large image is then placed as backgrounds in div's and manipulated using background-position and other CSS properties to ensure only the portion of the sprite shows that is required.
It's like animuson has already explained, they're called CSS sprites, to expand a little they are used to prevent excess HTTP Requests.
By having just one image to load, it is cached and then the website can use that one image for multiple backgrounds but only make certain areas viewable by using background-position.
A good explanation is here: http://css-tricks.com/158-css-sprites/
Hi I have been trying to trying to hide a portion of image for my blog. Basically what I would like to do is to have images of different sizes (or same width but different heights) on my blog's single post page. But on the main page of the it should show only a portion of it, the size of the visible image should be same for all the images.
I hope the above is clear, just in case I the above explanation is not clear here is a site that works on similar way http://www.creativeapplications.net/
Now I could not get if it's done using CSS or some sort of Javascript.
Could you guys help me to understand it and achieve similar image effect.
Thank you
Takias
You want CSS' clip property: http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html