Afficher un div lors d'un clic sur un icône

Anonyme

27 juillet 2017 à 20:28:16

Bonjour, j'ai besoin de votre aide, je suis en train de créer un site, toutefois je bloque sur Javascript, je souhaite créer un site le plus "flat" possible, pour ce faire, j'ai eu l'idée de masquer le formulaire de connexion et l'afficher lors d'un clic sur l'icône "profil", l'icône "profil" disparait ensuite pour laisser place au formulaire ayant 4 divs, un pour le nom d'utilisateur, le mot de passe le bouton valider et le bouton d'inscription, je ne sais pas du tout réaliser l'aspect Javascript de cette idée, quelqu'un pourrait m'aider ? Merci

H2R file comme l'air

28 juillet 2017 à 0:24:26

dit moi si ce code que j'ai fait marche

<!doctype html>
<html>
    <head>
        <style>
#myForm{
    border: 1px solid red;
    display: none;
    width: 400px;
    height: 200px;
}
#showForm{
    width: 70px;
    height: 60px;
    cursor: pointer;
}
        </style>
        <meta charset="utf-8"/>
    </head>
    <body>
        <form id="myForm"></form>
        <img id="showForm" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdDRze4ZkZxxFW9L8tM5nf-JpRITWhXQCAaDn4oSgsxgYPnStPIHVS_gQ"/>
        <script>
function eid(elementId){
    return document.getElementById(elementId)
}
var myForm = eid("myForm") , showForm = eid("showForm")
showForm.addEventListener("click" , function(e){
    myForm.style.display = "block"
    this.style.display = "none"
})
        </script>
    </body>
</html>

-
Edité par H2R file comme l'air 28 juillet 2017 à 0:26:56

La H2R file comme le vent , fume plus que le feu , arrache la terre , n'a pas besoin d'eau à part de l'essence mdr

Anonyme

28 juillet 2017 à 11:49:11

YordanHristov a écrit:

dit moi si ce code que j'ai fait marche

<!doctype html>
<html>
    <head>
        <style>
#myForm{
    border: 1px solid red;
    display: none;
    width: 400px;
    height: 200px;
}
#showForm{
    width: 70px;
    height: 60px;
    cursor: pointer;
}
        </style>
        <meta charset="utf-8"/>
    </head>
    <body>
        <form id="myForm"></form>
        <img id="showForm" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdDRze4ZkZxxFW9L8tM5nf-JpRITWhXQCAaDn4oSgsxgYPnStPIHVS_gQ"/>
        <script>
function eid(elementId){
    return document.getElementById(elementId)
}
var myForm = eid("myForm") , showForm = eid("showForm")
showForm.addEventListener("click" , function(e){
    myForm.style.display = "block"
    this.style.display = "none"
})
        </script>
    </body>
</html>

-
Edité par YordanHristov il y a environ 11 heures

Ca marche parfaitement, merci beaucoup ! J'ai réalisé quelques changements, ca fonctionne merci.

-
Edité par Anonyme 28 juillet 2017 à 11:58:32