Infobulle qui passe sous la div

Invité · 27/12/2012, 13h20

Bonjour

J'ai un soucis sur une infobulle qui passe sous mes divs !
En fait dans une partie du site que j'essai de faire je veux faire apparaitre une image juste en passant la souris sur la miniature.

Pour voir l'exemple : (rubrique NEWS) http://www.informadream.fr/RVE_2/

Les sources :

Code html :

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.5.2.js" ></script>
<script type="text/javascript" src="js/atooltip.jquery.js"></script>
<script type="text/javascript" src="js/kwicks-1.5.1.pack.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" language="javascript" src="js/infobulle.js"></script>
</head>
<body id="page1">
<div class="body1">
	<div class="body2">
		<div class="main">
<!------------------------------------------------------------------------- header ------------------------------------------------------------------------->
			<header>
				<h1><a href="" id="logo">LOGO</a></h1>
			</header>
			<div class="ic">SLOGAN ou AUTRE</div>
<!------------------------------------------------------------------------- / header ----------------------------------------------------------------------->
 
<!-------------------------------------------------------------------------- content ----------------------------------------------------------------------->
			<section id="content">
				<div class="cont_bot_left"></div>
				<div class="cont_bot_right"></div>
				<div class="cont_top_left"></div>
				<div class="cont_top_right"></div>
				<div class="inner">
					<div class="kwiks_wrap">
						<ul class="kwicks horizontal">
							<li id="page_1">
<!------------------------------------------------------------------------- ACCUEIL ------------------------------------------------------------------------->
 
<div class="text">Accueil</div>
<div class="cont">
    <p class="pad_top1">PAGE 1</p>
    <!--<div class="wrapper">
 
        <figure class="left marg_right1">
		<img src="images/img_pge/page1_img1.jpg" />-->
        <p>
        <a href="#" class="bulle"><img src="images/img_pge/page1_img1.jpg" width="50" border="0" />
            <span>
            <img src="images/img_pge/page1_img1.jpg" border="0" />
            </span>
        </a>
        </p>
        <!--</figure>
 
    </div>-->
    <p class="pad_top1">
        Menu des pages : <a href="#page_1">Accueil</a>, <a href="#page_2">News</a>, <a href="#page_3">Services</a>, <a href="#page_4">Produits</a>, <a href="#page_5">Contact</a>.
    </p>
    <p class="pad_top1">
        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<br />
		Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.
    </p>
</div>
 
<!------------------------------------------------------------------------- / ACCUEIL ------------------------------------------------------------------------->
							</li>
							<li id="page_2">
<!---------------------------------------------------------------------------- NEWS --------------------------------------------------------------------------->
 
<div class="text">News</div>
<div class="cont">
	<p class="pad_top1">&nbsp;</p>
        <div>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/page2_img1.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/page2_img1.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </div>
        <p>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/page2_img2.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/page2_img2.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </p>
        <p>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/page2_img3.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/page2_img3.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </p>
        <div>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/01.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/01.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </div>
        <p>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/02.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/02.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </p>
        <p>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/03.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/03.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </p>
        <p>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/page2_img1.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/page2_img1.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </p>
        <p>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/page2_img2.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/page2_img2.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </p>
        <p>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/page2_img3.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/page2_img3.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </p>
        <p>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/01.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/01.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </p>
        <p>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/02.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/02.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </p>
        <p>
        <a href="#" onmouseover="showTooltip('<div class=\'info\'><img id=\'big\' src=\'images/img_pge/03.jpg\'></div>');" onmouseout="hideTooltip()"><img id="big" src="images/img_pge/03.jpg" width="80" onmouseout="hideTooltip()" /></a>
        </p>
    <p class="pad_bot2">&nbsp;</p>
</div>
<div id="bulle"></div>
<!------------------------------------------------------------------------- / NEWS --------------------------------------------------------------------------->	
							</li>
                            </li>
						</ul>
					</div>
				</div>
			</section>
<!------------------------------------------------------------------------- / content ------------------------------------------------------------------------->
 
