I'm sure I'm going to smack myself when someone points out what I'm doing wrong, but I cannot for the life of me figure out why I can't get an alternate text to appear when an image does not load.
I have the following code with obviously the wrong path to an image (to simulate the image not loading for some reason):
<form>
<input type="image" src="image/not.here" alt="Search"/>
</form>
However, I don't get a button with the text "Search" on it which is what I would expect.
Can I accomplish this?
Thanks!
jsfiddle: http://jsfiddle.net/kralco626/hd4Dy/4/
If you're using Google Chrome/Safari, the browser don't display the "Search" if it is longer than the img width.
There's nothing wrong with your code. Try add style="width: 700px; height: 400px" on your second input tag just to see that the text is there.
Further information:
http://blog.paciellogroup.com/2010/01/alt-and-title-content-display-in-popular-browsers/
PS: I.E. is showing the "Search" text.
You're missing a =:
value="Find"
Also, it depends on the browser. Some show the alt text in case the image is not available others don't; so it's not an error per se. Browsers for the visual impaired, for example, always show it.
Related
I thought this would be easy, but clearly it takes someone smarter than me to do this. My project as a special currency symbol to use instead of $. We have been using it as a tiny image and imbedding it with <img>. But, cannot use it in an <input> field. In particular want to make it part of the button text in a type=submit <input> field.
I have read a lot, but not understanding what makes sense to do this. I created a private character using Windows Private Character editor, but I need a way for html to render it for me in an <input> field.
I was reading about <glyph-data> and also icon fonts. I had this feeling (just a feeling) that icon fonts might do this for me, but it looked like quite an investment in time to get it done.
Can anyone suggest an approach for this that makes sense?
There already is common currency sign: ¤ (¤ or ¤).
I'd advise to get your desired "private image" in SVG format, visit IcoMoon web application, upload it there, generate webfont while assigning the corresponding character point 00a4. By this you'll get backwards compatible representation of common currency sign with alternative shape of your will.
You can use and image or an icon in a button, here is a good example of how to do it - Font-awesome, input type 'submit'
Creating a special character is nothing more than creating a logo or something similar. You need to export this symbol to SVG and use it either as embedded SVG or an icon font (I suggest http://fontello.com/).
Also, please note that if you only want to use it in a button, you can use <button> tag, like this:
<button type="submit"><img src="your/image.png" alt="currency"></button>
It will work just like input[type="submit"].
You can set the background image of a button (or any input field really).
#submitButton {
background-image: url('/link/to/image');
background-position: left center;
padding-left: 12px; /* or whatever your image width is */
}
The above CSS assumes you are putting additional text in the submit button
<input type="submit" id="submitButton" value="Some text"/>
If you don't put any text and only want to use the image, you can just set the background position to center center and remove padding-left
during page transition am using gif image to represent as 'loader' .But first 2 or 3 navigation i can see the image and rest of the transition instead of image am only able to see the "alt" text i have give with blank imagebox.
I think the image is not loading,please check my code
<div id="loadinggif" class="overlay" align="center" style="display:none;">
<img src="img/gif.gif" alt="loader" height="50" width="50">
</div>
and when i click one page navigation am using following code
$('#loadinggif').css('display','block');
Please check my screen shots first one is working perfectly ,second screnshots showing the exact problem am facing now.
Are your 'pages' in the same file/location? Make sure the relative path to your image is correct everywhere you use it.
Another thing would be to clear your browser cache.
If you still cannot get it to work, I would suggest inspecting it when it doesn't load, and looking at the browser's console. Depends on the browser, but most you can right click the image then 'inspect element', or something very similar.
Try to fully qualify the image. Such as https://mywebsite.com/img/spinner.gif. Now, if that fails, do not give up on life, there is still hope! What I normally do, is have a div with a css/Less class that has the image in it. That way, the image is loading through the dom, and to hide n show, simply hide n show the dom element with that specific class.
Let me know if that works.
Cheers M8.
I want to make a submit button like
<input type="submit" value="→"/>
however I am not confident in the user having a font installed that covers →. I would like to use text where possible so that it is more consistent with the rest of the page, but replace the text with an image of an arrow when necessary.
Is there a way to test whether a glyph for a particular character is available?
No, there is no such mechanism in HTML – you can specify a text alternative to an image (via the alt attribute in an img element), but not vice versa.
In practice, with a character like “→”, the main problem is not the presence of glyphs (it is hard to find a computer that does not have any font that covers “→”), but their quality. In many fonts, “→” is thin and small, thus unsuitable for use in a button. In some fonts, like Calibri, it is oddly shaped. And it is not that useful to try to make the character match the rest of the page typographically, since here “→” would be used as a standalone symbol rather than a text character.
Thus, it is probably best to use an image, e.g.
<button type=submit><img src=arrow.png alt=Forward></button>
If you look at this project you should be able to write the arrow and if the div width/height is the wrong size then assume the font doesn't exist, or use the code for a specific font and if that doesn't exist then use your image
http://www.lalit.org/lab/javascript-css-font-detect/
It can be done with javascript but not html.
Try this:
<input type="submit" value="→"/>
I'm using prettyphoto for the first time, very nice tool. I would like to know if more people have this problem. Its not crucial but I hate to not do things because I dont understand them. This is the code:
<div class="single_left">
<img src="_img/examples/thumb-1_50.jpg" alt="WHATEVER INFO" />
</div>
It works perfectly. But I have a doubt. If you look all the code you will see that its quite simpel. Its a div in which inside there is a <a> and inside there is a <img> thats acts as a thumbnail. As any for any <img> you need to add an alt="" atribute. The idea of this atribute is that if somebody has slow internet or if the image fails to load, a small description would be displayed in a text format, this will be the content of alt="". In this case "WHATEVER INFO" (Check code above). So if the image is displayed this alternative text shoud NOT be displayed.
ok... clear
The issue is that with prettyphoto if the picture is zoomed from a click you can see the alt="" text on top of the frame of prettyphoto. So in this case WHATEVER INFO would be displayed. This is not its purpose and of course breaks any design plan.
Does anybody know why this happens??
Is there a way of solving this so I can put some alternative text??
According to this link, add this CSS code to css/custom.css to do what you want:
div.ppt, .pp_description {
display: none !important;
}
I can let you know that the answer to my question os exactly like this:
div.ppt {
display: none !important;
}
This will make the alt value not displayed.
What I don;t know is if the picture is not loaded if the alt will work as such... At least you know how to take it out.
Greetings!!
I am developing an app where users can choose the URL of their profile, ala facebook.com/name. Everything worked out fine, except I'm having styling issues adding a static set of text inside the input, to help convey the message of having your own URL.
Here's what I want the input to look like when the user is visiting the page:
And here's what I want it to look like when they add their own input:
Half of this problem is easy, I can just set a large left-padding to the input, get it to display hover effects regardless of where the mouse is and place the input accordingly. But the issue is getting the text into the input line without breaking the styling around it (and preventing the user from being able to select the static text, so that even clicking the static text will "focus" the input field behind it).
I'd really prefer to use pure HTML/CSS, but could use Javascript if it's a must.
Here's where I am now, the goal is to bring the "www.website.com" text into the input field without breaking the styling of the textarea to follow: http://jsfiddle.net/rUkS8/1/
Thanks and sorry for such a long description!
Why not bypass the problem and simply have that static text outside of the input?
www.website.com/<input type="text" name="url" />
This degrades nicely in older/brain dead browsers, works when javascript is disabled, and makes it obvious where the seperate of inputs is.
If you use a label and the for attribute, it will handle the click events for you:
<div style="border:1px solid #000;">
<label for="textinput" style="cursor:text;">asdf</label>
<input type="text" id="textinput">
</div>
If you click on the label, it will send the focus to the input. Putting cursor:text; adds to the effect. All you have to do is play games with size and border and you're all set.