Partage

Quand souris passer

Sujet résolu

10 juin 2019 à 19:39:50

Bonjour,

Je veux créer un site mais il y a un détail que je ne maîtrise pas. J'ai plusieurs images et je voudrais savoir comment faire pour que quand je passe la souris dessus, on voit un contour blanc autour de l'image.

Merci d'avance

exen

10 juin 2019 à 20:12:56

Bonjour,

Regarde un peut du coté de la fonction hover.

https://developer.mozilla.org/fr/docs/Web/CSS/:hover

Compos sui.

IronWolf1

10 juin 2019 à 20:23:54

Le problème c'est que le code css de mes images est directement dans le html

Exemple de mon code :<img src="https://image.noelshack.com/fichiers/2019/07/3/1550055812-index.png"style="position:absolute;top:2.5px;left:530px;height:75px;width:75px">

-
Edité par IronWolf1 10 juin 2019 à 20:26:05

ThibaudRoussel

11 juin 2019 à 10:17:41

Bonjour,

Ce que tu devais faire c'est de créer une page .css que tu viendrais rattacher à ta page html.

Ensuite tu n'écris plus jamais de css dans l'html mais bien sur ta page.css.

Ce qui donne :

img { 
position:absolute;
top:2.5px;
left:530px;
height:75px;
width:75px;
}

Puis avec la pseudo-class :hover tu vas pouvoir définir les modifications quand le curseur est sur l'image donc :

img:hover{
#ton code ;
}

Voila, et si tu as plusieurs img essaye de lui mettre une class ou id. Comme ça tu feras un .maClass img

IronWolf1

11 juin 2019 à 12:41:44

Ok merci mais j'ai déjà une page css, j'avais mis le code dans le html pour me simplifier la tâche donc je dois réécrire tout le css pour chaque image ? J'ai tester mais comment je peux faire pour mettre un classe ou un id différent à chacune de mes images vu que j'en ai 24 et d'autre arriveront par la suite.Sinon ton explication était clair ,je te remercie

-
Edité par IronWolf1 11 juin 2019 à 12:47:27

exen

11 juin 2019 à 13:10:48

Re,

Mais tes 24 images vont devoirs réagire de la même façon je suppose.

Donc il te suffit pour chacune de tes image de leurs donner une class commune

<img class="les24" src="https://image.noelshack.com/fichiers/2019/07/3/1550055812-index.png" alt="image1" />

Après dans le css tu va écrire ta class.

.les24{
position:absolute;
top:2.5px;
left:530px;
height:75px;
width:75px;

}

.les24:hover{
border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
}

Compos sui.

IronWolf1

11 juin 2019 à 18:00:41

Mais le problème c'est que je veux pas quelle soit placer au même endroits.

Je m'explique : Voici mon code avant retouche

Html :

<html>
<head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="style 8.css" />
        <title>Brawl Star Wiki</title>
        <br/>


 </head>
<body>
	<div id="header"></div> 
	<img src="https://image.noelshack.com/fichiers/2019/07/3/1550055812-index.png"style="position:absolute;top:2.5px;left:530px;height:75px;width:75px">
	<h1><FONT FACE="Lilita One">Brawl Stars Wiki</FONT></h1>
  <img src="https://chalbuzz.com/wp-content/uploads/2018/12/brawl-stars-game-guide-by-chalbuzz.jpg" style="position:absolute;top:75px;left:0px;height:850px;width:1525px">
    
  
       
       <a href="Nita.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/nitabann.png"style="position:absolute;top:150px;left:315px;height:150px;width:175px"></a>
       <a href="Shelly.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/shellybann.png"style="position:absolute;top:150px;left:95px;height:150px;width:175px"></a>
       <a href="Colt.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/coltbann.png"style="position:absolute;top:150px;left:540px;height:150px;width:175px"></a>
       <a href="Bull.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/bullbann.png"style="position:absolute;top:150px;left:765px;height:150px;width:175px"></a>
       <a href="Jessie.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/jessiebann.png"style="position:absolute;top:150px;left:995px;height:150px;width:175px"></a>
       <a href="Brock.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/brockbann.png"style="position:absolute;top:150px;left:1215px;height:150px;width:175px"></a>
       <a href="Dynamike.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/dynamikebann.png"style="position:absolute;top:350px;left:95px;height:150px;width:175px"></a>
       <a href="Bo.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/bobann.png"style="position:absolute;top:350px;left:315px;height:150px;width:175px"></a>
       <a href="Poco.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/pocobann.png"style="position:absolute;top:350px;left:540px;height:150px;width:175px"></a>
       <a href="El Primo.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/el-primobann.png"style="position:absolute;top:350px;left:765px;height:150px;width:175px"></a>
       <a href="Barley.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/barleybann.png"style="position:absolute;top:350px;left:995px;height:150px;width:175px"></a>
       <a href="Rosa.html"><img src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/bobann.png"style="position:absolute;top:350px;left:1215px;height:150px;width:175px"></a>
</body>


</html>

CSS :

body{
margin:-20px;
background:#177AE4;
}
h1{
    position: absolute;
    top:-5px;
    left:630px;
    right: 630px;
    color: white;
}
h2{
position: absolute;
  top:65px;
  left:700px;
  right:630px;
  color: white;
  

}

#header{
height:80px;
background:#2F2F2E;
}

Et je voudrais que quand je passe ma souris sur n'importe quelle image il y ai une sorte de bordure blanche qui apparaisse derrière l'image de façon assez discrète

exen

11 juin 2019 à 18:25:55

tiens juste pour te donner une idée de ce que tu peut effectuer via une class commune à chacune de tes images.

Pour ma part poser les coordonnées dans le html je ne suis pas pour sauf de très très très rares exceptions.

regarde tes images j'y ai ajouté une class="img24"

<!DOCTYPE html>
<html lang="fr">
    <head>
        <link rel="icon" type="assets/img/png" href="favicon.png" />
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test Ocr</title>
     <!--  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css"> -->

     <!--   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="" type="text/css"><!--
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
   -->
    <style type="text/css">
    body{
margin:-20px;
background:#177AE4;
}
h1{
    position: absolute;
    top:-5px;
    left:630px;
    right: 630px;
    color: white;
}
h2{
position: absolute;
  top:65px;
  left:700px;
  right:630px;
  color: white;
}

#header{
height:80px;
background:#2F2F2E;
}

/* ce que j'ajoute */
.img24:hover{
border: 2mm solid rgba(255, 255, 255, .7);
}

</style>
</head>

<body>

      <div id="header"></div> 
  <img src="https://image.noelshack.com/fichiers/2019/07/3/1550055812-index.png"style="position:absolute;top:2.5px;left:530px;height:75px;width:75px">
  <h1><FONT FACE="Lilita One">Brawl Stars Wiki</FONT></h1>
  <img  src="https://chalbuzz.com/wp-content/uploads/2018/12/brawl-stars-game-guide-by-chalbuzz.jpg" style="position:absolute;top:75px;left:0px;height:850px;width:1525px">
    
  
       
       <a href="Nita.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/nitabann.png" style="position:absolute;top:150px;left:315px;height:150px;width:175px"></a>
       <a href="Shelly.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/shellybann.png" style="position:absolute;top:150px;left:95px;height:150px;width:175px"></a>
       <a href="Colt.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/coltbann.png" style="position:absolute;top:150px;left:540px;height:150px;width:175px"></a>
       <a href="Bull.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/bullbann.png" style="position:absolute;top:150px;left:765px;height:150px;width:175px"></a>
       <a href="Jessie.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/jessiebann.png" style="position:absolute;top:150px;left:995px;height:150px;width:175px"></a>
       <a href="Brock.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/brockbann.png" style="position:absolute;top:150px;left:1215px;height:150px;width:175px"></a>
       <a href="Dynamike.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/dynamikebann.png" style="position:absolute;top:350px;left:95px;height:150px;width:175px"></a>
       <a href="Bo.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/bobann.png" style="position:absolute;top:350px;left:315px;height:150px;width:175px"></a>
       <a href="Poco.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/pocobann.png" style="position:absolute;top:350px;left:540px;height:150px;width:175px"></a>
       <a href="El Primo.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/el-primobann.png" style="position:absolute;top:350px;left:765px;height:150px;width:175px"></a>
       <a href="Barley.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/barleybann.png" style="position:absolute;top:350px;left:995px;height:150px;width:175px"></a>
       <a href="Rosa.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/bobann.png" style="position:absolute;top:350px;left:1215px;height:150px;width:175px"></a>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Compos sui.

