I need to add some alt text and/or titles to some image tags on a webpage.
The html structure is not really in my control, so image tags are required even though the tags themselves are being set to display a flat colour derived from a hex-code stored in a SQL table.
Like This
<img style="background-color:{#hexCode};" title="{#colourName}"/>
With #hexCode being the colour code in question (i.e. '#1f1f1f') and #colourName being the descriptive name for the colour chosen by the client.
The problem I'm having is that because the colour is being set by the background-colorproperty the title text (and alt text does this too) is being displayed on top of the colour as well as on hover.
Google has not given me any useful solutions and I can't just not add the titles to the images? What should I do?
Why not use divs instead. The reason that the title or alt is showing up is because they are supposed to be displayed if the image is not found, and you are not giving a src.
<div style="background-color: gold; height: 30px; width: 30px;" title="Gold"></div>
However, if you must use an img tag with no source you can use src="//:0" to fake a valid source.
<img src="//:0" style="background-color: gold; height: 30px; width: 30px;" title="Gold" />
The problem I'm having is that because the colour is being set by the
background-color property the title text (and alt text does this too)
is being displayed on top of the colour as well as on hover.
No - The title and alt text is being displayed because your image is not loaded, precisely why they are used.
https://jsfiddle.net/b0njy0gg/
When an image source is present https://jsfiddle.net/thajo9pL/
I assume since you're defining img tags without a src attribute, SEO isn't one of your goals - if that's the case, the following solution of setting the font-size of your image to 0 will also affect the rendering of the alt text rendering, as you can see in this example:
img {
border: 1px solid #aaa;
display: block;
font-size: 0;
width: 200px;
height: 50px;
}
<img alt="Test" />
For anyone concerned about w3c validity or SEO-friendlyness: Do not try this at home!
Related
I was just wondering if I could make a circular image (transparent PNG), that only activates when you click the non-transparent part of it. Thanks in advance.
My code right now:
img {
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<body>
<img src="https://upload.wikimedia.org/wikipedia/en/9/98/Green_circle_filled.png" alt="circular image" onclick="alert('you can click anywhere in the border')">
</body>
</html>
To answer your question, No. What you desire is currently impossible with your current setup. If you'd like to restrict click events to the circle only, you have to first crop the image to have equal width and height, and then apply
border-radius: 50%;
This will ensure that the img element itself only takes up the same amount of space as the circle instead of just "containing a circle" (which is what your image does).
Although, this is the less preferred way. A better way would be to create an element that is a circle.
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: green;
}
<div> /* This the container */
<div class="circle" onclick="alert('You have clicked on the circle')"></div>
</div>
This has a number of benefits:
Your code is more readable
The functionality doesn't depend on a link to work (in this case, the Wikimedia link)
You may nest elements inside the circle as opposed to the image which is a self-closing element
An alternative would be to use and SVG as #j08691 suggested, but this would do exactly the same thing.
So i have a website i'am developing and i need to have an image as a background inside of a <div> tag in html, here is the current code i have so far:
<div id="menu" style="background-color:ffd700;float:left;height:600px;width:250;">
<div id="menu" style="background: #FFD700 url('myImage.jpg');">
The hex color value will be used if the browser the viewer is using an image blocker, unable to view the image, or if the image does not exist. The URL is the path to the image (can either be a relative or absolute path.
More info: CSS Basics: Background Properties
P.S. Even though this code block DOES in fact work, it is poor practice to set inline styles. You should always use an external stylesheet to separate your style from your content.
First of all, it's not very good practice to use inline styles. Since your div tag already has an id, you can apply styles to that id within a stylesheet. The code to do so would look like this:
#menu {
background: url("path_to_your_image") #ffd700;
float: left;
height: 600px;
width: 250px;
}
The part that sets the background image is background: url("path_to_your_image") the #ffd700 applies the color. However, since the background image is set to repeat by default, you won't see the color unless you specify that the background should not repeat. You can do that by changing the above line to background: url("path_to_your_image") no-repeat #ffd700.
Of course, if you don't want to use a stylesheet, the same thing applies. You just have to put that line in the style attribute of your HTML tag.
I am trying to style a box for the alternative text in pictures. If a pictures doesn't exist I want the alternative-text to appear in a box with text in it that looks like a picture. It works on PC, but it doesn't look the way I want on Mac. A thin grey border appears and a question mark is placed in the middle.
Picture: http://postimg.org/image/tte1lw8sj/
This is my HTML for the pictures
<a href='LINK.php?id=$id'><img src='$filename' class='headerimg' alt='$alttext' width='300'></a>
And this is my CSS:
.headerimg {
color: #000;
font-size: 20px;
margin-bottom: 5px;
max-height: 120px;
border: none;
}
Does any one know why it box looks different on Mac?
The rendering of an img element in situations where the image is not displayed is very browser-dependent, and you cannot expect to style it consistently. For example, some browsers simply render the alt text as if the element were just replaced by that text (and some people think that this is really the most appropriate way).
Unless you need to support rather old browsers, consider using an object element instead. It allows the fallback content to be normal HTML, and you can put an element there and style it as desired:
<object data='$filename' width=300><span class=alt>$alttext</span></object>
I used to have the following structure to hold a logo with a link inside a div:
<a href="http://mysite.com">
<div class="logo"></div>
</a>
with the following CSS:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
}
Is it wrong or there's any problem with compatibility if I remove the DIV and apply the 'logo' class directly to the A element? Just like this:
No, nothing wrong with it. It's actually better to do it that way, less redundant markup.
Some other things to note:
It's actually not valid for doctype other than HTML5 to put a block element (in this case, the div) inside an <a>
You should put a text inside the <a> for SEO/screen reader purpose and hide the text using text-indent:-999px and overflow:hidden. display:block is unnecessary as float:left implicitly sets it.
There is nothing wrong in doing this. You will need to add display:block for dimensions to apply to a non block level element, but as for how the site is read and crawled, no it will not hurt you.
You can make img a block element using this:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
display:block;
}
And as the others are saying it is safe to use an a-tag with a background but normally i have the logo in a div and an anchor on top. Good luck ; )
It creates a major accessibility problem and is in direct violation of Guideline 1.1 of the modern accessibility guidelines, WCAG 2.0: “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” The content of the a element is empty, and a background image is displayed, when CSS is enabled and image loading is enabled; but there is no text alternative.
And you cannot specify a text alternative for a background image. Use a content image instead:
<img src="logo.png" alt="ACME">
Here “ACME” is to be replaced by a descriptive name or abbreviation for the linked page.
By default, an image that is a link has a colored border, with the same color as link texts. You can remove it by using border="0" in the img tag or a img { border: none } in CSS.
The website I am working on uses an image defined in CSS as the main logo. The html code looks like this:
<h1>Something.com | The best something ever</h1>
I would like to display just the image defined in CSS and pass the information from the h1 tag to the search enginges only.
What's the correct way to do this? Google is very strict about this, I know that display:none is wrong, what about visibility: hidden ?
Thanks in advance!
You should be fine with visibility: hidden.
That said, if your image is part of the content (and I would dare to say that a company logo is content, not presentation), and you care about accessible html, you should consider changing your code to include the image as a img element with title and alternate text, instead of a css background-image.
Additionally, if you hope to attract search engines to the keywords inside the <h1> element, you might want to include those words more than once in the page. The page title is a much more relevant place than the h1 element, for example.
The easiest, foolproof, best for SEO solution would be
<h1><img src=logo.png alt="Something.com | The best something ever"></h1>
set the image as the background of your h1 (set the width/height so it fits) then set your text-indent to something crazy like -9999px. That way when css is disabled (such as being crawled) the bot will see the text in the header instead of the background.
example:
CSS
#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}
HTML
<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>
The "correct" way to do this is to have the text in the title bar or in your page's meta text.
<h1 style="font-size: 2px; margin: 0px;">Something goes here</h1>
Works like a charm.... ;-) The screen readers will interpret it and won't affect your SEO.
You're not going to get good SEO results if you, first hide the <h1>, and second use generic phrases inside the <h1>.
Don't just use the <h1> for sizing, you can use classes to style.
<h1> tags should contain keyword rich information such as:
Automotive Repair
Automotive repair being the keyword that relates to the particular page I'm theoretically working on.
Hope that makes sense.
I think that visibility: hidden; would work fine. Have you tried it yet?
Does your web site consist of just one single page?
Otherwise you should put the headline of each page in the h1 tag, not the tagline of the site. Repeating the same headline on every page would make it pretty much useless.
Resizing the block would work:
h1 {
overflow: hidden;
width: 1px;
height: 1px;
}
A full article in this matter is explained here https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
So , when i work i use this code to support screen reader as well as hide some h1's and use pictures instead of it like (logo)
.offscreen{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
to find more follow the link