new!
|
|
|
 |
| > zIndex très capricieux |
[ Posté par Minimus ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 26-04-2008 à 22:31 | 50 messages ]
|
Bonsoir tout le monde!
Après une longue époque morte en développement HTML, je reviens avec de nouveaux problèmes...
Ma copine m'a demandé de développer une page web pour son td, ce que j'ai fait à l'exception d'une fonction de son cahier des charges, que je ne maîtrise pas du tout. Je me suis aidé de SelfHTML 8.12, sans résultat.
Mon problème : Impossible de faire passer les images moyennes (lors du mouseover) au dessus des autres voisines dans le bandeau d'images.
Mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>TD2 Exercice1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {margin:0;padding:0}
body {margin-left:20px;}
#bandeauImages {
width:500px;
height:100px;
}
#divImages {
width:420px;
padding-left:20px;
height:85px;
overflow:hidden;
}
#divImages div {
width:80px;
position:relative;
top:20px;
left:0px;
z-index:1;
margin-bottom:30px;
}
#bandeauImages div {float:left;}
#arriere,#avant {position:relative; top:30px;}
</style>
<script language="javascript">
function DecallageGauche() {
image = new Array(7); // Création d'un tableau comprenant 7 variables
numero = new Array(7); // Idem
for(a=1;a<=7;a++) { // Boucle de 7 sauts
image[a] = document.getElementById("image" + a).src; // Exemple: image[3] = "file:///C:/SITES/td2/Mael/ikea/image3.png"
} // Fin de la boucle
for(a=1;a<=7;a++) { // Boucle de 7 sauts
numero[a] = parseInt(image[a].split("ikea/image")[1].split(".png")[0]) + 1; // Extraction des numéros d'images dans le tableau image, et soustraction de 1 à cette valeur.
if (numero[a]>= numero[a] = 1; // On force les variables du tableau numero à ne pas dépasser 7. Si la valeur est supérieure à 7, on la remet à 1 pour effectuer une 'boucle d'images' sur le bandeau.
/*
Note:
split() est expliqué plus bas.
parseInt() transforme une chaîne de caractères en nombre entier. Cette fonction est ici obligatoire car les variables du tableau image sont des
chaîne de caractères (Ex: "file:///C:/SITES/td2/Mael/ikea/image3.png"), et les variables du tableau numero doivent être des entiers
compris entre 1 et 7 (1 et 7 inclus), (d'où la présence de la fonction si).
En termes de Java, cette fonction permettrait de transformer une chaîne de caractères (string) en entier (int) par exemple:
"3" en 3. L'obligation de la présence de cette fonction est dûe au fait qu'on doit par la suite additionner 1 aux valeurs du tableau numero.
Sans parseInt(), la ligne de commande "image[a].split("ikea/image")[1].split(".png")[0] + 1" effecturait une concaténation de 2 chaîne des caractères,
par exemple l'opération suivante : "3" + 1 et donnerait "3" & "1", soit "31" et non pas 4.
En déclarant avant les valeurs du tableau numero en tant que nombres entiers avec parseInt(), l'opération effectue une addition par exemple 3 + 1, soit 4.
*/
document.getElementById("image" + a).src = ("ikea/image" + numero[a] + ".png") // Changement de l'URL des images.
}
}
function DecallageDroite() { // Même fonction que DecallageGauche() mais on décrémente les numéros des images.
image = new Array(7);
numero = new Array(7);
for(a=1;a<=7;a++) {
image[a] = document.getElementById("image" + a).src;
}
for(a=1;a<=7;a++) {
numero[a] = parseInt(image[a].split("ikea/image")[1].split(".png")[0]) - 1; // On effectue une soustraction de 1 au lieu d'une addition de 1.
if (numero[a]<=0) numero[a] = 7; // On force les variables du tableau numero à ne pas aller en dessous de 1. Si la valeur est inférieure à 1, on la remet à 7 pour effectuer une 'boucle d'images' sur le bandeau.
document.getElementById("image" + a).src = ("ikea/image" + numero[a] + ".png")
}
}
function Cliquer(img) {
var Numero=img.src.split("ikea/image")[1].split("Moyen.png")[0];
/*
Explications :
Split() Scinde des chaînes de caractères en plusieurs chaînes de caractères partielles.
Les chaînes de caractères crées sont sauvegardées dans un tableau (qui commence à [0] pour la partie 1).
Attend comme paramètre un caractère délimiteur ou une chaîne de caractères délimiteurs utilisés
comme séparation distinctive entre les chaînes de caractères partielles.
img, passé en variable dans la fonction, correspond à "this" (dans la partie HTML) et désigne donc l'objet <img>...</img> dont il est question.
img.src désigne la source de l'image.
Exemple: Pour l'image 1, son URL en local ici est: "file:///C:/SITES/td2/Mael/ikea/image1Moyen.png". (Moyen car quand on clique dessus, on a déjà
obligatoirement effecté le rollover qui a transformée l'URL de l'image)
La commande img.src.split("ikea/image") va couper l'URL en plusieurs parties, séparées par la chaîne de caractères "ikea/image", or cette occurence
n'est présente qu'une seule fois. Donc il va ressortir de cette commande 2 variables enregistrées dans un tableau:
variable[0]="file:///C:/SITES/td2/Mael/"
variable[1]="1Moyen.png"
La ligne de commande entière est img.src.split("ikea/image")[1].split("Moyen.png")[0]
Il reste à expliquer [1].split("Moyen.png")[0]
le [1] va sélectionner la seconde valeur du tableau c'est à dire "1.png" et split("Moyen.png") va scinder cette nouvelle chaîne en recherchant l'occurence
"Moyen.png" qui n'apparaît qu'une fois. Ainsi la première valeur de la variable est: variable[0]="1".
Donc cette commande permet simplement d'extraire le numéro de l'image sur laquelle on clique.
Remarque:
Nous avons dit que pour l'image 1, son URL en local ici est: "file:///C:/SITES/td2/Mael/ikea/image1Moyen.png".
Pour l'image 1, son URL relative est : "ikea/image1Moyen.png". (relative == du "point de vue" du fichier actuel.)
Et si cette page était distribuée, son URL hypertext serait de la forme : http://mon-site.com/dossier/td2/ikea/image1Moyen.png"
Donc dans les 3 cas, les deux chaîne de caractères "ikea/image" et ".png" sont présentes, et permettont donc au script de fonctionner correctement.
*/
document.getElementById("imgProduit").src=("ikea/image" + Numero + "Grand.png"); // La source de l'image du grand cadre va être modifée selon le numéro de l'image sur laquelle on a cliqué.
}
function MouseOver(img) {
img.style.border = "1px solid red"; // Création d'une bordure rouge
var Numero = img.src.split("ikea/image")[1].split(".png")[0]; // Extraction du numéro de l'image
img.src = ('ikea/image' + Numero + 'Moyen.png'); // Réatribution de l'URL de l'image de ikea/imageX.png en ikea/imageXMoyen.png
img.style.zindex = "5"; // Mise au premier plan (devant l'image mitoyenne)
}
function MouseOut(img) {
img.style.border = "1px solid white"; // Modification de la bordure en blanc
var Numero = img.src.split("ikea/image")[1].split("Moyen.png")[0]; // Extraction du numéro de l'image
img.src = ('ikea/image' + Numero + '.png'); // Réatribution de l'URL de l'image de ikea/imageXMoyen.png en ikea/imageX.png
img.style.zindex = "1"; // Mise au plan normal
}
</script>
</head>
<body bgcolor="lightblue">
<div id="bandeauImages">
<div>
<img src="ikea/arriere.png" id="arriere" alt="aller en arriere" onClick="DecallageDroite()"></img>
</div>
<div id="divImages">
<div id="ImageBandeau">
<img src="ikea/image1.png" id="image1" alt="image1" Name="image1" onClick="Cliquer(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)"></img>
</div>
<div>
<img src="ikea/image2.png" id="image2" alt="image2" Name="image2" onClick="Cliquer(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)"></img>
</div>
<div>
<img src="ikea/image3.png" id="image3" alt="image3" Name="image3" onClick="Cliquer(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)"></img>
</div>
<div>
<img src="ikea/image4.png" id="image4" alt="image4" Name="image4" onClick="Cliquer(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)"></img>
</div>
<div>
<img src="ikea/image5.png" id="image5" alt="image5" Name="image5" onClick="Cliquer(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)"></img>
</div>
<div>
<img src="ikea/image6.png" id="image6" alt="image6" Name="image6" onClick="Cliquer(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)"></img>
</div>
<div>
<img src="ikea/image7.png" id="image7" alt="image7" Name="image7" onClick="Cliquer(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)"></img>
</div>
</div>
<div>
<img src="ikea/avant.png" alt="aller en avant" id="avant" onClick="DecallageGauche()"></img>
</div>
</div>
<div>
<img src="ikea/image1Grand.png" alt="produit" id="imgProduit"></img>
</div>
</body>
</html>
|
|
Merci d'avance pour votre aide précieuse, j'aimerais bien résoudre le problème avant dimanche soir...
________________
En essayant continuellement, on finit par réussir. Donc plus ça rate, plus on a de chances que ça marche !!
__________________________
http://perso.orange.fr/mael.le-monnier/
|
|
|
[ Posté par #:-{)% ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 27-04-2008 à 04:20 | 2322 messages ]
Alut
çà serait pas style.zIndex avec I maj par hasard
sinon 1 lien en angliche spécial IE
Atchao
EDIT pis j'suis pas sur qui faut mettre des "" autour des nbres ==> essaies machin.style.zIndex=5; par ex.
[Message édité par #:-{)% le 27-04-2008 à 04:25]
________________
Oubli du BBcode, rééditer!
barbe-sauvage ex Mozopiens devenu renard de feu... et un peu konq sur les bords
Les OG et les DR, je M pas :/
| [ Posté par Minimus ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 27-04-2008 à 16:38 | 50 messages ]
Bonjour!
#:-{)%, merci pour ta contribution 
Malheureusement, ça ne m'a pas aidé, j'ai tenté avec le I majuscule, avec et sans espaces entre le = et la valeur, avec et sans guillemets pour la valeur... rien à faire.
Et sur le lien que tu m'as donné, les méthodes qu'ils emploient sont celles que j'ai déjà testé... rien à y faire... que ça soit sous FFox2 ou sous IE7...
J'avais tenté de contourner le problème en utilisant une méthode alternative (style.visibility = "visible" ou "hidden") mais ça ne fonctionne pas non plus...
PS: Pourquoi sous IE7, les 2 images 6 et 7 s'affichent quand même en dessous du bandeau n'importe comment?? Alors que j'ai tout de même défini la hauteur du bandeau d'images en CSS...
________________
En essayant continuellement, on finit par réussir. Donc plus ça rate, plus on a de chances que ça marche !!
__________________________
http://perso.orange.fr/mael.le-monnier/
| [ Posté par #:-{)% ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 27-04-2008 à 19:25 | 2322 messages ]
je viens de voir que tu avais 1 doctype strict, supprimes-le, il serait étonnant que le script soit strictement compatible strict 
________________
Oubli du BBcode, rééditer!
barbe-sauvage ex Mozopiens devenu renard de feu... et un peu konq sur les bords
Les OG et les DR, je M pas :/
| [ Posté par Minimus ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 27-04-2008 à 20:58 | 50 messages ]
Tu parles de cette ligne là :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ?
Je l'ai donc virée, mais pas de changements.
Je ne vois toujours pas bien l'utilité de ce genre de lignes au sein d'une page, on m'avait déjà répondu sur ce forum, mais j'ai du mal à réaliser qu'un navigateur fasse vraiment la différence...
[Message édité par Minimus le 27-04-2008 à 21:09]
________________
En essayant continuellement, on finit par réussir. Donc plus ça rate, plus on a de chances que ça marche !!
__________________________
http://perso.orange.fr/mael.le-monnier/
| [ Posté par EricM ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 29-04-2008 à 09:30 | 4139 messages ]
Minimus a dit
Je ne vois toujours pas bien l'utilité de ce genre de lignes au sein d'une page, on m'avait déjà répondu sur ce forum, mais j'ai du mal à réaliser qu'un navigateur fasse vraiment la différence... |
|
Ouhlà !
De grosses différence, si 
Sinon, le zindex ne s'applique qu'au position:absolute, me semble-t-il ...
A+
________________
L'échec est le fondement de la réussite.
- Lao Tseu -
| [ Posté par jparia ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 29-04-2008 à 20:51 | 513 messages ]
Minimus a dit
Je ne vois toujours pas bien l'utilité de ce genre de lignes au sein d'une page, on m'avait déjà répondu sur ce forum, mais j'ai du mal à réaliser qu'un navigateur fasse vraiment la différence... |
|
t'inquiète, pour les quéqués de la norme W3C qui se font plaisir à te prouver que tu as toujours tord.
A part cela, si tes pages s'affichent identiquement sous FF, IE et Safari et qu'il n'y a aucune alerte globale, ça suffit largement, c'est pas l'internaute qui va s'en plaindre.
;)
________________
Seule la compréhension permet d'avancer.
Ah! et puis on a pas toujours raison, mais un p'tit merci nous fait toujours du bien.
| [ Posté par v1nce ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 30-04-2008 à 09:16 | 3782 messages ]
jparia a dit
A part cela, si tes pages s'affichent identiquement sous FF, IE et Safari et qu'il n'y a aucune alerte globale |
|
Le doctype a une influence directe sur la manière dont IE rend les pages (boxmodel...). Son utilisation simplifie donc le travail du développeur qui a moins à se soucier des extravagances d'IE
________________
V1nce
Si je les ai oubliés les bonjour, merci et au revoir sont implicites
Brevets logiciels : dites NON !
http://petition.eurolinux.org/index.html
http://swpat.ffii.org/index.fr.html
| [ Posté par Minimus ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 02-05-2008 à 22:10 | 50 messages ]
Merci pour vos précisions
Je n'ai toujours pas réussi à faire le zindex...
Il n'y aurait pas moyen de tranformer mon position:relative en position:absolute pour faire fonctionner le zindex?
Merci encore et d'avance,
Minimus
________________
En essayant continuellement, on finit par réussir. Donc plus ça rate, plus on a de chances que ça marche !!
__________________________
http://perso.orange.fr/mael.le-monnier/
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
