Faire apparaître une image avec un passage de souris

cs_kouedic Messages postés 1 Date d'inscription jeudi 22 novembre 2007 Statut Membre Dernière intervention 24 juin 2009 - 24 juin 2009 à 11:21
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 - 24 juin 2009 à 11:47
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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="ProgId" content="Word.Document" /><meta name="Generator" content="Microsoft Word 11" /><meta name="Originator" content="Microsoft Word 11" /><link rel="File-List" href="file:///C:%5CDOCUME%7E1%5CAdmin%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml" /><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:HyphenationZone>21</w:HyphenationZone>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" LatentStyleCount="156">
</w:LatentStyles>
</xml><![endif]--><style><!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
@page Section1
{size:612.0pt 792.0pt;
margin:70.85pt 70.85pt 70.85pt 70.85pt;
mso-header-margin:36.0pt;
mso-footer-margin:36.0pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
--></style><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Tableau Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
</style>
<![endif]-->  BORDER=\"0\">

  (carte en fond d'image)

(positionnement de l'image cachée par défaut)

----

, (bouton)

</td>

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

2 réponses

kankrelune Messages postés 1293 Date d'inscription mardi 9 novembre 2004 Statut Membre Dernière intervention 21 mai 2015
24 juin 2009 à 11:42
Slt....

Un peu de lecture qui devrait t'intéresser... .. .

http://www.commentcamarche.net/contents/javascript/jsevent.php3

@ tchaOo°
0
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
24 juin 2009 à 11:47
Bonjour,

en css...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
        a span         {     display: none;   
                                position: absolute;
                                top: 20px;
                                left: 100px;
                          }

    a:hover span    {     display:inline;    }
</style>
</head>

    ----

        &nbsp;,
    ----

        mon Site] [M'écrire] Bul
0
Rejoignez-nous