bordure sur une image

**java250r** · 16/03/2012, 06h16

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.

**Rachel** · 16/03/2012, 23h36

Bonsoir

Pour t'aider, tu peux commencer par ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

après il te faut trouver comment faire pour le reste

**NoSmoking** · 17/03/2012, 08h37

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.

**Sam31000** · 17/03/2012, 09h10

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Bovino** · 17/03/2012, 11h43

C'est très simple

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
    });
});

**Sam31000** · 17/03/2012, 12h07

Oui, je me suis un peu compliqué la vie, la solution que tu proposes m'a l'air plus simple et naturelle effectivement

**java250r** · 04/04/2012, 05h26

Merci ca fontionne

bordure sur une image

JavaScript

Discussions similaires

Partager

Partager