begin process at 2012 05 29 05:54:51
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Faire apparaître une image avec un passage de souris


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Faire apparaître une image avec un passage de souris

mercredi 24 juin 2009 à 11:21:08 | Faire apparaître une image avec un passage de souris

kouedic

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






mercredi 24 juin 2009 à 11:42:13 | Re : Faire apparaître une image avec un passage de souris

kankrelune

Membre Club
Slt....

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

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

@ tchaOo°
mercredi 24 juin 2009 à 11:47:13 | Re : Faire apparaître une image avec un passage de souris

Bul3

Membre Club


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>
<body>
<TABLE>
    <tr>
        <td style="background:url(image de fond) no-repeat;width:500px;height:500px">&nbsp;</td></tr>
    <tr>
        <td ><a href="#">
                <img src="image pour déclencher">
                <span>
                    <img src="image à afficher" />
                </span></a>
        </td></tr>
</TABLE>
</body>
</html>

j'ai modifié les positions pour que ce soit visible
lors de mes tests avec mes images.
il te reste à adapter


Cordialement [mon Site] [M'écrire] Bul


Cette discussion est classée dans : style, image, souris, apparaître, mso


Répondre à ce message

Sujets en rapport avec ce message

deplacer une image à des coordonnées [ par gnosis35 ] salut voilà le pb : je clic sur une image et là j'ai pour tester deux texts box qui récupérent les coordonnées x,y de la souris... bon ça c tres bi Centrer une image quelque soit la résolution ou le navigateur. [ par mquisuisje ] <link rel="Fi picdem.net télésurveillance [ par brahimzemmal ] <link rel="Fi Aiguillage de site [ par uniuc ] <link rel="Fi effet de rotation d'iamge avec script, et lien sur image [ par RomantikA ] Bonjour,je ne sais pas trop si c'est le bon endroit pour expoqer mon problème, mais il s'agit d'un code javascript, donc j'ai tenté le tout pour le to Question sur les Frames et DIV [ par Lobb88 ] <link rel="Fi RemoveChild capricieux [ par armata ] <link rel="Fi image change au passage de la souris [ par sonialand ] salut tout le monde,est ce que qqun pourra me dire comment je dois faire pour changer l'image au passage de la souris?merci :) Pb Affichage infobulle avec Image sous IE [ par ragmo ] Bonjour, J'ai besoin d'aide concernant l'affichage d'une infobulle contenant une image qui s'affiche au survole d'une vignette. C Survolé une image au passage de la souris [ par danielm81 ] Bonjour les amis ! je n'arrives pas à faire survolé ma image1 par une autre image2 qui deviendrait un lien pour une autre page web au passage de la so


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,359 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales