28172 sujets

CSS et mise en forme, CSS3

[Résolu] Roll-over sur une carte map area

Bonjour,
http://cedricdebusschere.fr/carte/carte.html
Petit problème de CSS : je souhaite avoir une carte plus claire lorsque la souris est sur l'ensemble de la carte. Ici c'est le cas, mais lorsque l'on passe sur les points, la carte redevient normale... 
<img class="map" src="carten.png" width="438" height="443" usemap="#map" onmouseover="this.src='cartel.png';" onmouseout="this.src='carten.png';" />


Dans le lien le roll-over roll-out est en javascript, mais précédemment j'avais essayé en CSS comme ceci :
> image en fond avec roll-over css (opacity)
> image avec uniquement les points en opacité 100% par dessus
=> même problème, quand on passe sur les points le fonds n'est plus en roll-over...

Auriez-vous une idée de la construction adéquate pour le résultat voulu ? idéalement en revenant en CSS avec 1 ou 2 images plutôt que javascript !

Merci d'avance pour vos réponses
Le plus simple est de faire cette effet lorsuq le souris est sur la div.carte et non pas sur toon image comme cela ca comprendra tout ton image et tes points :
le cssdeck

et dans ce cas pas besoin du js.
thej8 a écrit :
Le plus simple est de faire cette effet lorsuq le souris est sur la div.carte et non pas sur toon image comme cela ca comprendra tout ton image et tes points :
le cssdeck

et dans ce cas pas besoin du js.


Merci pour ta réponse thej8, mais le problème c'est que l'idée à l'origine de cette demande était de mettre les points roses en valeur : seul le fond doit être plus transparent ou une image plus claire, alors que les points doivent rester rose flashy Smiley ravi
Dans ce cas ça passera par du js. Ce n'est pas bien compliqué, mais je ne vais malheureusement pas pouvoir te le faire tout de suite, dans le bus c'est tout de suite plus compliqué.

[EDIT] en faite c'est tout..bête, à tout le temps vouloir utilisé le js on oublie que le css est puissant. Donc il sufffit de déclarer une opacité inférieur à un à l'image quand on a la souris sur la div carte :
le cssdeck


.carte:hover img.map{
  opacity: .8;
}


et n'oublie pas de donner à ta div carte la taille de ton image sinon l'effet de hover se fera sur toute la longueur de la page.

PS si je peux me permettre, tu devrais revoir le contraste blanc/jaune sur ton site, c'est difficilement lisible.
Modifié par thej8 (17 Mar 2014 - 22:20)
Bonsoir marion9012,

En continuant sur votre philosophie de codage initiale et en déportant les événements de souris de <img /> à la <div /> parente, vous pourriez avoir le comportement attendu avec, par exemple, le code suivant :
...
<div class="carte"
     onmouseover="document.getElementById('map-image').src = 'cartel.png';"
     onmouseout="document.getElementById('map-image').src = 'carten.png';"
     style="width: 438px;">

    <img id="map-image" class="map" src="carten.png" width="438" height="443" usemap="#map" />
    <map name="map" id="map">
        <area shape="circle" href="#" coords="413,137,20" />
        <area shape="circle" href="#" coords="260,45,20" />
        <area shape="circle" href="#" coords="260,125,20" />
        <area shape="circle" href="#" coords="245,85,20" />
    </map>
</div>
...

Comme vous l'indiquait thej8 précédemment, il faut appliquer une largeur à la <div /> pour qu'elle fasse uniquement la largeur de l'image, et non toute la largeur de l'écran.

Et dernier petit détail : il faut bien fermer les balises <img /> et <area /> Smiley cligne .

Espérant que la solution vous convienne.
Bonne soirée et bon code...
Bonjour et merci thej8 et Guiwint pour vos réponses.
En fait ma carte avait bien une largeur, sauf que pour vous montrer je n'ai pas collé la css de la page d'origine Smiley cligne

Thej8, la css que tu proposes ne semble pas donner le résultat que j'attendais, les points roses deviennent aussi transparent il me semble...
Du coup j'ai opté pour la solution JS de Guiwint, c'est parfait, dommage pas en CSS mais bon, ce n'est peut-être pas possible... Je l'ai combiné avec une transition css opacité (mais à 0.9 seulement car bien sûr les points sont aussi concernés) pour que ce soit plus joli.
Le résultat me convient, merci encore ! Smiley biggrin
Modifié par marion9012 (18 Mar 2014 - 13:07)
thej8 a écrit :
Je vais faire le casse noisette mais ma technique en full css : celle la, marche bien.


En fait modifiant la valeur vers plus transparent, on voit que les points deviennent aussi transparents... en tous cas chez moi (chrome) (?). Et comme j'ai besoin de faire la carte vraiment plus claire (.5), ça se voit tout de suite...
Oh oui tu a raison c'est étrange. je ne comprend pas pourquoi ca ne marche pas.Enfin, tu a la solution js de Guiwint qui marche c'est le principal. Mais si quelqu'un sait pourquoi ma technique ne marche pas ca m'interesse.
thej8 a écrit :
Oh oui tu a raison c'est étrange. je ne comprend pas pourquoi ca ne marche pas.Enfin, tu a la solution js de Guiwint qui marche c'est le principal. Mais si quelqu'un sait pourquoi ma technique ne marche pas ca m'interesse.


En fait il me semble que pour faire comme ça il faudrait faire une image de fond (opaque à faire plus ou moins transparente) + un png avec uniquement les points par dessus. J'avais testé en les superposant mais n'avait pas réussi à faire l'effet roll over, car quand on est sur un point, on est plus sur le fond...
Mais si je savais faire je ne poserais pas la question Smiley lol


Merci quand même Smiley cligne , en tous cas la solution JS fonctionne c'est déjà bien !
Bonjour à tous,

En effet une version full CSS est possible. Il suffit du style suivant :
.carte {
  /* Image au repos */
  background: url("http://cedricdebusschere.fr/carte/carten.png") 0 0 no-repeat;
  
  width: 438px;
  height: 443px;
}

.carte:hover {
  /* Image au survol */
  background-image: url("http://cedricdebusschere.fr/carte/cartel.png");
}

.carte img.map {
  /* l'image principale est en transparence */
  /* pour laisser apparaître les images de fond */
  /* et reste tout de même active avec le mapping */
  opacity: 0; 
}

Il est aussi possible ne pas mettre d'opacité à 0 dans .carte img.map {...}, mais plutôt une image PNG entièrement transparente (de 5x5px par exemple) :
<img class="map" src="[b]blank.png[/b]" width="438" height="443" usemap="#map">
Dans ce cas le mapping resterait actif et laisserait visibles les images de fond.

Bonnes recherches et bon code...
Modifié par Guiwint (18 Mar 2014 - 16:36)
Sujet clos
Aller à