Salut. Voilà
Je suis en train de faire un site d'un jeu et je voudrais que lorsque l'utilisateur pointe sont curseur sur un lien, une image s'affiche a coté du curseur presentant des details.
 
Precisement, j'ai une image d'un objet. Lorsque la personne met sont curseur dessus, une seconde image s'affiche avec un hover, qui details les proprieté magique de l'objet ciblé par le curseur.
Un peu comme dans gladiatus. quand on met sont curseur sur un item on a les stat de l'objet.
 
Jveu pas faire un jeu ! c'est un site dedié a un jeu et jveu faire ca propre!.
 
j'arrive a mettre des image de fond quand je passe le curseur, mais c'est pas du tout ce que je recherche, dans mon cas ca ferai du gros patté avec deux images lol !
 
Voila alors pour vous montré en gros ou j'en suis sur ce truc:
 
en gros:
page html
 
<img src="folder/img.ext" class="name"/>
 
 
Page css
.name:hover
{
????
}
 
 
Est-il possible de remplacer les ??? par un code qui donnera l'effet recherché ou il faut procedé autrement?
SI c'est possible, quelqu'un connait il le code approprié???
 
Merci d'avance ca ferai chouette pour un premier site !
 
 
 

j'ai trouver un truc entre temps

<A HREF="#" onMouseOver="define.src='imagedetailmagik.jpg'"  onMouseOut="define.src='imagedepart.jpg'"><IMG SRC="imagedepart.jpg" BORDER=0 NAME="define" ALT="detail"></A>

Et ca marche bien.
Il disent d'ajouter un code dans le head, mais jlai enlevé et ca marche aussi. c'est peut etre necessaire dans le jaa mais pas en html.
Apres il y avais d'autre valeur mais ca marche sans. Ca doit etre des details en plus. A essayer des variantes.

Mais bon j'essais de comprendre la ligne de code. en gros :
<IMG SRC="imagedepart.jpg" BORDER=0 NAME="define" ALT="detail"> ca c'est l'image DE DEPART
onMouseOver="define.src='imagedetailmagik.jpg'" ca c'est l'image quand on met le curseur elle est "temporaire"
onMouseOut="define.src='imagedepart.jpg'"> ca c'est l'image qui est affiché sans le curseur. Si on inscrit le nom d'une troisieme image, c'est elle qui restera dans la page
ce qui signifie qu'elle fais un renvois a l'image d'origine pour qu'on s'y retrouve.

En revenche si quelqu'un sais affiché une image suplementaire a coté du curseur lorsque l'on pointe un objet ( ici une image ) ca serai parfaitement ce que je recherche.
Merci d'avance

C'est possible - recommandé - de faire ça en CSS.
Un exemple basique, qui devrait marcher avec FF et IE :
Le HTML :

<p><a href=#><img src="objet.jpg" alt="Objet" />
   <span class="propriete"><img src="propriete.jpg" /></span>
</a></p>

La balise span définit un élément qui fait partie du texte, mais qui peut avoir des propriétés différentes.
C'est un peu la même chose qu'un DIV mais ça ne définit pas une nouvelle section.
 
Le CSS :

a span {
/* Par défaut, on ne verra pas le span */
    display: none;
}
a:hover span { 
/* Quand on survole le lien, par contre, on affiche le span
Le position absolute permet de ne pas casser la mise en page : 
le span s'affichera au-dessus du reste
On pourrait aussi définir la position, pour qu'il s'affiche dans un cadre précis
*/
    display: inline;
    position: absolute;
    background: none;
}

A noter, ça pourrait aussi fonctionner avec du texte.
Je n'ai plus le code, mais on peut donner l'impression que le texte s'affiche dans une "info-bulle"...
Une petite recherche sur Google devrait t'en dire plus.

Salut,
Je vais essayer ton bout de code tout de suite et je t'informe tout de suite du resultat. En attendans merci d'avoir pris le temps de redigé tout ce code.
A toute

OH O_O. c'est exactement ce que je recherchais.
Magnifique. C'est plus simple de ce que j'avais trouvais et c'est avec du CSS.
Je vais essayer de compredre l'integralité du code et l'adapté au situation.
Ca fais exactement l'effet que je voulais.
Quand on met le curseur sur l'image, la seconde image s'affiche a gauche et sans se superposé a la premiere.
 
Franchement merci.
 
Code 100% valide et efficace
 
Merci