Changer d'image au passage de la souris

[Seriwyth]

Bonjour à tous =)
Me (re)voilà encore ... Disons que j'ai un problème qui me tient tête depuis quelques heures ... bon, j'ai déjà essayé plein de truc, mais je crois que ma logique ne correspond pas à celle du créateur du HTML/CSS
Enfin bref, voilà le soucis : j'aimerai modifier une image de fond au passage de la souris oui mais! (pensez vous, ce serait trop simple sinon) ... j'aimerai que l'image de fond change au moment où je passe ma souris sur un texte pas trop loin, et que dans l'idéal, il y aurait même deux images qui viendraient remplacer l'image de fond quand je passe ma souris sur un texte ou sur l'autre o/
... heu... oulà ... pour moi c'est clair mais ... un screen s'impose ^^"

Vous voyez un peu mieux la chose? C'est un peu comme un système d'infobulle (en passant, je précise que j'ai essayé par des infobulles, mais cette l'image de l'infobulle passe au dessus de tout, les z-index n'y ont rien changés --") mais en pas pareil ...
Alors, je sais que c'est faisable en regroupant toutes les images en une seule, et en indiquant seulement la position de l'image que l'on veut voir s'afficher à la place de l'autre... Sauf que je n'ai jamais usé cette méthode alors j'en suis à mon coup d'essai =)

Enfin, ... J'ai essayé de bien faire les choses, j'imagine que la solution est toute bête mais vraiment, je ne trouve pas x.x
Oh, voilà le code du sous forum ...

Code:

<div class="image"><img src="http://img15.hostingpics.net/pics/819930fond.png"/><table style="margin-top:-216px;"><tr><td width="115px"></td><td><div class="panneauG" /><a class="image" href="xxx">Océan Anthelme</div></a></td><td width="410px"></td><td><div class="panneauD" style="positon:absolute; z-index:15;">Telmarà</td><td width="100px"></td></tr></table><center><img src="http://img15.hostingpics.net/pics/859445dagmara.png" style="margin-top:-87px;position:relative;z-index:10;" class="gradualfader"></center></div>

Le CSS de l'image de la discorde

Code:

