Slideshow javascript tronqué sous IE7

Résolu/Fermé

windsurfer00 Messages postés 16 Date d'inscription jeudi 29 novembre 2007 Statut Membre Dernière intervention 7 septembre 2009 - 18 juin 2009 à 17:29
windsurfer00 Messages postés 16 Date d'inscription jeudi 29 novembre 2007 Statut Membre Dernière intervention 7 septembre 2009 - 19 juin 2009 à 09:35

Bonjour,

mon slideshow javascript ci-dessous est partiellement invisible sous IE 7. C'est comme si'l était caché par une div et qu'on voyait que ce qui dépasse. J'ai bien essayé de bidouiller avec les z-index mais rien n'y fait il reste planqué... voilà si vous pouvez me dire une éventuelle erreur...

HTML:

<!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">
<head>
<title>Design_comcom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style/css_comcom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/javascript">

</script>
<script language="javascript" type="text/javascript">

function Initialisation(image)
{
document.getElementById("Table_01").style.backgroundImage = image;
}

function setDivImage(image)
{
document.getElementById("Table_01").style.backgroundImage = image;
}
function resetDivImage()
{
document.getElementById("Table_01").style.backgroundImage = "url(images/carte.jpg)";
}

function Highlight(id)
{
document.getElementById(id).style.fontWeight = bold;
document.getElementById(id).style.color = '#f2a961';
}

preload_image('images/carte_izotges.jpg');
preload_image('images/carte_tasque.jpg');
preload_image('images/carte_gaillac.jpg');
preload_image('images/carte_plaisance.jpg');
preload_image('images/carte_prechac.jpg');
preload_image('images/carte_ju.jpg');
preload_image('images/carte_tieste.jpg');
preload_image('images/carte_ladeveze_ville.jpg');
preload_image('images/carte_armentieux.jpg');
preload_image('images/carte_ladeveze_riviere.jpg');
preload_image('images/carte_juillac.jpg');
preload_image('images/carte_tourdun.jpg');
preload_image('images/carte_sieurac.jpg');
preload_image('images/carte_marciac.jpg');
preload_image('images/carte_laveraet.jpg');
preload_image('images/carte_st_justin.jpg');
preload_image('images/carte_ricourtjpg');
preload_image('images/carte_monlezun.jpg');
preload_image('images/carte_pallane.jpg');
preload_image('images/carte_tillac.jpg');
preload_image('images/carte_monpardiac.jpg');
preload_image('images/carte_semboues.jpg');
preload_image('images/carte_cazaux.jpg');
preload_image('images/carte_blousson.jpg');
preload_image('images/carte_troncens.jpg');

</script>
<link href="style/map.css" rel="stylesheet" type="text/css" />
</head>

<body onload="Initialisation('url(images/carte.jpg)')">
<div id="container">
<div id="header"></div>
<div id="diapo">
<img src="images/activites.jpg" alt="" width="810" height="200" class="active" />
<img src="images/architecture.jpg" alt="" width="810" height="200"/>
<img src="images/art.jpg" alt="" width="810" height="200" />
<img src="images/cerise.jpg" alt="" width="810" height="200" />
<img src="images/cuisine.jpg" alt="" width="810" height="200" />
<img src="images/eau.jpg" alt="" width="810" height="200" />
<img src="images/eglise.jpg" alt="" width="810" height="200" />
<img src="images/evenements.jpg" alt="" width="810" height="200" />
<img src="images/logements.jpg" alt="" width="810" height="200" />
<img src="images/tauromachie.jpg" alt="" width="810" height="200" />
<img src="images/villages.jpg" alt="" width="810" height="200" />
</div>
<div id="mainContent">
<div id="menu">

</div>
<div id="contenu">
<div class="cornerBox">
<div class="corner TL"></div>
<div class="corner TR"></div>
<div class="corner BL"></div>
<div class="corner BR"></div>
<div class="cornerBoxInner">
<table>
<tr>
<td width="177">
<div id="liste_map">
<ul>
<li><a href="#" id="izotges" onmouseover ="setDivImage('url(images/carte_izotges.jpg)')" onmouseout="resetDivImage()">Izotges</a></li>
<li><a href="#" id="tasque" onmouseover ="setDivImage('url(images/carte_tasque.jpg)')" onmouseout="resetDivImage()">Tasque</a></li>
<li><a href="#" id="gaillac" onmouseover ="setDivImage('url(images/carte_gaillac.jpg)')" onmouseout="resetDivImage()">Gaillac</a></li>
<li><a href="#" id="plaisance" onmouseover ="setDivImage('url(images/carte_plaisance.jpg)')" onmouseout="resetDivImage()">Plaisance</a></li>
<li><a href="#" id="prechac" onmouseover ="setDivImage('url(images/carte_prechac.jpg)')" onmouseout="resetDivImage()">Prechac</a></li>
<li><a href="#" id="ju" onmouseover ="setDivImage('url(images/carte_ju.jpg)')" onmouseout="resetDivImage()">Jû-Belloc</a></li>
<li><a href="#" id="tieste" onmouseover ="setDivImage('url(images/carte_tieste.jpg)')" onmouseout="resetDivImage()">Tieste</a></li>
<li><a href="#" id="ladeveze_riviere" onmouseover ="setDivImage('url(images/carte_ladeveze_riviere.jpg)')" onmouseout="resetDivImage()">Ladevèze-rivièe</a></li>
<li><a href="#" id="sieurac" onmouseover ="setDivImage('url(images/carte_sieurac.jpg)')" onmouseout="resetDivImage()">Sieurac</a></li>
<li><a href="#" id="ladeveze_ville" onmouseover ="setDivImage('url(images/carte_ladeveze_ville.jpg)')" onmouseout="resetDivImage()">Ladevèze-ville</a></li>
<li><a href="#" id="juillac" onmouseover ="setDivImage('url(images/carte_juillac.jpg)')" onmouseout="resetDivImage()">Juillac</a></li>
<li><a href="#" id="tourdun" onmouseover ="setDivImage('url(images/carte_tourdun.jpg)')" onmouseout="resetDivImage()">Tourdun</a></li>
<li><a href="#" id="marciac" onmouseover ="setDivImage('url(images/carte_marciac.jpg)')" onmouseout="resetDivImage()">Marciac</a></li>
<li><a href="#" id="laveraet" onmouseover ="setDivImage('url(images/carte_laveraet.jpg)')" onmouseout="resetDivImage()">Laveraët</a></li>
<li><a href="#" id="armentieux" onmouseover ="setDivImage('url(images/carte_armentieux.jpg)')" onmouseout="resetDivImage()">Armentieux</a></li>
<li></li>
<li><a href="#" id="pallane" onmouseover ="setDivImage('url(images/carte_pallane.jpg)')" onmouseout="resetDivImage()">Pallane</a></li>
<li><a href="#" id="monlezun" onmouseover ="setDivImage('url(images/carte_monlezun.jpg)')" onmouseout="resetDivImage()">Monlezun</a></li>
<li><a href="#" id="st_justin" onmouseover ="setDivImage('url(images/carte_st_justin.jpg)')" onmouseout="resetDivImage()">Saint-Justin</a></li>
<li><a href="#" id="ricourt" onmouseover ="setDivImage('url(images/carte_ricourt.jpg)')" onmouseout="resetDivImage()">Ricourt</a></li>
<li><a href="#" id="tillac" onmouseover ="setDivImage('url(images/carte_tillac.jpg)')" onmouseout="resetDivImage()">Tillac</a></li>
<li><a href="#" id="semboues" onmouseover ="setDivImage('url(images/carte_semboues.jpg)')" onmouseout="resetDivImage()">Sembouès</a></li>
<li><a href="#" id="blousson" onmouseover ="setDivImage('url(images/carte_blousson.jpg)')" onmouseout="resetDivImage()">Blousson</a></li>
<li><a href="#" id="monpardiac" onmouseover ="setDivImage('url(images/carte_monpardiac.jpg)')" onmouseout="resetDivImage()">Monpardiac</a></li>
<li><a href="#" id="cazaux" onmouseover ="setDivImage('url(images/carte_cazaux.jpg)')" onmouseout="resetDivImage()">Cazaux</a></li>
<li><a href="#" id="troncens" onmouseover ="setDivImage('url(images/carte_troncens.jpg)')" onmouseout="resetDivImage()">Troncens</a>
</li>
</ul>
</div>
</td>
<td width="333"><div id="Table_01">
<div id="carte-03_" onmouseover ="setDivImage('url(images/carte_izotges.jpg)');Highlight('izotges')" onmouseout="resetDivImage()" onclick="location.href='#'"></div>
<div id="carte-06_" onmouseover ="setDivImage('url(images/carte_tasque.jpg)')" onmouseout="resetDivImage()" ></div>
<div id="carte-09_" onmouseover ="setDivImage('url(images/carte_gaillac.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-12_" onmouseover ="setDivImage('url(images/carte_plaisance.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-15_" onmouseover ="setDivImage('url(images/carte_prechac.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-18_" onmouseover ="setDivImage('url(images/carte_ju.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-21_" onmouseover ="setDivImage('url(images/carte_tieste.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-23_" onmouseover ="setDivImage('url(images/carte_ladeveze_riviere.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-25_" onmouseover ="setDivImage('url(images/carte_sieurac.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-27_" onmouseover ="setDivImage('url(images/carte_ladeveze_ville.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-29_" onmouseover ="setDivImage('url(images/carte_juillac.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-31_" onmouseover ="setDivImage('url(images/carte_tourdun.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-33_" onmouseover ="setDivImage('url(images/carte_marciac.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-34_" onmouseover ="setDivImage('url(images/carte_laveraet.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-38_" onmouseover ="setDivImage('url(images/carte_armentieux.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-39_" onmouseover ="setDivImage('url(images/carte_marciac.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-42_" onmouseover ="setDivImage('url(images/carte_pallane.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-45_" onmouseover ="setDivImage('url(images/carte_monlezun.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-46_" onmouseover ="setDivImage('url(images/carte_st_justin.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-49_" onmouseover ="setDivImage('url(images/carte_ricourt.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-51_" onmouseover ="setDivImage('url(images/carte_tillac.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-54_" onmouseover ="setDivImage('url(images/carte_troncens.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-56_" onmouseover ="setDivImage('url(images/carte_semboues.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-57_" onmouseover ="setDivImage('url(images/carte_blousson.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-58_" onmouseover ="setDivImage('url(images/carte_monpardiac.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-61_" onmouseover ="setDivImage('url(images/carte_cazaux.jpg)')" onmouseout="resetDivImage()"></div>
<div id="carte-54_" onmouseover ="setDivImage('url(images/carte_troncens.jpg)')" onmouseout="resetDivImage()"></div>
</div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<p align="center">Mentions légales - Copyright Communauté de communes des vallons du Gers</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:#FFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}

/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
#container {
width:900px;
height:auto;
background:#4e8432;;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}

#header {
height:184px;
background-image:url(../images/header.jpg);
}

#boutons_langue{
position:absolute;
width:auto;
height:auto;
}

#diapo{
position:absolute;
width:810px;
height:auto;
left: 52px;
top: -23px;
}

#diapo IMG {
position:absolute;
top:203px;
left:113px;
z-index:8;
}

#diapo IMG.active {
z-index:10;
}

#diapo IMG.last-active {
z-index:9;
}

#mainContent {
position:relative;
background-image:url(../images/main_repeat.jpg);
background-repeat:repeat-y;
height:auto;
padding-left: 233px;
padding-top: 210px;
}

#left {
float:left;
background-image:url(../images/left.jpg);
background-repeat:repeat-y;
width:39px;
}

#right {
float:right;
width:39px;
background-image:url(../images/right.jpg);
background-repeat:repeat-y;
}

#menu {
position:absolute;
width:171px;
height:402px;
background-image:url(../images/menu.jpg);
left: 45px;
top: 195px;
}

#contenu {
width:629px;
top:180px;
}

#footer {
position:absolute;
width:900px;
height:60px;
background-image:url(../images/footer.jpg);
}

/*Cadre arrondi*/
.cornerBox {
position: relative;
width: auto;
background-color:#ffffff;
}
.corner {
position: absolute;
width: 10px;
height: 10px;
background:url(../images/coin.jpg) no-repeat;
font-size: 0%;
}
.cornerBoxInner {
padding: 10px;
}
.TL {
top: 0;
left: 0;
background-position: 0 0;
}
.TR {
top: 0;
right: 0;
background-position: -10px 0;
}
.BL {
bottom:0;
left:0;
background-position: 0 -10px;
}
.BR {
bottom: 0px;
right: 0px;
background-position: -10px -10px;
}

Merci à vous !

A voir également:

Slideshow javascript tronqué sous IE7
Telecharger javascript - Télécharger - Langages
Thundersoft free slideshow maker - Télécharger - Visionnage & Diaporama
Slideshow creator - Télécharger - Visionnage & Diaporama
Movavi slideshow maker gratuit - Télécharger - Visionnage & Diaporama
Javascript echo ✓ - Forum PHP

1 réponse

Réponse 1 / 1

windsurfer00 Messages postés 16 Date d'inscription jeudi 29 novembre 2007 Statut Membre Dernière intervention 7 septembre 2009
19 juin 2009 à 09:35

Problème résolu, il s'agissait d'une erreur dans mon CSS où la fonction z-index ne prend pas d'unités. Ici, j'avais mis de pixels en unité.

Voilà ça pourra peut-être servir à quelqu'un !

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

javascript:void(0);

java activée mais ne fonctionne pas !

Nodejs.exe est-ce un virus