IronWolf1

11 juin 2019 à 18:46:39

Donc on peut juste rajouter pour la classe le hover :

.img24:hover{
border: 2mm solid rgba(255, 255, 255, .7);
}

Et c'est tous c'est ça ?

exen

11 juin 2019 à 20:04:34

Oui c'est aussi simple que ca.

de même il est bon de coller des class aux objet et de les gérer dans une feuille de style.

Pour les démo je les intégrés comme tu as pus voire en tête de page html, mais pas dans le <body>

Tiens je me suis amusé en rentrent la je limite au max les positions absolute.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <link rel="icon" type="assets/img/png" href="favicon.png" />
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test Ocr</title>
     <!--  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css"> -->

     <!--   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="" type="text/css"><!--
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">


   --> <!-- ICI je choppe ta font -->
   <link href="https://fonts.googleapis.com/css?family=Lilita+One&display=swap" rel="stylesheet"> 


    <style type="text/css">
body{
margin: 0;
padding:  0;
background:#177AE4;
}
h1{
  color: white;
  font-family: 'Lilita One', cursive;
}
h2{
position: absolute;
  top:65px;
  left:700px;
  right:630px;
  color: white;
}

#header{
height:80px;
width: 100%;
background:#2F2F2E;
display: flex;
justify-content: center;
}
.star{

  height:75px;
  width:75px
}
.t1{
  font-style: 'Lilita One';
}

/* ce que j'ajoute */
.back1{
  position: absolute;
  z-index: -1;
  width: 100%;
  height: auto;
  margin-left: 0;
  margin-top: 0;
}
.back2{
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  margin-left: 0;
  margin-bottom: 0;
  opacity: 0.5;
}
.img24{
  height: 150px;
  width: 175px;

}
.img24:hover{
border: 2mm solid rgba(255, 255, 255, .7);
}

.ensemble1{


}
.cont1{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 20px;
}
.cont2{
    display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   margin-top: 20px;
}

@media screen and (min-width: 1200px){


.back2{
display: none;
}


}


</style>
</head>

<body>

  <div id="header">
    <img class="star" src="https://image.noelshack.com/fichiers/2019/07/3/1550055812-index.png" >
    <h1 class="t1">Brawl Stars Wiki</h1>
   </div>

  <img class="back1" src="https://chalbuzz.com/wp-content/uploads/2018/12/brawl-stars-game-guide-by-chalbuzz.jpg" alt="image1">

  <img class="back2" src="https://chalbuzz.com/wp-content/uploads/2018/12/brawl-stars-game-guide-by-chalbuzz.jpg" alt="image1">
 

  <div class="ensemble1">
    
        <div class="cont1"> <!-- simule une row -->
             
             <a href="Nita.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/nitabann.png" "></a>
             <a href="Shelly.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/shellybann.png" ></a>
             <a href="Colt.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/coltbann.png" ></a>

             <a href="Dynamike.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/dynamikebann.png" ></a>
             <a href="Bo.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/bobann.png" s></a>
             <a href="Poco.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/pocobann.png" ></a>
           </div>

           <div class="cont2"> <!-- simule une row -->


             <a href="Bull.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/bullbann.png" ></a>
             <a href="Jessie.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/jessiebann.png" ></a>
             <a href="Brock.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/brockbann.png" ></a>
             <a href="El Primo.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/el-primobann.png" s></a>
             <a href="Barley.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/barleybann.png" s></a>
             <a href="Rosa.html"><img class="img24" src="https://www.breakflip.com/uploads/Brawl%20Stars/Banni%C3%A8re/bobann.png" ></a>

      </div>
</div>
</body>
</html>

Compos sui.