As per the default behavior, alt attribute is rendered first time just before the image rendering. I am displaying 25 images in a grid so it looks bit awkward as all alt attributes are displayed first.
Is it possible to hide alt attributes in Firefox?
Note: alt attributes contain dynamic names in my case.
After trying all the other methods here, I found this method works best which makes the text transparent until the image loads:
.yourClass img {
color: transparent;
}
The way to prevent alt attribute values from being displayed is to remove the attribute.
The meaning of an alt attribute (not tag) is that it specifies an alternative, a substitute for the image, in situations where the image is not displayed. So if you want to hide it when the image has not yet been loaded, you are asking for behavior that contradicts the very meaning of the attribute.
You can however make the alt text invisible (with the usual CSS Caveats) on Firefox by setting e.g.
img { background: white; color: white; }
in CSS. This implies that the alt texts are invisible also in case the browser never gets the image, or the browser has been configured not to display images.
From the reference of all the above answers, I figured out best one is to use
img:-moz-loading {
visibility: hidden;
}
Suppose there is no image and we use color as white or transparent then alt attribute no more use so, we need this attribute if there is no image to show which image here to load and to show alternative text to display.
Old question, but as of 2020, the img:-moz-loading {visibility: hidden;} does not work any longer.
Instead of doing img {background: white; color: white;}, I think it makes a lot more sense to do this:
img {
color: transparent;
}
That way it doesn't mess up images that are supposed to have some transparency. Also, it doesn't affect the rarer cases when you need to set a background color for an img.
For bonus points you could do this:
<img src="src.com/src" onerror="this.style.color='black'"/>
That would revert it to the normal alt color in the event that the browser fails to fetch the image.
Of course this is tedious to add to every image, but easier if you are using a JS framework with a global <Image/> component.
In addition to setting to:
img {
background: white;
color: white;
}
I like to disable Firefox's default image behavoir as well:
img:-moz-loading {
visibility: hidden;
}
Could you place the dynamic names in the title attribute?
You could try a black background or black background image; maybe Firefox still uses a black text color.
Maybe img { color: white; } would do?
If you don't mind adding a little extra, here it is:
<img src = "283414_2114217089554_728204_nn.jpg" onload="this.setAttribute('alt','this is the alt of my image');" />
Hope that helps... :))
Rather than worrying about the alt function, you can give all your images a common class, say image-to-show and create a loading div absolutely positioned over this image. So, when the page loads, you only show the loading div, with a loading gif, something like this:
// show loading image
$('.loader').show();
Once the image is loaded, you can hide the div and show the image.
// main image loaded ?
$('.image-to-show').load(function(){
// hide/remove the loading image
$('.loader').hide();
});
You can further enhance this code by using specific image ID's. Another, cleaner way to do it would be to set data-loading to true for the images that are loading and once the images are loaded, set $('.image-to-show').data('loading', false)
There are multiple ways of tackling this, let me know if you need further clarification.
I'd start by adding this CSS, which will hide all images with alt text (not display: none because we want to undo this and we won't know what to undo to):
img[alt] {
width: 0;
height: 0;
}
And then showing it once it's all loaded (this uses jQuery):
$(document).ready(function() {
$('img[alt]').on('load', function() {
this.style.width = 'auto';
this.style.height = 'auto';
});
});
Related
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
Basically, I have a couple .svg images put into an <img> tag on my HTML page like that:
<img src="images/corner.svg" alt="menu" class="menu" onClick="Fade();"/>
All of those images are overlapping with each other. They have the same size but different content.
I'm now trying to make only the content of those images clickable.
With pointer-events: visible; or pointer-events: painted; in CSS that seemed to be possible, but i can't get it work like that. The image still receives clicks at every point in it and not only on the content part.
I tried pointer-events: none; on the top image and that disabled clicks on the top image, which sounded like there was no mistake in the HTML or CSS code.
I created those .svg images in Illustrator CC with a transparent background, so normally there can't be content, and I exported it with the following options:
(sorry for this being in german)
I have no idea where the problem could be.
I've had success inlining the SVG, setting the pointer-events to none for the SVG elements, and then setting the pointer-events for the path element within the SVG to fill. Here's a CodePen example.
svg {
cursor: pointer;
pointer-events: none;
}
path {
pointer-events: fill;
}
The problem is that you're using an <img> tag. They work like rasters even when the data is SVG i.e. the individual items don't really exist, it's just a picture which you can either have as entirey clickable or not.
If you want the drawing to be interactive you'll need to use an <object> or <iframe> tag and then you can make the individual shapes clickable or not by using the pointer-events attribute.
You could also include all the svg data inline in the html file but if you did that you'd need to make sure all the id attributes were unique.
This is what worked for me
svg {
pointer-events:none;
}
svg *{
pointer-events:auto;
}
don't hesitate to add !important in case it has conflict with your current style.
I have a bunch of server-side generated images with the following HTML tags:
<img width="75" height="75" src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1">
The problem is that the images show the default "blank document" (or "missing image") icon and a border while they are loading. It looks like this:
After images are loaded, the icon of course disappears, and the broder gets set to the one I specified in my CSS.
I don't want to create fancy preloaders and what not, but I would like to make this "blank document" icon and the default border to go away. Although the user sees it for a less than a second, still that's not good because it creates an impression that something is wrong with my images.
How do I make that icon not to show up while images are being loaded?
One idea was to set background for images, but I cannot do that because images have transparent areas, and then some parts of the background will be visible after the image has been loaded.
UPDATE WITH A WORKAROUND
I noticed that if I do not specify width and height, the default missing icon and border is not shown while the image is loading. As a workaround I did the following:
<div class="imgholder"><img src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1"></div>
and style the image holder as follows:
.imgholder {
border: 2px solid #ddd;
margin: 2px;
padding: 2px;
width: 75px; /* fixed dimensions - should match image sizes to avoid cropping */
height: 75px;
overflow: hidden; /* never show scrollbar */
float: left;
}
Still, it would be great to have some way to style the loading image itself and get rid of that image holder <div>.
Does the broken icon show on every browser? Either way, have you tried this jquery plugin: Imagesloaded ? It may help in your case.
You can use alternate text property.
One question how you are loading images? Loading using async calls or loading these images while page loads?
$("img").on({load:function(){},
error:function(){
$(this).attr("src","blank.png")
});
Is it possible to change the value of src attribute of <input type='image' alt="Text will be shown if pics are disabled" src='somepic.png'../> by css?
The problem is:
I want to specify which pic will be shown as submit button just using css (so the design team will change only css files!).
If I use the alternative way like <input type="submit" class="cssclass" value=" " alt="Text will be shown if pics are disabled"/> and specify the background of this element in css - it doesn't work well if pics are disabled. - No any alternative text is shown instead of pic. However the first way solves this situation...
Please advice something
Thanks.
Here it is: http://jsfiddle.net/kizu/66JXn/
Some notes about this solution:
Use <button></button>, 'cause it can include other blocks.
You'll need a bit of extra code to make all these work in Fx and IE:
For Fx you need an extra wrapper inside (there are positioning bug) and some extra -moz- properties reset.
For IE you must shrink the original button, 'cause there are some extra padding that is hard to remove.
You place the text and another element inside, that would overlay the text. So when the images would absent, the text would be accessible.
That's it :)
No, and this is bad practice. CSS is for static content only.
What you should do, is define a template file with variables in it such as:
template.js
my_backgroundImage = "url('somepic.png')";
then your file would load
x = document.createElement('image');
x.src = my_backgroundImage
Attribute selectors might work, but they aren't very flexible. Try this one:
img[src=""] {
background-image: url('none.png');
height: 100px; /* Height of BG image */
width: 100px; /* Width of BG image */
}
It doesn't change the image's src= attribute, but it performs the same function.
Here's my idea.
You can use JavaScript to read the stylesheets of <img> tags, and modify them accordingly.
I'm talking about a class whitelist, like big, small, center and all other classes applied to the images are interpreted via JavaScript. The design team could use CSS, but it would not render in the expected manor, like this (Python + JavaScript):
for every <img> tag:
if tag.classes contains class not in whitelist:
for every class not in whitelist:
this.src = newClass.backgroundImage;
this.removeClass(newClass)
It reads the CSS for the background-image property, but it just steals the URL of the image and sets the src= attribute using that URL. Then, the JavaScript would delete that class, causing it not to render.
(This is a problem for which JS is the solution, but ignoring that:)
One option is to wrap the button and an extra div (lets call it div.overlay) in a parent container.
Set the container to to position:relative.
Set the button to only display text, as usual. Set the div.overlay to position:absolute, width and height to 100%, and left and top to 0, and a z-index higher than the button. Set the image you want to display as the background-image of div.overlay.
With images enabled, the user sees the image, and the image can be changed using only CSS.
With images, or CSS disabled, the user only sees the plaintext submit button.
You might have to do some trickery to get clicking div.overlay to submit the form, perhaps just make div.overlay a duplicate submit button. Also, who knows what Googlebot makes of overlay techniques like these.
It's ugly, but the only pure CSS solution that immediately jumps to mind is a kind of image replacement with relatively poor support. That's using :after. It's kind of a poor practice due to the misuse of :after, and the support is pretty iffy, and I think it'd be iffier for an input element, based on the last time I tried to use :after on an input...
.cssclass,
.cssclass:after{
display:block;
width:100px;
height:100px;
}
.cssclass{ position:relative; }
.cssclass:after{
position:absolute;
top:0;left:0;
content:url("button.jpg");
}
See http://www.rachaelmoore.name/best-practices/css-image-replacement-ii/ for more.
Or setting the default src to a shim and always using CSS to set the desired button as a background image. Which I just noticed you've already thought of. I imagine that should work just fine.
Ok... So I hate it when I ask a specific question and, instead of answering it, they give me some crappy work-around instead of answering the original question that I asked... But for some reason, I've decided that I'm going to do it to you.
If I understand the problem correctly, you just want to have a form button with a background image and if the background image doesn't load, you want some sort of alt text displayed to the user with the caption of the button? If that's not right, stop reading and "down arrow" me.
In apps that I've made, I've always just styled the input with a background image, but left it up to the HTML control to insert text... It's good for three reasons... buttons can be styled, developers can change the value of the text on the button without having to bother me to make a new image, and if the background image doesn't load, the button is still readable.
So my html was like this:
<input type="submit" id="btnSearch" class="searchButton" value="Search">
then my class may read something like:
.searchButton {
backgorund-image: url('searchButtonImage.png');
font-family: sans serif;
font-size: 10px;
color: #808080;
padding-left: 50px 0px 0px 0px; // Assuming a magnifying glass icon or whatevs is on the left and is 20-ish pixels
width: 100px; // you can put this as in-line style if you make a more generic class
}
If you want to make the BG more generic, move the width of the button to make it in-line on the button, so the devs can change the width with the text value and make your generic bg image like 200px wide.
Depending on the browser, the text might not be as nice and ani-aliased as in others, but IMO, it's a small price to pay.
(Disclaimer: Please forgive me if you copy and paste this and it doen't work. I just hand-wrote it without testing it.)
Can you do it with javascript?
I have an image on my page that, when clicked, will show another button, and also change the src attribute of the first.
Here is what I use:
<script type="text/javascript">
function apps()
{
var element = document.getElementById("app_frame");
if (element.width != "0%")
{
parent.document.getElementById("frame").setAttribute("width","100%");
parent.document.getElementById("app_frame").setAttribute("width","0%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/show.gif");
parent.document.getElementById("wthrbutton").style.visibility="hidden";
}
else
{
parent.document.getElementById("frame").setAttribute("width","65%");
parent.document.getElementById("app_frame").setAttribute("width","35%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/hide.gif");
parent.document.getElementById("wthrbutton").style.visibility="visible";
}
}
</script>
What that says, is: set the "app_frame" as variable "element",
then check variable "element" for its width.
if its width is not 0, then it gets the element "frame",
by using getElementById, and then sets the attribute "width" to 100%
you can see slightly lower down that you use the same method, but use the SRC attribute rather than width, and set it to whatever you want, in my case, site/main/images/apps/show.gif
hope that helps
When I have an <a> tag set to a specific image background like this:
HTML:
Click Here
CSS:
a {
background: transparent url(button.png);
}
and I want the background to change whenever a user hovers over the spot, like this:
CSS:
a {
background: transparent url(button_HOVER.png);
}
The hover background image flickers (takes about 1-2 seconds until it fully loads) when a user hovers over the link.
I could save the file as GIF and minify its size and loading time, but that would harm my specific image tremendously (it's big and highly graphical).
That's why I was looking for a better solution, such as perhaps counting on the browsers ability to cache images. Hence would I apply a style to a button like this:
CSS:
a {
background: transparent url(button_HOVER.png);
background: transparent url(button.png);
}
So that the image button_HOVER is first cached. It has seemingly affected the "flickering", but not completely. I thought of maybe creating a hidden tag with the HOVER image, so that maybe the result would be different.
Do you think there's a better way to solve it? (I emphasize I want to keep the file as PNG, it weighs 6-7k). Is my method efficient?
Your solution would be to put both images (hover and active) in the same image file. Positioned on top of each other. Also known as Image Sprites. The browser will load the entire image file. On hover, you just change the background position.
Assuming the active image is at the top, and the hover image is positioned directly below that..your css code would be something like:
a.link {
width:70px;
height:24px;
background: url(image.png) top no-repeat;
}
a.link:hover {
background-position: bottom;
}
Notice background-position. Here I use top and bottom. You can specific exactly in pixels too. The entire image in this example would have a width of 70pixels and height of 48pixels. Some sites put all their small icons into one image. Loads altogether, save on requests too. :)
No need for preload scripts in this case.
The basic options available are to use an html element that's hidden from the viewer, or use javascript.
The html approach is probably the simplest, though:
<div id="preloadedImageContainer">
<img src="img/to/preload_1.png" />
<img src="img/to/preload_2.png" />
</div>
with the css:
#preloadedImageContainer {position: absolute; top: -1000px; left: -1000px; }
or, with javascript:
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
the jQuery approach was lifted in its entirety from this page: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript.
Though the best approach would probably be, as Lyon suggests, css image sprites.
You should search about this topic "preload images" You will find ways to preload images using css and javascript.
I believe that if you put a hidden image with source equal the src of png images you will use in the css files, this will make the images loaded when the page loads, and CSS work will be just switch preloaded images.