Bonjour,
J'ai un problème avec le code suivant, les informations affichés dans la balise <span> s'affiche derrière les images.
Comment faire pour les afficher devant les images ?
Merci
Citation :
<html>
<head>
<style type="text/css">
.tooltip {
}
.img
{
position: relative;
z-index: -1;
}
.tooltip .tip{
position: absolute;
top: 0px;
left: 45px;
width: 200px;
border: 2px solid #aa9900;
background-color: #000000;
text-decoration: none;
font-size: 12px;
display: none;
}
.tooltip .tip .tooltipline {
float: left;
width: 100%;
}
.tooltip .tip .tooltipheader {
float: left;
width: 100%;
font-weight: bold;
}
.item {
position: relative;
width: 40px;
height: 40px;
z-index: 1;
}
.weapon0 {
padding: 16px 0 0 69px;
float: left;
}
.weapon1 {
padding: 16px 0 0 11px;
float: left;
}
.weapon2 {
padding: 16px 0 0 10px;
float: left;
}
</style>
<script language="Javascript">
var curTip = "";
function displayToolTip(id) {
if( curTip != "" ) {
hideToolTip( curTip );
}
tip = document.getElementById( id );
tip.style.display="block";
tip.style.zIndex=100;
curTip = id;
}
function hideToolTip(id) {
tip = document.getElementById( id );
tip.style.display="none";
curTip = "";
}
</script>
</head>
<body>
<div class="weapon0">
<div class="item">
<a class="tooltip" href="#" onMouseover="displayToolTip('1497:0:0:0equipBack')" onMouseout="hideToolTip('1497:0:0:0equipBack')">
<img src=http://www.google.fr/intl/fr_fr/images/logo.gif alt="" width=40 height=40 class=img>
<span class="tip" id="1497:0:0:0equipBack">
<span class="tooltipheader" style="color:#9d9d9d">sdfsdf</span>
<span class="tooltipline" style="color:#ffffff">Dos</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfs</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfsd</span>
<span class="tooltipline" style="color:#ffffff"> </span>
</span>
</a>
</div>
</div>
<div class="weapon1">
<div class="item">
<a class="tooltip" href="#" onMouseover="displayToolTip('1498:0:0:0equipBack')" onMouseout="hideToolTip('1498:0:0:0equipBack')">
<img src=http://www.google.fr/intl/fr_fr/images/logo.gif alt="" width=40 height=40 class=img>
<span class="tip" id="1497:0:0:0equipBack">
<span class="tooltipheader" style="color:#9d9d9d">sdfsdf</span>
<span class="tooltipline" style="color:#ffffff">Dos</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfs</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfsd</span>
<span class="tooltipline" style="color:#ffffff"> </span>
</span>
</a>
</div>
</div>
<div class="weapon2">
<div class="item">
<a class="tooltip" href="#" onMouseover="displayToolTip('1499:0:0:0equipBack')" onMouseout="hideToolTip('1499:0:0:0equipBack')">
<img src=http://www.google.fr/intl/fr_fr/images/logo.gif alt="" width=40 height=40 class=img>
<span class="tip" id="1497:0:0:0equipBack">
<span class="tooltipheader" style="color:#9d9d9d">sdfsdf</span>
<span class="tooltipline" style="color:#ffffff">Dos</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfs</span>
<span class="tooltipline" style="color:#ffffff">sdfsdfsd</span>
<span class="tooltipline" style="color:#ffffff"> </span>
</span>
</a>
</div>
</div>
</body>
</html>
|
Message édité par Tomef le 31-01-2005 à 21:54:57
