IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Effet survol d'un lien avec affichage d'une image


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    apt
    apt est déconnecté
    Membre éclairé
    Inscrit en
    Mai 2002
    Messages
    867
    Détails du profil
    Informations forums :
    Inscription : Mai 2002
    Messages : 867
    Par défaut Effet survol d'un lien avec affichage d'une image
    Bonjour à tous,

    J'aimerais avoir le code qui produit l'affichage d'une image lors d'un survol de la souris sur un lien.

    J'ai cet exemple :

    http://lombre.net/tests/tab-verticales/

    voici une image du rendu voulu :

    http://www.mediafire.com/imageview.p...ey=mimbi3dqmz2

    Merci d'avance.


  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    suffit de modifier le background-image du lien sur son hover et css...
    pas besoin de js pour ça
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2007
    Messages
    101
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juin 2007
    Messages : 101
    Par défaut
    Bonjour,

    Essaie ce bout de code, bien entendu "Image1" et "Image2" sont à placer dans le même répertoire que ta page html

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <html>
    <head>
    </head>
    <body>
    <a href="#" onMouseOver="document.image.src='Image2.jpg';" onmouseout="document.image.src='Image1.jpg';";>Survolez ce lien</a>
    <IMG name=image width=150  height=100 src="Image2.jpg">
    </body>
    </html>
    Je pense avoir répondu à ta question.

    A+
    Philippe

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut

    deux lignes en css et ça marche mêms si js n'est pas activé ...

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    a {background-image:url(path/image1.png);}
    a:hover {background-image:url(path/image2.png);}
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    apt
    apt est déconnecté
    Membre éclairé
    Inscrit en
    Mai 2002
    Messages
    867
    Détails du profil
    Informations forums :
    Inscription : Mai 2002
    Messages : 867
    Par défaut
    Salut,

    Voila un code modifié et testé pour un seul bloque. Il marche bien.

    A present, je voulais essayer d'avoir deux bloques l'un à coté de l'autre, mais je n'y arrive pas :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Tab verticales</title>
    	<meta name="description" lang="fr" content="Essais de tabs verticales accessibles avec jquery" />
    	<style type="text/css" media="screen">
    		body {
    			font-size: 90%;
    			font-family: arial, helvetica, sans-serif;
    		}
    		h1 {text-align: center; color: #f00;}
    		h3 {
    		text-align: left;
    		color: #f00;
    		font-size: 12px;
    	}
    	#articles {
    		position : relative;
    		border: 1px solid #000;
    		width: 352px; height : 123px;
    	}
    		#articles h3, #articles h3 a {color: #900; }
    		/*.hasJS #articles {min-height:200px;}*/
    		.hasJS #articles h3 {
    			cursor: pointer; 
    			background-color: #999; 
    			margin: 0; 
    			padding: 5px; 
    			border-bottom:  #fff 1px solid; 
    			border-right:  #fff 1px solid;
    			width:190px;
    			height:30px;
    		}
    		.hasJS #articles h3.selected {
    		background-color: #E5E5E5;
    		border-right: #fff 1px solid;
    	}
    		.hasJS #articles div div.montre {position: absolute; top: 0; right: 0; left: 196px; }
    		.hasJS #articles div div {position: absolute; top: -5000px; left: -5000px; padding-left: 5px;}
    		.imag {	width:150px; height:122px;}
    		a:link, a:visited, a:active{text-decoration: none;color: #333333;}
    	</style>
    	<script type="text/javascript">
    		document.documentElement.className+=" hasJS";
    	</script>
    </head>
     
    <body>
    	<h1>Tab verticales</h1>
    	<h2>Une série de h3 en tab horizontales</h2>
    	<div id="articles">
    		<div class="article">
    			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3>
    			<div class="montre">
    				<img class="imag"src="news1.jpg" alt="Figure 1" />
    			</div>
    		</div>
    		<div class="article">
    			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis 
    			suivent</a></h3>
    			<div>
    				<img class="imag" src="news2.jpg" alt="Figure 2" />
    		</div>
    		</div>
    		<div class="article">
    			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3>
    			<div>
    				<img class="imag" src="news3.jpg" alt="Figure 3" />
    			</div>
    		</div>
    	</div>
        <div id="articles2">
    		<div class="article">
    			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3>
    			<div class="montre">
    				<img class="imag"src="news1.jpg" alt="Figure 1" />
    			</div>
    		</div>
    		<div class="article">
    			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis 
    			suivent</a></h3>
    			<div>
    				<img class="imag" src="news2.jpg" alt="Figure 2" />
    			</div>
    		</div>
            <div></div>
    		<div class="article">
    			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3>
    			<div>
    				<img class="imag" src="news3.jpg" alt="Figure 3" />
    			</div>
    		</div>
    	</div>
    	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    	<script type="text/javascript">
    			$(document).ready( function () {
    				//tabindex pour la navigation au clavier
    				$("#articles h3").attr("tabindex", "0");
    				$("#articles h3").focus (
    					function () {
    						//trucs à faire pendant le focus sur les h3
    						$("#articles div.montre").removeClass("montre");
    						$("#articles h3.selected").removeClass("selected");
    						$(this).next("div").addClass("montre");
    						$(this).addClass("selected");
    					}
    				);
    				// gestion des hover sur les h3 :
    				$("div.article h3").hover( 
    					function () {
    						//trucs à faire pendant le over sur les h3
    						$("#articles div.montre").removeClass("montre");
    						$("#articles h3.selected").removeClass("selected");
    						$(this).next("div").addClass("montre");
    						$(this).addClass("selected");
    					},
    					function () {
    						//out : trucs à faire éventuellement quand le pointeur sort du h3
    					}
    				);
    			});
    	</script>
    </body>
    </html>
    Mais il y'a un problème de "id" de la div conteneur.

    Il faut donner a chaque div son identificateur propre, mais comment sera le code jQuery qui traitera chaque div a part ?


  6. #6
    apt
    apt est déconnecté
    Membre éclairé
    Inscrit en
    Mai 2002
    Messages
    867
    Détails du profil
    Informations forums :
    Inscription : Mai 2002
    Messages : 867
    Par défaut
    En plus du traitement du numéros du div par jQuery :

    J'ai essayé de supprimer ce code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <script type="text/javascript">
    		document.documentElement.className+=" hasJS";
    	</script>
    Mais le tout est bousillé ...

    Y a t-il une solution pour remplacer ce coden parce que je le trouve trop lourd à comprendre

    lien de visualisation :

    http://majallati.comli.com/test/div3hover/d3h4.php

    Merci.

Discussions similaires

  1. Lien avec affichage d'un sous-menu
    Par laurentSc dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 02/04/2010, 21h54
  2. [Joomla!] Jouer un son au survol d'un lien
    Par Ghatkopar dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 3
    Dernier message: 13/04/2009, 21h19
  3. [VB6] DragDrop avec affichage de l'image durant son deplacement
    Par ProgElecT dans le forum VB 6 et antérieur
    Réponses: 13
    Dernier message: 04/06/2006, 14h54
  4. Problème avec affichage d'une table modifiée
    Par auriolbeach dans le forum Access
    Réponses: 6
    Dernier message: 31/10/2005, 15h45
  5. [GD] Problème d'affichage d'une image avec gd2
    Par turini dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 04/10/2005, 11h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo