Chat

Removing all images from a webpage in an iframe using CSS or JavaScript

I would like to remove all images that are to be displayed on an HTML file, which contains a refreshed iframe.
Is there possibly a method using CSS or JavaScript that would do so? The page that loads the iframe uses the code below.

function reloadIFrame() < console.log('reloading..'); document.getElementById('iframe').contentWindow.location.reload(); >window.setInterval(reloadIFrame, 3000);

       
  
News
 
   

1 Answer 1

You can do this using javascript. Check updated snippet below..

if(document.getElementById('iframe')) < var images = document.getElementsByTagName('img'); for (i = 0; i < images.length;i++ ) < images[i].style.display = "none"; >>

 
  
News
 
 

I think this may not work due to the cross-origin policy. It should work if the iframe source is on the same domain though.

The same origin policy won’t have any effect on this code: It doesn’t event attempt to access the document in the frame.

@Nivin — That’s not a good assumption. The code clearly shows that it will not do that. There’s no attempt to access the contentDocument (or any other property) of the iframe element in this code at all. This code checks to see if an element with the id iframe exists as a precondition for hiding all the images in the current document (but not any document loaded into the frame).

Источник

Hiding images from HTML code [duplicate]

I want to hide images from my HTML code. I’ve disabled right click, which is pretty easy however the page source can still be viewed. Is there a way to hide all images from the HTML code so that the images cannot be stolen from the source code?

3 Answers 3

I’m afraid that there isn’t a way to 100% stop a user of your site from getting into the code.

Not sure what the images are for but a couple of things you can do are:

• Watermark your images.
• Obscure the link by converting it into hexadecimal. (More on this on Google)
• Bury it in divs or a table
• Use Low Res images.

But as you’ve already disabled right-clicking that stops casual users from taking them.

Your browser will always need som kind of source to view the image, so you’ll always be able to find it in the source code. However, there are ways to make it a little bit more complicated.

For example, using PHP, you can load the image through a script to hide the real URL and prevent some users from seeing it.

But remember, if the image is visible on the page, there will always be ways to steal it.

If you publish something in the web, you can’t restrict the user. They can save anything from your page to their computer. But you can use watermarks on your images but still the user can download but can’t steal.

Other way is you can convert your image into data-uri so user can not download the image. But it has its own limitation. But it may worsen your site’s performance depending on number of images and size of the image.

Linked

Related

Hot Network Questions

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Hide all images except 1st image without CSS

I’m working on this site where the product images are being shown with a little «color filtering» feature. The problem is that both images are visible untill you hover over a color-box, because at that time my Javascript takes over and shows/hides the current image/color (see code in the bottom). I’m using a plugin called Slimsy to Umbraco 7 which makes the cropUrl’s responsive but it doesn’t work if I put a display: none on the .categoryImage containers, it must be something within the plugins. What I need is to NOT use display: none on each .categoryImage container, but somehow hide all the images except the first one so the plugin can determine the width/height/whatever it is it needs. My javascript:

$(".frameColor").each(function () < var categoryImage = $(this).parent("div").next("a").find(".categoryImage"); categoryImage.first().show(); if ($(categoryImage).length >1) < $(this).on('mouseover', function () < var color = $(this).data('color').replace('#', ''); $(".frameColor").removeClass("active"); $(this).addClass("active"); $(categoryImage).hide().filter(function () < return $(this).data('frame-color') === color; >).show(); >); > else

@foreach (var bikeColor in images) > else > > 

1 Answer 1

To target all of .frameColor except for the first one, in your $.each() loop, you can do

$(".frameColor:not(:first)").each(function () <>); 

And to hide them without using display: none; you can use opacity: 0; or visibility: hidden;

Hello Michael, using opacity or visibility will result in an empty container with nothing inside, it’s here a display: none would be great not useful.

Because inside the .categoryImage container there’s an image. That image gives the container a width & height.

@S-works css opacity property value does not affect css width or height property values of an element. Note also, elements at linked page do not have width or height attributes set at element. Can you include a snippet of rendered html at Question?

@guest271314 try and go to the link provided and inspect one of the products with two images. If you add a opacity: 0 on that element, it won’t disappear.

Источник

Concealing all images that have a corresponding SRC attribute using CSS

How can I hide a portion of an image using CSS for larger screens in a responsive design, while still keeping the entire image present for smaller screens by adjusting the image proportions with a media query? The CSS for the image container can be used to cut off the left side of the image. The same CSS can be used for the media query, with dimension adjustments as necessary.

CSS hide all images with matching SRC attribute

Can a CSS rule be developed to assign a style to IMG tags with a SRC attribute containing a specific specific string value, such as «hideme»? As an example, if there are three images on a webpage, would the second image be hidden by this CSS rule?

Use this CSS3 attribute selector:

If the objective is to hide an image based on its src attribute, then the above code would suffice. However, if given a choice, I would rather use a hideme class instead.

Css — Hide image after screen resolution is below 600, It is easy to hide an image using media queries and display:none; (as per the other answer): @media (max-width: 600px) < .post .sc_image img < display: none; >> However the image still loads in the background — which definitely isn’t ideal for pagespeed and core web vitals.

Hide part of image with css

For wide screens, I aim to conceal a portion of an image using CSS in a responsive design. However, I want the complete image to remain visible to modify its proportions with media query and display the entire picture on smaller screens. I created a basic page as a sample of my desired outcome, but it isn’t functioning correctly. Regardless of the screen size, the entire image is always shown. The sample page can be found at http://longinsurance.biz/temp.html, with the objective of exhibiting the top 82% of the image.

Is there any recommendation for rectifying my mistake or enabling it to function properly?

In case you wish to conceal certain portions of a picture, here are the steps to follow.

CSS for containing images.

The CSS for cropping the left side of an image.

To handle the media query, simply utilize the CSS that is already in place and modify the measurements as necessary.

Kindly note that a greater negative value indicates more severe cutting.

Css — Overflow: hidden is not working with images, I have this CSS code: #portrait < height: 300px; width: 550px; border: solid; margin-right: auto; margin-left: auto; word-wrap:break-word; overflow: hidden; >.image CSS Image overflow hidden without stretch. Related. 3220. How can I change an element’s class with JavaScript? 2403. How can I make a div not …

CSS hide an image when scroll

My goal is to incorporate an animation that shifts an image, which will then be concealed as the user scrolls down the page.

This image would function properly if it doesn’t have any animation. The content will conceal the image as the user scrolls down.

After attempting to add keyframes for the animation and scrolling down, the image remains visible and the content does not hide it.

To make it activate upon scrolling, JavaScript must be utilized.

Upon scrolling of the document, the event listener will be triggered and the scroll position will be evaluated to determine whether it has surpassed 350px. In cases where it has, the header’s opacity will be set to 0. Conversely, if the scroll position is below or equal to 350px, the opacity value will be calculated.

Assign an identifier of «header» to the header element.

let header = document.getElementById('header'); document.addEventListener('scroll', function() < // Get scroll position let scrollPosition = window.pageYOffset; // Calculate whether the scroll it 350px or not then set the opacity to face the header out if (scrollPosition else < header.style.opacity = 0; >>); 

(In reference to below comment)

Ways to achieve a fixed background image.

The image stay can be achieved by setting the background-attachment property in CSS, while the content slides over.

HTML CSS hide overflowing parts of image, HTML CSS hide overflowing parts of image. Ask Question Asked 6 years, 9 months ago. Modified 6 years, 9 months ago. Viewed 445 times 2 I am new to Web Development. And I am having a problem. This is the image i am talking about: How do i set whatever part

How to use css/html to hide image with src like *-1.jpg or *-1.gif?

How can I conceal certain images identified by names such as *-1.jpg , *-2.jpg or *-1.gif within the img src tag? Although I came across some solutions, I’m unsure about their applicability to my specific query.

Is it possible to display a href while concealing img src?

Utilizing the attribute selector $= allows for matching the conclusion of the src attribute.

[att$=val]

This selector denotes an element that has the att attribute, and the value of this attribute has a suffix of «val.» If the suffix is an empty string, then this selector doesn’t refer to anything.

Your inquiry lacks clarity regarding the specific element you aim to conceal. However, considering the information you have given, I suggest using three distinct selectors to correspond to each scenario, which seems to be the most straightforward approach.

img[src$="-1.jpg"], img[src$="-2.jog"], img[src$="-1.gif"]

CSS has the capability to select HTML elements using any of their attributes, including classes and IDs. Additionally, further information is available on this topic.

Источник