.image{
  background-image:url(http://img15.hostingpics.net/pics/330490Dagmara.png);
  background-repeat: no-repeat;
  position:relative;
  z-index:1;
  background-position:-0px 0px;
  height:263px;
}

Et l'image de la discorde qui va avec!
https://2img.net/r/hpimg15/pics/330490Dagmara.png

Merci à ceux qui prendront le temps de me lire, parce que moi, je suis vraiment à cour d'idée X3
Bonne journée

[Seriwyth]

Coucou, je passe donner des nouvelles de mes recherches , je ne sais pas si j'ai le droit d'en donner maintenant mais peut être que ça pourra aider x.x (j'espère que ce ne sera pas considéré comme un "up")

J'ai vu qu'il était possible de faire apparaître et disparaître des éléments par le CSS ...

source thème FA:

Du coup, j'ai un peu mieux cerné ce que je voulais faire (ça donnera un meilleur angle de réflexion parce que j'étais très mal partie xD): en fait, il s'agirai de décaler l'image de fond de 926px (noté par la class "image" sur le code que j'ai envoyé) en passant sur un texte (anthelme) et de 1 852px en passant sur "Telmarà" ...

Voilà, j'espère que c'est un peu plus clair , je suis en train de chercher de mon côté en même temps, je vous tiens au courant!
Merci ... heu... et si je n'avais pas le droit, je suis vraiment désolée

[Ea]

Bonjour,


Up c'est une façon de parler, il faut pas poster consécutivement sans 24 heures d'intervalle ^^

Vu que le CSS ça va du parent à l'enfant ça me semble bien compromis ( qu'au survol d'un enfant quelque chose du parent change ).

Donc javascript is the way to go je pense :

Code:

<div>
 <span id="bijour">Hello world</span>
 <span id="auvoir">Bye infinity</span>
</div>
<script type="text/javascript">
jQuery("#bijour,#auvoir").hover(function(){jQuery(this).parent().addClass(jQuery(this).attr("id"))},function(){jQuery(this).parent().removeClass(jQuery(this).attr("id"))});
</script>

( pour avoir une classe bijour et auvoir au div parent ( selon qu'on soit au dessus de #bijour ou #auvoir ) )

[Seriwyth]

<boulet>Heu... J'ai pas compris la première phrase ,il faut pas me prendre à froid comme ça avec des termes pareils XD (en fait, je crois que c'est le mot circonvenir qui fait tout flopper, ça veux dire transgresser ça, non?) </boulet>
Ah oui, évidemment, ça aurait été trop simple avec le CSS... *sniif*
heu... bref! Merci pour la réponse . Heu... attendez, je me recentre... .. . Je suis toujours pas super pote avec le javascript, je vais voir si j'ai bien compris... Donc! *cerveau qui fume* (le moindre petit truc en javascript me demande un effort colossal, je vous assure, c'en est déprimant!XD) <boulet>... Je la met où l'image de fond? ... dans une div parent? </boulet> Parce que ... Je suis tentée de faire un truc, mais ça en reviendrai à faire une infobulle hors j'ai déjà essayé et... bon, bref, c'est pas vraiment probant. J'ai du mal suivre un truc... c'est ça?

Mince, vous avez édité , j'ai l'air maligne à parler de trucs qui existent plus moi XD
Bon... J'ai compris du coup, vraiment désolée heu... et bien, je vais voir ce que ça donne et je vous tiens au courant

[Ea]

La dernière phrase veut dire que le dom ( document object model ) sera comme cela quand on ne passe pas au dessus des 2 machins bidules :

Code:

<div>
 <span id="bijour">Hello world</span>
 <span id="auvoir">Bye infinity</span>
</div>

Comme ceci en passant au dessus du hello world :

Code:

<div class="bijour">
 <span id="bijour">Hello world</span>
 <span id="auvoir">Bye infinity</span>
</div>

Comme ceci en passant au dessus du bye infinity :

Code:

<div class="auvoir">
 <span id="bijour">Hello world</span>
 <span id="auvoir">Bye infinity</span>
</div>

Donc il suffira d'avoir dans le CSS :

Code:

selecteur_du_div {
  background: tatata;
}
selecteur_du_div.bijour {
  background-position: 4px -7px;
}
selecteur_du_div.auvoir {
  background-position: 4px -14px;
}

Edit : ah oui j'ai édité, je sais pas ce que j'avais mis avant (a)

( circonvenir = Agir auprès de quelqu’un avec ruses et artifices pour le déterminer à faire ce qu’on souhaite de lui = pas ce que je pensais )

[Seriwyth]

Aww! Mercii! ça y'est, j'ai enfin compris! (je suis hyper longue à la détente aujourd'hui, je sais pas ce qui m'arrive, ce doit le second effet dimanche)
Bref, en tout cs, je vais essayer voir ce que ça donne =D
...
Alors... Je dois vraiment être un big boulet ... Je n'ai pas réussi à faire fonctionner le code --" ... Pourtant, j'ai bien mis le javascript, indiqué la class en question mis il doit y avoir un truc qui pêche, forcément... mais vraiment, je ne vois pas quoi, j'ai pas du si bien comprendre que ça en fait

Voilà ce que j'ai mis dans la feuille de style, j'ai essayé avec et sans les points devant le nom des class pour voir... ça n'a rien fait ^^":

Code:

.dagmara{
  background-image:url(http://img15.hostingpics.net/pics/330490Dagmara.png);
  background-repeat: no-repeat;
  position:relative;
  z-index:1;
  background-position:-0px 0px;
  height:263px;
  width:926px;
}
dagmara.anthelme {
  background-position: -926px 0;
}
dagmara.telmara {
  background-position: -1852px 0;
}

et dans le html

Code:

<script type="text/javascript">
jQuery("#anthelme,#telmara").hover(function(){jQuery(this).parent().addClass(jQuery(this).attr("id"))},function(){jQuery(this).parent().removeClass(jQuery(this).attr("id"))});
</script><div class="dagmara"><img src="http://img15.hostingpics.net/pics/819930fond.png"/><table style="margin-top:-216px;"><tr><td width="115px"></td><td><div class="panneauG" /><a  href="xxx" class="anthelme">Océan Anthelme</a></td><td width="410px"></td><td><div class="panneauD"/><a  href="xxx" class="telmara">Telmarà</a></td><td width="100px"></td></tr></table><center><img src="http://img15.hostingpics.net/pics/859445dagmara.png" style="margin-top:-87px;position:relative;z-index:10;" class="gradualfader"></center></div>

Est-ce que vous voyez s'il manque quelque chose s'il vous plaît? je ne vois vraiment pas ce qui cloche =3
(Oh, d'accord ah bien, j'ai appris un nouveau mot français n.n)

Edit: Oh! Est-ce qu'il ne faudrait pas que je mette le javascript dans les pages javascript par hasard? Je vais essayer
Oups, c'était pas ça, ça fonctionne toujours pas... Je dois être le reine des boulet dans mon genre, mais j'i vraiment du mal avec ces codes =S

[Seriwyth]

Hum hum... problème résolu ^^"
C'était juste quelques erreurs toutes bêtes en fait... Je viens de remarquer qu'en fin de compte, ça ne fonctionnait pas avec les tableaux et que j'avais fais quelques bugs dans mon code *sifflote en regardant le plafond*
Donc ... Merci beaucoup à vous Etana et bonne soirée à tous =)

[Ea]

Il fallait mettre le javascript juste après ^^


Et le sélecteur css :

Code:

dagmara.anthelme

Cela sélectionne les éléments :

Code:

<dagmara class="anthelme"></dagmara>

Vous vouliez probablement mettre :

Code:

.dagmara.anthelme

Mais vu que c'est résolu j'imagine que c'était résolu =)

[Seriwyth]

Heu... ah mais non, c'est mieux que ce que j'ai fait *.* (décidément, j'ai toujours le chic pour torturer des pauvres codes alors que ça sert à rien --")
Merci beaucoup, ça ira beaucoup mieux comme ça je pense (parce que mon histoire sans tableau ... on sent la magouille incroyable du débutant xD)
Bonne soirée, bon, cette fois, le problème est vraiment résolu !

Merci encore!