I want to add a 'fancy' button to my page. I see two possibilities:
an a element with a picture as background and add a javascript function to the click event.
or
an img element and add a javascript function to the click event.
What is your opinion ? Which one is the better way to do it and why ?
Thank you !
Other options include:
A link that styled to look like a button using a background image
A Button element that is styled with a background image and no border.
An Input element with type submit or button styled with a background image and no border.
I find that that button element works the best, particularly if you want rollover hover effects.
jQuery UI has a button plug-in that will style pretty much any kind of interactive element into a fancy button.
Wherever possible, UI elements should be defined as CSS backgrounds. They are not part of the site content, so they don't really need to be indexed by search engines.
Semantically-speaking an A-tag implies a link, and therefore the event should be hooked up to the A-tag, not the image.
The first one. You have more options to style it, and it's easier to "theme" it as well. Imaging a "dark theme" and a "light theme", using CSS you can easily keep the same HTML but have totally different styles and images for your button. In some browsers, images are not necessary; you can easily create your button using pure CSS.
It depends on what you're trying to do.
On my project, we have a form that we want to submit using a button rather than javascript, so we're inserting a button element.
<button type="submit">Sign Out</button>
Then you can style the button using CSS.
Other than that, we use images for non-form buttons and javascript for the functionality behind them.
Not sure what you mean by 'fancy' button but first look into what you're able to do with CSS, look for example at http://hellohappy.org/css3-buttons/ or http://twitter.github.com/bootstrap/base-css.html#buttons .
If you want something fancier than that you should define a link in HTML, with and anchor tag since that's semantically correct and set it's background to an image with CSS. I don't see any reason to use Javascript for the click event as long as you simply want to make A GET request to some other page.
Semantically, <button> and <input type="button|submit|reset" /> elements are the correct choice for interactive elements within the page.
If you're simply styling a link to look like a button, then continue to use an <a> element, but define some styles and use a class, such as <a class="button">.
Pretty much any element can be made into a button, and if you use the correct attributes it will maintain semantics.
The following are semantically identical, but the <img> requires JS support:
<!-- the image is of some fanciful text -->
<img src="some/image.jpg" alt="Continue" role="button" tabindex="0" />
<input type="image" src="some/image.jpg" alt="Continue" />
If you simply have a decorative image that doesn't affect the content, you could use a span or div that's styled with CSS:
<span role="button" tabindex="0" class="button continue-button">Continue</span>
I'm pretty sure you can get that effect with plain CSS, no need for JS unless you want to call a function of some sort, and to spazz the button there is no need for a JS function.
You can simply use CSS actions (not sure they are named this way) like active, hover, focus, etc...
here is an example:
http://jsfiddle.net/RQucV/2/
it has a red color for background at first, changes to blue while clicking and becomes purple when visited. this is possible because i used a 'a' tag which has these properties.
i only changed the background color, but you can also changes many other elements, such as font, background image, margins, borders, you name it.
i think its cleaner to use pure CSS because of the JS clutter. if you want to add more scripts later, something bad is bound to happen when the browser has too much scripting to do. besides, parsing CSS might actually be faster than JS.
Just another tip if you go with pure CSS: not all browsers handle CSS the sameway, i highly recommend appending a "reset.css" to your stylesheet in order to make it play along the sameway in every browser you use.
hope it helps!
Related
Building a nice accessible web page is hard. Currently, Im trying to make a tooltip web accessible and I need help. Do you guys have any piece of advice for it? Like what aria attributes I should use. Or some other important thing you want to add!
Moreover, How do I prevent the screen reader from reading the tooltip, if it hasnt been shown? My approach here is to make it using javascript, adding and deleting aria-hidden attribute, but I want to avoid JS as much as possible.
You'll have to show the tooltip on a focusable element (if this element is not focusable, you should set the tabindex attribute)
<input type="text" id="mytextbox" aria-describedby="mytooltip" />
<span id="mytooltip" role="tooltip" class="tooltip" aria-hidden="true">Tooltip for the textbox</span>
The aria-describedby will set the relationship between your focusable element and the tooltip. The tooltip role support is not very important, but you should use it as it's designed for this subject.
Once this is done, you just have to set the initial state in the CSS:
.tooltip[aria-hidden='true'] {display: none}
.tooltip[aria-hidden='false'] {display: block}
and define the aria-hidden attribute to true on focus or mouseover events using your favorite javascript code, and to false on blur and mouseout events.
The above example is working fine. we can achieve the same by using below jQuery code.
<script>
$("#test").tooltip();
</script>
<a id="test" href="#" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
But another issue is the screen reader will not read the tooltip on mouseover.
By using jquery-ui version 1.12, the screen reader can read the tooltip on mouseover, but the problem is it can't identify the role and name of the tooltip container element.
So is there any way to achieve that functionality?
On the website I have form which is generated from ipresso. I'd like to style agreement to hide this content and after click I'd like to show it. But where I can find names of classes, id etc.? I'd like to add button "hide/show" which will hide or show content inside form.]
You can solve the problem using jQuery toggle class just add jquery to your website if not present
$("#button").click(function(){
$("#target_div").toggle();
});
based on your requirement set the initial css for the div to display:none if it is to be hidden initially.
In browser on the page generated by ipresso right-click on an element that you would like to change and select option Inspect-Element/Inspect. In the source code your form should have an id/class which you then would use in jQuery as selectors, in a way that I describe below.
$("#toggle-button").click(function(){
$("your-form").toggle();
});
OR
$("#hide-button").click(function(){
$("your-form").hide();
});
$("#show-button").click(function(){
$("your-form").show();
});
If the elements are always generated with different ids/classes on every refresh (I highly doubt that) another thing to do is to use more descriptive css selectors which rely on the structure of the html tags staying consistent. Again, you will be able to find them using the Inspect/Inspect-element found in most browsers. It is a workaround, but not something I would recommend doing since if the structure changes, you will have to edit in more than one place.
I have a question, if which are the best way to make a link some element, for example i have so many images and i want to be they links, the traditional way that i know is this:
<a href="someplace.html><img src="myimage.jpg" ></a>
that is the traditional way but, i need do this for all images that i want to be links, so early i'm do this with jquery library:
<img src="cats.jpg" class="link-cat">
and for make this a link:
$('.link-cat').hover(function(){$(this).css('cursor','pointer');},function(){$(this).css('cursor','pointer');}).on('click',function(){windows.location.href="http://www.cats.com";})
this closely be more code but when i have many images i feel this help me more
so i want to ask wheter is the best way to make a link some element not just an image
thanks.
You could wrap them all in an <a> tag if you want users to see the URL in browser status area and use default cursor for <a>
$('.link-cat').each(function(){
$(this).wrap('<a>').parent().attr('href',this.src);
});
As for your approach to set the css using jQuery it would be much simpler doing it in stylesheet with a CSS rule for the image class and using :hover selector
reference: wrap() API Docs
So I have been working on a widget and I'm pretty much done with the exception of a little thing that is bugging me a bit. The widget script that users will copy and paste on their website looks like this.
<script src="http://www.example.com/widget.js"></script>
Then in the widget.js I have a line that adds an anchor text to the a tag like this.
$('.my-chat').html('Chat now');
I want the anchor text to be a certain color when active or on hover etc say blue and I have that described in its css file, however depending on the website it's placed on, their css may have other css properties for links and I realize that the anchor text of the widget gets modified depending on the website it's added on. I want to make the anchor text respect what I defined in the css of the widget, but I really don't know how. I saw this other widget that used labels, but I don't really understand what they are and how to use them.
Add this to your css
a.my-chat{ color:blue !important;}
a.my-chat:hover{ color:red !important;}
Which is the better way of using the image as a link..
<A HREF="javascript:password()">
<IMG SRC="pict1.gif" NAME="pic1" ALT="about us!" BORDER="0" align="left"></A>
or the same thing using onClick in the img tag ??
Which one is advisable?? Are both equally good to use??
I'll chime in with the rest that you should always take a semantic approach. Looking at the value of href, though, it seems that you're not actually linking to anything, but rather, your a tag is performing an action.
In that case, your using an anchor as though it was a button, and the semantics is lost anyhow. I'd go with an image button:
<input type="image" src="pict1.gif" onclick="password();" />
One example of why you want to care about semantics (except for the general SEO reasons) is that you're instructing the browser as to what is going on. For instance, an image button as in the code above, or an image in an anchor as in your question, will both cause the image to have the pointer cursor when hovered, whereas you'd have to explicitly style that behavior if you went with the plain img onclick solution, effectively replicating something the browser can handle natively.
There are three common techniques:
a with href="javascript:whatever()"
a with href="#" onclick="whatever(); return false;"
img with onclick="whatever()"
(1) and (2) will create a dotted focus border around the image when its clicked, sometimes this is undesirable.
(1) and (2) adds a border around the image same color as the links in your document so you may want to set border=0.
(1) and (2) will display the hand pointer upon mouse over.
(3) does not behave anything like a link... no focus border, no link color borderm no hand pointer, nothing displayed in the status bar upon mouseover.
Personally, I'd go for option 3: use an a tag for links that take you somewhere, do not use them as action buttons.
I'm a fan of good semantics. the <a> was designed to be a link so i advise to use it :D
For accessibility you should use the anchor tag. You can style it to display an image ie
<style>
a.image {display:block; background-image: url('images/mypic.gif')}
</style>
<a class='image' href='acme.html' style=></a>
(That might need a width and height as well)
In addition, jQuery will provide a true separation of concerns should you need to add further processing in the click. (Please no flames about the OP not using jquery, I present it here as an approach since the question is slightly subjective and about best practices)
$(document).ready(function() {
$(a.image).click(function(e) {
password();
e.preventDefault();
});
});
Using an a-tag, you can make the code work if the user doesn't have javascript enabled! So I would go for the a tag, but also keep in mind that you could use jQuery or similar to get the javascript effect when clicking on the link.
I'd go with an anchor (A tag) barring a really good reason to do something else. Linking is what anchors are for, and so you get accessibility benefits, etc.
I discourage both approaches. Logic, presentation and structure should always be separate. Do this instead:
myClickable.addEventListener('click', password, false);
if its merely a link then anchor would work well for you, but button will be better in case you have some operation to be done and not only redirection.