Faire apparître une image avec le passage de souris

Faire apparître une image avec le passage de souris - HTML/CSS - Programmation

Marsh Posté le 24-06-2009 à 11:31:58    


 
Bonjour,
 
Je suis en train de réaliser un site internet et sur une page je souhaiterais faire l'application suivante :
Le fait de passer la souris sur un bouton permet de faire apparaître une image sur un lieu défini d'une la carte.
 
Actuellement j'ai le code suivant en html qui définit la carte en fond d'image, le positionnement de l'image qui est cachée par défaut, et le bouton
 
<TABLE  BORDER="0">
<td width=1000 height=700 style="background : url(http://.../images/rco.jpg) no-repeat" </td>  (carte en fond d'image)
<span style="position:relative;left:150px;top:200px"><img src="http://.../images/image01.jpg" style="display:none"/></span> (positionnement de l'image cachée par défaut)
<tr>
<td <img src="http://.../images/bouton.jpg" /> (bouton)
</td>
</tr>
</TABLE>
 
 
Pouvant faire que du code très basique, je demande de l'aide pour réaliser cette application
 
 
Si mon post n'est pas dans le bon thème merci de le déplacer.
 
 
Cordialement
 
 
kouedic

Reply

Marsh Posté le 24-06-2009 à 11:31:58   

Reply

Marsh Posté le 24-06-2009 à 13:02:27    

Bonjour.
 
1. Tu parles de bouton, mais dans ton code c'est une image. Ne pas confondre...
 
2. Merci d'utiliser les balises http://forum-images.hardware.fr/icones/message/c.gif ou code pour ton code, ça facilite la lecture.
 
 
3. Le tableau est vraiment nécessaire ? Si tu veux faire quelque chose de correct (pas juste quelque chose qui s'affiche correctement, hein, quelque chose qui respecte les règles), il vaut mieux réserver les tableaux à la présentation des données tabulées.
En clair, faire un tableau pour afficher un tableau, pas poyr positionner correctement les éléments.
 
4. Si tu peux, tu devrais te pencher sur le CSS. En gros, tu scinde ton code en deux :
- Le html qui contient les informations.
- Le css qui contient la présentation.
Ca aide pour maintenir le code...
 
5. Deux possibilités : JavaScript ("onclick" par exemple) ou CSS. Je privilégierais le CSS (parce que le JS c'est mal   :kaola: )
En CSS, une rapide recherche sur le net te donne pas mal d'indications. En gros :
- Tu intègre le span dans le lien.
- Tu définis le span comme invisible.
- Tu définis le span du lien au survol comme visible.
Indices pour une bonne recherche : "css popup span hover"
Et trois bons sites sur les CSS :
- http://www.pompage.net/ => pas mal d'articles qui aidant à comprendre l'intérêt des css
- http://www.alsacreations.com/ => plein de tutoriels sur les css
- http://www.cssplay.co.uk/ (en anglais) qui contient pas mal de code.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed