28173 sujets

CSS et mise en forme, CSS3

[résolu] Rollover déclanchant un pseudo :hover

bonjour à tous
j'ai une image avec rollover css
j'aimerais que, lors du passage de la souris sur cette image (qui change de couleur) :
-soit une autre image change d'état (comme si elle subissait un :hover mais sans hover)
-soit une autre image change son mode de transparence
(je donne 2 possibilité car je ne sais laquelle est la mieux et la plus simple à faire)
auriez-vous une idée de comment faire cela? merci d'avance

ps : mon code css(uniquement le rollover de base) 
div#B1
{
  margin :0;
  padding:0;
  }
div#B1 a
{ 
  display:block;
  width: 22px;
  height: 20px;  
  background-image: url(Bmenu.gif);
  background-repeat:no-repeat;
  backgrounf-position: 0 0;
  top:0px;
  left:0px;
  padding: 0;
  float:left;
}
div#B1 a:hover
{
 background-image: url(Bmenu.gif);
 background-repeat:no-repeat;
 backgrounf-position: 0 -20px;
}

Modifié par qmulonainbus (14 Sep 2006 - 11:32)
Bonjour,

Je dois être ramolli du bulbe ou le 21ém siécle va trop vite pour moi mais je n'ai pas tout compris dans tout ces changements...
Bonjour à tous,

Je ne suis pas spécialement très dure du bulbe, mais si j'ai bien compris :

Nous avons un rollover css sur une image. Bon.
Et le résultat voulu est de faire un autre rollover sur une autre image.
(Le "changement d'état" est en fait un remplacement d'image ...)

Et bien je dirais que le rollover en css ne peut concerner qu'un élément (la première image) et que cela est peut-être possible en javascript ... pour lequel je suis complètement ramollie ...
Modifié par Vero (11 Sep 2006 - 19:14)
oui c'est en gros celà pour la solution1

pour la solution 2 ce serait juste l'appel d'un changement d'état d'opacité d'une image (et donc pas de remplacement de cette image)
mais je ne sais comment faire...
help Smiley ohwell
Modifié par qmulonainbus (11 Sep 2006 - 19:28)
merci pour le liens Smiley cligne
en fait je m'étais mal exprimé ci dessus
je sais gérer l'opacité d'une div
mais c'est ce qu'il se passe entre le rollover de base et le changement d'opacité que je ne sais pas faire
c'est à dire le déclencheur, je ne sais pas comment coder celà Smiley ohwell

toutes propositions sont les bienvenues Smiley cligne
Re,

C'est un peu tendentieux ... mais regarde ce bout de code, ça te donnera peut être des idées ...

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title></title> 
   <meta name="TITLE" content="" />
   <meta name="ROBOTS" content="none" />

</head>

<style>
.conteneur{
margin-left: 10px;
margin-top: 70px;
margin-bottom:70px;
border: 1px solid #000;
width:500px;
position: relative;
overflow: hidden;
}

p {
width: 100%; 
}


.carte a {
margin: 10px;
width: 100px;
height: 50px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: yellow;

}

.carte a em{
position: absolute;
left: 250px;
width: 100px;
height: 50px;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: blue;

}

.carte a:hover {
background: red;
border: 1px solid gray; 
} 

.carte a:hover em{
opacity: 0.50;
filter:alpha(opacity=50);
border: 1px solid gray; 
}



</style>
</head>
<body> 

<div class="conteneur">
  <p class="carte">
    <a href="#"><span class="img1">image 1</span><em class="img2">image 2</em></a>
  </p>
</div>


</body>
</html>


Ps: je n'ai pas mis d'images mais je pense que ça doit fonctionner avec quelques édulcorants sous FF et IE
Bonjour.
J'ai compris la même chose que Vero.

En gros ce cher monsieur veut un double rollover : un sur un lien qu'il survole, et un autre sur une image ailleurs sur son site.

C'est pas compliqué. Mais il te faut du javascript c'est tout.

en gros il te faut du javascript : 

<script type="text/javascript">
function changeImage(idEl,over){

      url = "toto.gif";
      if(over){
         url = "titi.gif";
      }

      document.getElementById(idEl).src = url;

}
</script>

Cette fonction prend en paramètre l'id de l'image à modifier, et un booléen indiquant si l'on est sur le over ou sur le out.
A toi de voir si tu preferes passer aussi le chemin de l'image en paramètre. Pour l'instant le nom de l'image est "en dur" dans la fonction.

Il te faut le code HTML : 

<a href="..." onmouseover="changeImage('idImage',true)" onmouseout="changeImage('idImage',false)"></a>
...
<img src="toto.gif" id="idImage" alt="" />

Tu as le lien avec les évènements javascript (note le changement de valeur du booléen).
et tu as l'image que tu souhaites modifier avec le bon id (celui que tu passes en paramètre de la fonction javascript.

Voilà ! Avec ca tu devrais t'en sortir. A condition que j'ai capté ce que tu voulais Smiley lol
merci pour votre investissement
j'essaye ça desuite et je vous tiens au courant Smiley cligne

info : je connais quasiment rien en javascript Smiley confused
Modifié par qmulonainbus (12 Sep 2006 - 17:20)
waa super le lien vers le site css (je l'avais déjà parcouru mais trop rapidement)
bon étant donné que je ne comprend pas le javascript
j'ai plutôt essayé la méthode css (super merci quand même pour le script java Smiley cligne )

c'est exactement cela que je voulais ghost
à cela près que lorsque je passe ma souris sur "image 2" j'aimerais que rien ne se passe...c'est réalisable?
Bonjour,

Et non c'est le seul Hic !! les 2 balises "détournées" <span> et <em> sont englobées dans le même lien <a></a> donc ça marche malheureusement dans les 2 sens. Il te faudra passer par le javascript ... On utilise plus souvent cette technique pour faire "apparaitre" un texte ou une image au survol donc l'effet du double sens n'a que peu d'importance mais il doit y avoir peut être un moyen en masquant l'image 2 par un div transparent ayant un z-index plus élevé que l'image ??
bonjour
arf ok, le bloc transparent c'est une idée (mais il me faudrair un bloc oblique Smiley ohwell dc pas gérable)

bon je vais en dire un peu plus (préparé vos neurones et un café Smiley cligne )

j'ai un bouton rollover css qui cette fois-ci va regrouper les 2 images en une (1gif à la place de 2),
---------
-----0---
---x-----
--x------
---------
l'image est composée comme ci-dessus, avec 0=un boutondessiné, et xx un texte oblique, le tout formant un gif.
position repos le bouton est rouge et le texte gris clair, position hover le bouton est bleu et le texte foncé.
et j'aimerais que le hover ne soit déclenché que lors du survol de la zone délimitant le bouton (le 0 dans le schéma)
cela est-il faisable en css?
Modifié par qmulonainbus (13 Sep 2006 - 16:34)
c'est bon j'ai réussi
je met un calque transparent sur le second hover comme ça ça ne fait rien quand on passe la souris dessus Smiley lol
Sujet clos
Aller à