A voir également:
- Widget en html
- Widget windows 11 - Guide
- Editeur html - Télécharger - HTML
- C'est quoi un widget - Guide
- Supprimer widget windows 11 - Guide
- &Nbsp html - Forum HTML
1 réponse
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.
20 juil. 2022 à 17:49
D’accord merci
20 juil. 2022 à 18:46
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
3 août 2022 à 23:49
<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
4 août 2022 à 10:31
Merci je vais le tester et je vous répond
Cordialement
5 août 2022 à 16:05
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