Ga naar inhoud

button-indruk-effect


Aanbevolen berichten

Voor een demo van een touchscreen heb ik een button (<input type = "button"> nodig met een "indruk-effect". In CSS heb ik de borders van de button gedefinieerd. Dat indruk-effect gaat in IE goed, maar in Firefox (en die wil ik nu juist voor de demo gebruiken) niet. Weet iemand hoe ik het voor elkaar kan krijgen dat het ook in Mozilla/Firefox werkt? bvd.
Link naar reactie
Ik heb dit met Javascript een keer gemaakt, werkt perfect. Hier is de code, moet je wel zelf ff een paar dingen aanpassen [code:1:030fe72aca]<script type="text/javascript"> <!-- if (document.images) { image1 = new Image; image2 = new Image; image3 = new Image; image4 = new Image; image1.src = "aanmeldenuit.jpg"; image2.src = "aanmeldenin.jpg"; image3.src = "bekijkenuit.jpg"; image4.src = "bekijkenin.jpg"; } function chgImg(name, image) { if (document.images) { document[name].src = eval(image+".src"); } } // --> </script> [/code:1:030fe72aca][code:1:030fe72aca]<p><a href="mailto:xxxx@xxxx.nl" onMouseDown='chgImg("enter", "image2")' onMouseUp='chgImg("enter", "image1")' onMouseOut='chgImg("enter", "image1")'> <img name="enter" src="aanmeldenuit.jpg" border="0" alt="Meld nieuws aan..."></a></p> [/code:1:030fe72aca]
Link naar reactie
De relevante code:[code:1:08329a9ec7]<?php echo(" <html> <head> <title>Menu</title> <link rel='stylesheet' type='text/css' href='styles1.css'> </head> <body> <div id='bg-palm'></div> <div id ='orientatie'> hoofd-menu </div> <input type='button' value='reserveren' class='menuButtonR' onClick=\"document.location = 'res1.php';\"> <div id='navigatie'> <input type='button' value='<' class='buttonBack'onClick=\"document.location = 'index.php';\"> </div> </body> </html> "); ?> [/code:1:08329a9ec7] En de css:[code:1:08329a9ec7]#bg-palm{ position:absolute; left:10px; top:10px; background-image: url(palm2.jpg);width:347px;height:558px;color:white; } #orientatie{ position:absolute; left:50px; top:97px; color:white; font-family: Arial, Helvetica, Sans-Serif; font-size:14px; background-color :#00749f; width:265px; height:25px; text-align:center; padding-top:10px; } #navigatie{ position:absolute; left:51px; top:370px; background-color :#00749f; width:264px; height:30px; padding-top:10px; } .menuButtonR { position:absolute; top:160px; left:65; background-color:#0099CC; width:230px; height:30px; font-size:20px; color:white; font-family:arial; text-align:center; padding-top:0px; border-style : outset; border-color : White; border-width : 2px; } .buttonBack{ position:absolute; top:6px; left:30; background-color:#0099CC; width:26px; height:26px; font-size:20px; color:white; font-family:arial; text-align:center; padding-top:0px; padding-left:0px; border-style : outset; border-color : White; border-width : 2px; } [/code:1:08329a9ec7]
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
×
  • Nieuwe aanmaken...