[dhtml]Hoe hebben ze deze submit buttons gemaakt?

[Alpha-sphere]

Ik zat net te surfen op apple.com en ik zag dat apple een groen submit button gebruikt.
Dat op zich is niet raar maar wat wel raar is is dat het in Safari en Firefox op de Mac er zo uit ziet. Natuurlijk ziet het er in IE of Firefox op de PC er ook zo uit maar normaal gesproken is er (zover ik heb kunnen vinden) geen mogelijkheid om de gel knoppen in Safari te veranderen. Je kan niet net als in IE met een stylesheet de looks van een button veranderen.

Mijn vraag is dus hoe ze het hebben gedaan.
Dit is de search pagina waar de groene buttons te vinden zijn.
https://jobs.apple.com/cg...xb3Mp3pjG4b6g0/0.6.5.3.19

Als ik dan naar de broncode kijk vind ik het volgende:

code:

<div id="buttonsTop">
            <div id="btnnavcontainer">
                <ul id="btnnavlist">
                    
                    <li>
                        
                        <a href="#" onClick="clearText();return false">Clear</a>

                    </li>
                    <li>
                        <a onClick="javascript: fnFetchCriterion()" href="javascript: fnFetchCriterion()">Search</a>
                    </li>
                </ul>
            </div>
        </div>

De div kan ik nog enigsinds begrijpen maar de UL en LI? Waarom gebruiken ze een list tag?
En als ik de ID wil opzoeken in de css file dank kan ik deze helaas niet vinden.

er staat een aantal stylesheet maar kan er helaas niet bij komen.

code:

<link rel="stylesheet" type="text/css" href="/WebObjects/Employment.woa/Contents/WebServerResources/global.css"  media="all"> 
    <link rel="stylesheet" type="text/css" href="http://www.apple.com/main/css/fonts.css" media="screen">   
    <link rel="stylesheet" type="text/css" href="/WebObjects/Employment.woa/Contents/WebServerResources/nav.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/WebObjects/Employment.woa/Contents/WebServerResources/job.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/WebObjects/Employment.woa/Contents/WebServerResources/search.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/WebObjects/Employment.woa/Contents/WebServerResources/globalprint.css" media="print">

[Blaise]

Het is geen button of input, maar een simpel a-element met een CSS :hover property waardoor de kleur verandert bij een mouseover.

Als je erop klikt wordt een javascriptje uitgevoerd die het formulier reset of verstuurt.

Waarom gebruiken ze een list tag?

Misschien vonden de websitemakers die twee "buttons" een soort menu, of lijst van opties.

[Yoozer]

Check ook http://www.alistapart.com/articles/taminglists/ maar eens, helemaal onderaan wordt 't best cool. Daar staat ook de filosofie achter het idee .

[ Voor 20% gewijzigd door Yoozer op 17-12-2004 03:32 ]

[Verwijderd]

Bedoel je nu "hoe hebben ze die mouseover voor elkaar gekregen zonder dat die background image wordt herladen onder IE? ":)

[RM-rf]

Dat is niet de submit, maar dit, welke er net onder staat:

code:

<a href="/cgi-bin/WebObjects/Employment.woa/10/wo/h45arRUMogGuoNIogbCEIw/0.6.5.3.13" alt="Create an account" id="createAccImg" name="6.5.3.13"><img border="0" ismap src="/WebObjects/Employment.woa/Contents/WebServerResources/map.gif" width="175" height="158"></a>

het is dus gewoon een plaatje met 'ismap' als attribuut, de LI is enkel voor de opsomming erboven

[Pelle]

Inderdaad, zo moeilijk is dat toch niet af te lezen uit de source code?