<!--------------------------------------------------------------------------- footer -------------------------------------------------------------------------->
			<footer>
				<div class="wrapper">
					<ul id="icons">
						<li><a href="#" class="normaltip" title="Facebook"><img src="images/facebook.png" alt=""></a></li>
						<li><a href="#" class="normaltip" title="Twitter"><img src="images/twitter.png" alt=""></a></li>
                        <li><a href="#" class="normaltip" title="Google+"><img src="images/google+.png" alt=""></a></li>
					</ul>
				</div>
                <div align="right">
				<?php echo 'Copyright <a href="http://www.rvebenisterie.fr">RV Eb&eacute;nisterie Menuiserie</a> ','&copy; 2012 ',(2011<date('Y')) ? '- '.date('Y') : '';?><br />
                <?php echo 'Création by <a href="http://www.informadream.fr" title="Dépannage informatique - depannage informatique Coursan">Inform@dream</a> ','&copy; 2008 ',(2007<date('Y')) ? '- '.date('Y') : '';?>
                </div>
			</footer>
<!------------------------------------------------------------------------- / footer -------------------------------------------------------------------------->
		</div>
	</div>
</div>
 
</body>
</html>

J'ai essayer en mettant z-index dans mon fichier css mais rien a faire !
La je plante complètement.
Merci pour votre aide

**Bovino** · 27/12/2012, 13h59

Je pense que ça vient du fichier atooltip.jquery.js ou peut-être de infobulle.js.
Sinon, c'est que ça vient d'un autre fichier...

**SpaceFrog** · 27/12/2012, 14h02

J'ai essayer en mettant z-index dans mon fichier css mais rien a faire !

avec !important ?
et à combien le zindex ?

Invité · 27/12/2012, 14h10

Envoyé par SpaceFrog

avec !important ?
et à combien le zindex ?

Pour le z-index j'ai essayer avec 1, 10 et 9999 mais rien ne change, ni même avec !important.

Je pense que ça vient du fichier atooltip.jquery.js ou peut-être de infobulle.js.
Sinon, c'est que ça vient d'un autre fichier...

Voiçi les sources des 2 fichier js :

atooltip.jquery.js :

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
/*
	jQuery Version:				jQuery 1.3.2
	Plugin Name:				aToolTip V 1.0
	Plugin by: 					Ara Abcarians: http://ara-abcarians.com
	License:					aToolTip is licensed under a Creative Commons Attribution 3.0 Unported License
								Read more about this license at --> http://creativecommons.org/licenses/by/3.0/			
*/
(function($) {
    $.fn.aToolTip = function(options) {
 
    	// setup default settings
    	var defaults = {
    		clickIt: false,
    		closeTipBtn: 'aToolTipCloseBtn',
    		fixed: false,
    		inSpeed: 200,
    		outSpeed: 0,
    		tipContent: '',
    		toolTipClass: 'aToolTip',
    		xOffset: 5,
    		yOffset: 5
    	},
 
    	// This makes it so the users custom options overrides the default ones
    	settings = $.extend({}, defaults, options);
 
		return this.each(function() {
			var obj = $(this);
			// Decide weather to use a title attr as the tooltip content
			if(obj.attr('title')){
				// set the tooltip content/text to be the obj title attribute
				var tipContent = obj.attr('title');	 
			} else {
				// if no title attribute set it to the tipContent option in settings
				var tipContent = settings.tipContent;
			}
 
			// check if obj has a title attribute and if click feature is off
			if(tipContent && !settings.clickIt){	
				// Activate on hover	
				obj.hover(function(el){
					obj.attr({title: ''});						  
					$('body').append("<div class='"+ settings.toolTipClass +"'><p class='aToolTipContent'>"+ tipContent +"</p></div>");
					$('.' + settings.toolTipClass).css({
						position: 'absolute',
						display: 'none',
						zIndex: '50000',
						top: (obj.offset().top - $('.' + settings.toolTipClass).outerHeight() - settings.yOffset) + 'px',
						left: (obj.offset().left + 1/2*(obj.outerWidth()) + settings.xOffset) + 'px'
					})
					.stop().fadeIn(settings.inSpeed);	
			    },
				function(){ 
					// Fade out
					$('.' + settings.toolTipClass).stop().fadeOut(settings.outSpeed, function(){$(this).remove();});
			    });	
		    }
 
		    // Follow mouse if fixed is false and click is false
		    if(!settings.fixed && !settings.clickIt){
				obj.mousemove(function(el){
					$('.' + settings.toolTipClass).css({
						top: (el.pageY - $('.' + settings.toolTipClass).outerHeight() - settings.yOffset),
						left: (el.pageX + settings.xOffset)
					})
				});			
			} 		    
 
		    // check if click feature is enabled
		    if(tipContent && settings.clickIt){
				// Activate on click	
				obj.click(function(el){
					obj.attr({title: ''});						  
					$('body').append("<div class='"+ settings.toolTipClass +"'><p class='aToolTipContent'>"+ tipContent +"</p></div>");
					$('.' + settings.toolTipClass).append("<a class='"+ settings.closeTipBtn +"' href='#' alt='close'>close</a>");
					$('.' + settings.toolTipClass).css({
						position: 'absolute',
						display: 'none',
						zIndex: '50000',
						top: (obj.offset().top - $('.' + settings.toolTipClass).outerHeight() - settings.yOffset) + 'px',
						left: (obj.offset().left + obj.outerWidth() + settings.xOffset) + 'px'
					})
					.fadeIn(settings.inSpeed);	
					// Click to close tooltip
					$('.' + settings.closeTipBtn).click(function(){
						$('.' + settings.toolTipClass).fadeOut(settings.outSpeed, function(){$(this).remove();});
						return false;
					});		 
					return false;			
			    });
		    }
 
		}); // END: return this
 
		// returns the jQuery object to allow for chainability.  
        return this;
    };
})(jQuery);

infobulle.js :

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
var xOffset=6
var yOffset=5
 
var affiche = false; // La variable i nous dit si le bloc est visible ou non
var w3c=document.getElementById && !document.all;
var ie=document.all;
 
if (ie||w3c) {
var laBulle
}
 
function ietruebody(){ // retourne le bon corps...
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function deplacer(e) {
if(affiche){
var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
 
var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
 
var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
 
var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
 
// modifier la largeur de l'objet s'il est trop grand...
if(laBulle.offsetWidth > winwidth / 3){
laBulle.style.width = winwidth / 3
}
 
// si la largeur horizontale n'est pas assez grande pour l'info bulle
if(rightedge < laBulle.offsetWidth){
// bouge la position horizontale de sa largeur à gauche
laBulle.style.left = curX - laBulle.offsetWidth + "px"
} else {
if(curX < leftedge){
laBulle.style.left = "5px"
} else{
// la position horizontale de la souris
laBulle.style.left = curX + xOffset + "px"
}
}
 
// même chose avec la verticale
if(bottomedge < laBulle.offsetHeight){
laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
} else {
laBulle.style.top = curY + yOffset + "px"
}
}
}
function showTooltip(text) {
if (w3c||ie){
laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : ""
laBulle.innerHTML = text; // fixe le texte dans l'infobulle
laBulle.style.visibility = "visible"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
affiche = true;
}
}
function hideTooltip() {
if (w3c||ie){
affiche = false
laBulle.style.visibility="hidden" // avoid the IE6 cache optimisation with hidden blocks
laBulle.style.top = '-100000px'
laBulle.style.backgroundColor = ''
laBulle.style.width = ''
}
}
 
document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.

Mais franchement j'ai un doute sur ces deux fichiers, je pense pas que ça vienne de là !
en tout cas pas de atooltip.jquery.js

Un truc de ouffff .

**NoSmoking** · 27/12/2012, 22h02

Bonsoir,

Envoyé par scorpion11_22

Pour voir l'exemple : (rubrique NEWS) http://www.informadream.fr/RVE_2/

rien vu de tel...

Un question me trotte, tu utilises deux scripts d'infoBulle ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script type="text/javascript" src="js/atooltip.jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/infobulle.js">

Infobulle qui passe sous la div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager