Widget en html

Gammer_68 -
Saint - 6 août 2022 à 03:02

Bonjour voilà je suis en train de coder un site et je bloque dans une partie

La partie en question est plusieurs widget cliquable (en balise a) et ces widget seraient des images (img) donc voilà si quelqu'un connait un tuto ou quelques choses qui m'aiderait ce serait formidable

Merci d'avance et bonne vacances

Afficher la suite

A voir également:

Widget en html
Widget ios - Guide
Editeur html - Télécharger - HTML
Widget windows 11 - Guide
C'est quoi un widget - Guide
Réinstaller widget windows 11 - Guide

1 réponse

Koby

Salut,

widget? en français vous diriez cela comment?

Parce qu'une image ou un lien reste une image ou un lien.

<a href="#"><img src=""" alt="description image"></a>

<!-- Comme pour tout élément HTML il est possible d'utiliser le DOM(JavaScript) pour rajouter de la programmation  -->

<a href="#" id="lien1"><img id="img1" style="" src=""" alt="description image"></a>

<script>
//-- détecte le clic sur l'élément avec ID "lien1"
document.getElementById('lien1').addEventListener('click', function(){
//-- déclenche une fonction qui teste si style est vide '' ou pas
 if(document.getElementById('img1').style=''){
//-- si vide on rajoute une bordure dans l'attribut style de ID "img1"
  document.getElementById('img1').setAttribute('style', 'border:1px solid red;')
 }else{
//-- sinon efface le style inscrit
  document.getElementById('img1').setAttribute('style', '')
 }

})
</script>

Tout d'abord définissez ce que vous voulez faire(un widget ça veut pas dire grand chose et ça renseigne pas sur la fonctionnalité désirée) en bon français,

ex: je veut que lorsque je clique sur l'image celle ci soit affichée en grand dans l'écran.

Ensuite vous regardez si il y a possibilité de faire cela en CSS sinon il faudra utiliser la programmation comme dans mon exemple.

Et bien sûr apprendre CSS et/ou JavaScript en commençant par les bases.

Gammer_68

D’accord merci
0
Gammer_68 Messages postés 1 Statut Membre

Excusez moi j’ai mal formuler le mot widget ce que je veux faire c’est des sortes de case avec par exemple des image de logo et quand on clique dessus ça nous redirige vers un site
0

Utilisateur anonyme > Gammer_68 Messages postés 1 Statut Membre

<ul class="medias">
                        <li class="bulle"><img src="" alt="" class="logo-medias"></li>
                        <li class="bulle"><img src="" alt="" class="logo-medias"></li>
                        <li class="bulle"><img src="" alt="" class="logo-medias"></li>
                        <li class="bulle"><img src="" alt="" class="logo-medias"></li>
                    </ul>

// dans "body" //

.logo {
    position: absolute;
    right: 2.9%;
    top: 4%;
    width: 80px;
    height: 80px;
    cursor: pointer;
}
.medias {
    list-style-type: none;
    position: absolute;
    right: 3.3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.bulle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #f1f1f1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    background: #f1f1f10;
    cursor: pointer;
    position: relative;
}
.logo-medias {
    width: 40px;
    height: 40px;
}

https://drive.google.com/drive/folders/1-yHunnHavXClAIgMe_rNOesI7CSk6mpV?usp=sharing

Salut !

télécharge les 4 images et met le code et dis moi si ça marche !

Cordialement Jackk

Gammer_68 > Utilisateur anonyme

Merci je vais le tester et je vous répond

Cordialement
0
Gammer_68 > Utilisateur anonyme

Je viens de le tester et il marche merci

le seul problème c'est que je voudrais faire 16 images mais je n'y arrive pas, j'ai ajouter plusieurs <li> et remplacer la class bulle par leur nom mais le rendu n'est pas bien

Vous connaissez un tuto ou quelques choses qui pourrait m'aider

Merci d'avacnce cordialement
0

Widget en html

1 réponse

Discussions similaires

Newsletters