Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1466 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  affichage d'image en Avant-plan avec :hover.

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

affichage d'image en Avant-plan avec :hover.

n°1849253
neo-blaste​r
Posté le 10-02-2009 à 05:18:57  profilanswer
 

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 !
 
 
 

mood
Publicité
Posté le 10-02-2009 à 05:18:57  profilanswer
 

n°1849254
neo-blaste​r
Posté le 10-02-2009 à 05:53:35  profilanswer
 

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


Message édité par neo-blaster le 10-02-2009 à 06:17:44
n°1849303
macgawel
Posté le 10-02-2009 à 09:43:57  profilanswer
 

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

Code :
  1. <p><a href=#><img src="objet.jpg" alt="Objet" />
  2.   <span class="propriete"><img src="propriete.jpg" /></span>
  3. </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 :

Code :
  1. a span {
  2. /* Par défaut, on ne verra pas le span */
  3.     display: none;
  4. }
  5. a:hover span {
  6. /* Quand on survole le lien, par contre, on affiche le span
  7. Le position absolute permet de ne pas casser la mise en page :
  8. le span s'affichera au-dessus du reste
  9. On pourrait aussi définir la position, pour qu'il s'affiche dans un cadre précis
  10. */
  11.     display: inline;
  12.     position: absolute;
  13.     background: none;
  14. }

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.

n°1849423
neo-blaste​r
Posté le 10-02-2009 à 13:48:25  profilanswer
 

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

n°1849424
neo-blaste​r
Posté le 10-02-2009 à 13:54:37  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  affichage d'image en Avant-plan avec :hover.

 

Sujets relatifs
Traitement d'image sous MatlabPositionnement objet et image de fond
Logiciel pour lire le texte dans une image en Javarécupérer une image de la BDD et afficher
Premiere image d'un lecteur flash en demi-teintTaille image variable dans une cellule
Pb affichage de champs MySQL: 5.0.51aProblème d'affichage dans AJAX
Redimmensionner image dans movieclip[ACCESS] Afficher une image en provenance du web
Plus de sujets relatifs à : affichage d'image en Avant-plan avec :hover.


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR