Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

button-indruk-effect

Jaaap
5 antwoorden
  • 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.
  • Code?

    - Bas
  • 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]
  • Met CSS alleen kan het ook prima, dus er zal ergens een klein foutje zitten… Dit kan ik echter niet zien zonder relevante code.

    - Bas
  • 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]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.