bordure sur une image

Version imprimable

16/03/2012, 06h16
java250r

bordure sur une image

Bonjours a tous j'ai fais un site et je veux que quand l'usager clic sur une image il apparait une bordure autour de l'image et quand l'usager clic sur une autre image je veux que la bordure de l'image précédent disparaisse. Je suis débutant et je ne sais pas quel code javascript écrire pour faire cela.
Merci d'avance pour votre aide.
16/03/2012, 23h36
Rachel

Bonsoir :)
Pour t'aider, tu peux commencer par ceci :

Code:

document.getElementById(id).style.border="solid black";

après il te faut trouver comment faire pour le reste ;)
17/03/2012, 08h37
NoSmoking

Bonjour,
avec un ajout/enlèvement de class sur les IMG.

Sur le onclick d'une IMG, on enlève la class cadre, par exemple, de toutes les IMG et on l'ajoute à l'IMG cliquée.

Il suffit de mettre les IMG dans un même conteneur pour pouvoir facilement les récupérer.

Simplement en Jquery

Voilà un petit code complet en Jquery, tu n'as qu'à copier coller et tester chez toi. C'est très simple :)

Code:

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
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Image clic border</title>
        <script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE"></script>
        <script type="text/javascript">google.load("jquery", "1.7");</script>
        <script type="text/javascript">
            $(document).ready (function (){
 
                //On définit ici les ids de toutes les images qui devront suivrent ce comportement
                var image_table = [$('#chrome_img'),$('#firefox_img'),$('#safari_img')];
 
                //On définit l'évenement du clic sur chaque image
                for (cpt in image_table)
                {
                    image_table[cpt].click(function (){
                        //On retire les bordures de toutes les images
                        for (cpt in image_table)
                            image_table[cpt].css({ border: "0px"});
                        //On met une bordure sur l'image sur laquelle on à cliqué
                        $(this).css({ border : "3px solid black" });
                    })
                }
 
            });
        </script>
    </head>
    <body>
        <img id="chrome_img" src="http://www.pluginchrome.com/wp-content/uploads/2011/02/logo_chrome_9.jpg" title="chrome" alt="chrome"/>
        <br/><br/>
        <img id="firefox_img" src="http://telecharger.itespresso.fr/wp-content/uploads/2010/04/firefox.jpg" title="firefox" alt="firefox"/>
        <br/><br/>
        <img id="safari_img" src="http://telecharger.itespresso.fr/wp-content/uploads/2010/06/safari.jpg" title="safari" alt="safari"/>
    </body>
</html>

Citation:

C'est très simple

Certes, mais tu te compliques quand même la vie :aie:

Code:

1
2
3
4
5
6
7
$(function(){
    var $images = $('#conteneur img');  // si #conteneur est l'id de l'élément contenant toutes les images;
    $images.click(function(){
        $images.not(this).css('border', 'none');
        $(this).css('border', '3px solid red');
    });
});

;)

Ou mieux, pour alterner la bordure de l'image cliquée, il faut d'abord définir une classe CSS :

Code:

1
2
3
.actif{
    border: 3px solid red;
}

Code:

1
2
3
4
5
6
7
$(function(){
    var $images = $('#conteneur img');  // si #conteneur est l'id de l'élément contenant toutes les images;
    $images.click(function(){
        $images.not(this).removeClass('actif');
        $(this).toggleClass('actif');
    });
});

17/03/2012, 12h07
Sam31000

Oui, je me suis un peu compliqué la vie, la solution que tu proposes m'a l'air plus simple et naturelle effectivement :)
04/04/2012, 05h26
java250r

Merci ca fontionne