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

Infobulle qui passe sous la div

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager