The downloadable version of this article is available here:
http://techrepublic.com.com/5138-3513-6057014.html
Do you have a better way to handle navigation toolbars that can exist in three states? Does it involve JavaScript or do you have a different preferred method?
Discussion on:
View:
Show:
and the code for it is here:
http://techrepublic.com.com/5208-6230-0.html?forumID=96&threadID=192681&start=0
or, for a graphic based version:
http://www.cssplay.co.uk/menus/artists_dd.html
http://techrepublic.com.com/5208-6230-0.html?forumID=96&threadID=192681&start=0
or, for a graphic based version:
http://www.cssplay.co.uk/menus/artists_dd.html
***************************************
Mouse out and mouse over events will check the last character of the gif file name to see what the status of the button is at this time, then if the status is not "c" or CLICKED, it changes the image of the button. The click event and image change is handled on the code behind like this:
private void ResetImageButtons()
{
imbtnCaseManagement.ImageUrl="images/CM_n.gif";
.
.
.
}
private void imbtnCaseManagement_Click(object sender, System.Web.UI.ImageClickEventArgs e)
{
ResetImageButtons();
imbtnCaseManagement.ImageUrl="images/CM_c.gif";
}
I didn't have one to hand. Now he's introduced you to CSS, well there's not much to say.
The content of your article was informative but when I read articles like this (web dev stuff)I always expect/like to see a demo or a link to one like Jaqui has done.
Thanks for sharing all the same
Thanks for sharing all the same
The download version contains all of the code. It's in a text file included in the Zip.
This is pretty nit picky, but I guess this is what happens when people use a non-validating editor to edit their HTML. I know this isn't the point of the article but let's teach everything properly not just JavaScript techniques. It bugs me that after all these years people are still creating invalid HTML when there are so many tools out there, including the HTML validator: http://validator.w3.org/
An id is defined as follows:
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
Then if you dig further you will see that a "name" token is defined as follows:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
There are lots of other issues with this HTML, but you'll find those if you validate it. The id issue was just the most obvious one as it plays a primary part in the JavaScript itself.
An id is defined as follows:
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
Then if you dig further you will see that a "name" token is defined as follows:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
There are lots of other issues with this HTML, but you'll find those if you validate it. The id issue was just the most obvious one as it plays a primary part in the JavaScript itself.
Thank you for this post! I compiled a list of some top tutorials for building a toolbar for your website with some CSS3 properties and jQuery techniques. I included your post for creating a multi-state image toolbar with JavaScript. Check it out/ feel free to share. http://www.verious.com/board/Giancarlo-Leonio/how-to-create-a-website-toolbar/ Hope other developers find it useful too.
- Keyboard Shortcuts:
- Prev
- Next
- Toggle
