Input Radio changer une image

Le problème exposé dans ce sujet a été résolu.

Bonjour,

Ca fait un bout de temps que je n'ai pas touché à du Jquery. Voir le rendu : http://www.bootply.com/8nrk3jKoj9

J'utilise Bootstrap, j'ai un code HTML petit (j'espere qu'il est bon…)

J'ai une liste d'image qui sont des radio (il y en a plus que deux)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default active">
            <input checked="True" class="radioPicto" id="Type" name="Type" type="radio" value="LIV" />
            <img src="http://i.imgur.com/lGI0LDX.png" alt="Livre" title="Livre" class="radioPictoType" />
        </label>
        <label class="btn btn-default">
            <input class="radioPicto" id="Type" name="Type" type="radio" value="LOG" />
            <img src="http://i.imgur.com/YyPYvM4.png" alt="Logiciel" title="Logiciel" class="radioPictoType" />
        </label>
    </div>

Quand on clique sur un radio, on doit mettre la couleur de l'image en rouge (changer l'url de l'image) et les autres bleu (image par defaut)

J'ai fait ca :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  $(function () {
            $('input[type=radio]').change(function () {
                var urlImage = $(this)
                         .closest('label')
                         .find('img').prop("src")

                var urlFinale = ''
                if ($(this).closest('label').hasClass('active'))
                {
                    urlFinale = 'http://i.imgur.com/PMpMWZN.png'
                    console.log('oui')
                }
                else
                {
                    urlFinale = 'http://i.imgur.com/YyPYvM4.png'
                    console.log('non')

                }

                console.log(urlFinale)

                $(this)
                     .closest('label')
                     .find('img')
                     .prop('src', urlFinale);
            });
        });

Sauf que je sens que part dans un truc de fou… il doit avoir beaucoup plus simple mais je ne vois pas.

Mes pictos : http://imgur.com/a/GQtu3

+0 -0

Souvent, quand tu dois avoir deux images similaires (ou non) qui vont changer comme tu veux le faire, le plus simple est d'utiliser un sprite.

Le principe, c'est d'avoir tes deux images (non activé et activé par exemple) assemblés sur une seule image (comme ici : http://zestedesavoir.com/static/images/sprite@2x.png le principe est poussé plus loin). Par exemple l'activé au dessus et la désactivé en dessous. Il faut alors avoir ton image en tant qu'image de fond d'un élément, il te suffira alors de modifier la position du background (background-position je suppose) pour "changer" d'image. Ça a aussi l'avantage d'éviter que l'image disparaisse quelque instant le temps qu'elle se charge la première fois (en plus de réduire le nombre de requêtes à ton serveur).

Je ne suis pas expert en la matière, donc il y a peut-être des corrections à apporter, mais le principe est là.

+0 -0

Tu as plusieurs optimisations possibles : la première serait plutôt d'utiliser une icon font au lieu des images (tu peux par exemple regarder FontAwesome), cela te permettra de changer les couleurs beaucoup plus simplement.

D'autre part, en fonction de la compatibilité demandée pour ton site, tu peux utiliser une solution full CSS :

1
2
3
input:checked + span {
  color: red; /* change la couleur du span situé juste après une checkbox/radio cochée */
}

Le sélecteur :checked n'est pas compatible IE8 et inférieurs, mais si tu n'as pas besoin de supporter ces navigateurs, tu n'auras aucun problème ;)

+0 -0

Notons que tes deux inputs ont la même id "Type", et ça c'est interdit. Pour que les deux radios soient dans le même groupe - et soient donc mutuellement exclusives - il faut le même name, mais certainement pas le même id.

J'agrée totalement avec la proposition de Myssdi, mais celle de Berdes est parfaitement valable aussi. Les deux ont l'avantage de ne pas nécessiter de JS.

+0 -0

Notons que tes deux inputs ont la même id "Type", et ça c'est interdit. Pour que les deux radios soient dans le même groupe - et soient donc mutuellement exclusives - il faut le même name, mais certainement pas le même id.

Chaopale Lamecarlate

En effet, j'avais oublié j'ai modifier.

Merci pour les différentes solution.

Au finale (je n'avais pas tout dis aussi..), je ne peut pas utiliser les Font / ou mettre le lien de l'url dans le CSS, les différents chemin sont généré.

J'ai fait ca, et ca répond à mon besoin : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 <div class="control-group">
                <label class="control-label" for="MDKTypeMedia">Type</label>
                <div class="controls">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default background-type-media" style="background-image: url('image')">
                            <input checked="checked" class="radio" id="radio-tous" name="MDKTypeMedia" type="radio" value="MDKALL" />
                        </label>
                        <label class="btn btn-default background-type-media" style="background-image: url('image')">
                            <input class="radio" id="radio-logiciel" name="MDKTypeMedia" type="radio" value="MDKLOG" />
                        </label>
                        <label class="btn btn-default background-type-media" style="background-image: url('image)">
                            <input class="radio" id="radio-video" name="MDKTypeMedia" type="radio" value="MDKVID" />
                        </label>
                        <label class="btn btn-default background-type-media" style="background-image: url('image')">
                            <input class="radio" id="radio-musique" name="MDKTypeMedia" type="radio" value="MDKZIK" />
                        </label>
                        <label class="btn btn-default background-type-media" style="background-image: url('image')">
                            <input class="radio" id="radio-livre" name="MDKTypeMedia" type="radio" value="MDKLIV" />
                        </label>
                        <label class="btn btn-default background-type-media" style="background-image: url('image')">
                            <input class="radio" id="radio-autre" name="MDKTypeMedia" type="radio" value="MDKAUT" />
                        </label>
                    </div>
                </div>
            </div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
        $('input[type=radio]').change(function () {
            $('#radio-logiciel').parent().css("background-image", "url(image)")
            $('#radio-video').parent().css("background-image", "url(image)")
            $('#radio-musique').parent().css("background-image", "url(image)")
            $('#radio-livre').parent().css("background-image", "url(image)")
            $('#radio-autre').parent().css("background-image", "url(image)")
            $('#radio-tous').parent().css("background-image", "url(image)")

            var label = $(this).parent();
            ChangerPictoType(label, $(this))
        });

        ChangerPictoType($('#radio-tous').parent(), $(this))

        //Fonction qui permet de changer l'image du type au checked d'un radio + background du boutton
        function ChangerPictoType(label, radio) {
            // Ajout du background gris + border gris clair
            $(label).addClass("background-type-media-selected")
                  .siblings()
                  .removeClass("background-type-media-selected");

            if ($(radio).not('checked')) {
                var url = $(label).css("background-image")
                var newUrl = url.substring(0, url.length - 5) + "_click.png)";
                $(label).css("background-image", "" + newUrl + "");
            }
        }
+0 -0

Pas besoin de JS, sérieusement.

Mais pour ça il faut changer un peu ta structure html : input, puis label. Si tu mets en background-image (avec l'attribut style, donc) ton sprite sur label, tout ce que tu auras à faire est de préciser background-position: bottom center (par défaut ce sera top center) sur input:checked + label.

+0 -0

Mh je ne suis pas sur de comprendre, il reste un point noir. Comment je fait pour définir l'url du click ?

Je comprend bien que j'ai la propriété input:checked + label qui permet de changer l'image. Mais je ne peut pas mettre l'url dans le css vue que je ne connais pas le lien. A moins de faire un <style></style> en plein milieu du html… (Je suis sur un projet ASP.NET MVC, je suis dans un niveaux trop bas pour pouvoir mettre ma class dans <style>)

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte