Probleme affichage image

par **Fr4nsou3** » 20 juin 2005, 17:44

comme tu dis.
Mais bon, ça m'embetera quand même car je suppose que la majorité des gens ne vont pas faire l'update. enfin...on verra bien.
Pis si ça se trouve, ce bug sera même pas corrigé. Ce qui ne m'étonnerait meme pas...

Va savoir

par **Morbid Scythe** » 17 juin 2005, 18:29

Je viens de tester... Formidable petite bête que ce c****rd d'IE !
En mettant les CSS en externe, en rebouillant le biniou dans tous les sens rien à faire...

Patience, bientôt la toute nouvelle mouture du monstre made in billou...

par **Fr4nsou3** » 17 juin 2005, 12:03

Oui.
Si seulement tous les gens pouvaient utiliser Firefox. Ca réglerai pas mal de probleme. Mais bon, chacun fais comme il veut.

En tout cas Cyrano, et pour la 10eme fois, merci de t'être penché sur mon prob.

Laisse quand même le topic ouvert au cas ou, un jour, par miracle, quelqu'un touverai une solution

.

Bon je retourne a mon formulaire, sans aide.

Bye ](*,)

par **Cyrano** » 17 juin 2005, 11:58

Oui, effectivement, mais c'est Internet explorer qui n'interprête pas comme il faut le CSS2 à ce niveau là et traite les liste déroulante de manière particulières, j'ai souvenir que le sujet avait été abordé ici il y a quelques semaines, je ne crois pas qu'on avait trouvé de solution...

Mais sous Firefox, ça fonctionne parfaitement bien

par **Fr4nsou3** » 17 juin 2005, 11:50

Ok, merci.

Je vien de tester ton bout de code. Je comprend comment marche z-index maintenant.

Tu as rajouté un bout de formaulaire et cela passe bien par dessus.
Mais essaye d'ajouter un champ "select" et non un "text"...tu verras, cela ne fonctionne pas.

Ca commence me rendre maboule. Faire cette aide, c'était vraiment quelque chose que je voulais faire mais je crois bien qu'il n'y aucun moyen de régler ce bug

et que je vais devoir abandonner mon aide.

En tout cas, merci quand même.

par **Cyrano** » 17 juin 2005, 11:31

Tiens, voilà un bout de script que j,ai utilisé pour tout à fait autre chose, mais qui te permettra de visualiser et de comprendre le principe du z-index en CSS: j'ai ajouté un champ de formulaire pour les besoins de la cause.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Afficher Masquer des calques sans javascript</title>
<script type="text/javascript">
function affiche_details(nom)
{
	document.getElementById(nom).style.visibility='visible';
}
function cache_details(nom)
{
	document.getElementById(nom).style.visibility='hidden';
	document.getElementById(nom).style.height='100px';
}
</script>
<style type="text/css">
<!--
a.info {
position: relative;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
display: inline;
background-color: #aaa;
border : 1px solid gray;
color: #000;
margin: none;
z-index: 0;
}
a.info:hover {
background-color: #666;
color: #fff;
z-index: 1;
}
span.info{
display: none
}
a:hover span {
display: block;
position: absolute;
top: -3em;
left: 1em;
width: 15em;
border: 1px solid #000000;
color: #ffffff;
background-color: #666666;
z-index: 2;
}
-->
</style>
</head>
<body>
<p><a href="#" class="info">Menu 1 un peu plus long<span class="info">Description détaillée du menu 1<br />texte et images peuvent être placés ici</span></a><br>
<a href="#" class="info">Menu 2<span class="info">Description détaillée du menu 2<br />texte et images peuvent être placés ici avec des détails supplémentaires histoire de faire des lignes supplémentaires.</span></a><br>
<a href="#" class="info">Menu 3<span class="info">Description détaillée du menu 3<br />texte et images peuvent être placés ici</span></a></p>
<form action="" id="test" method="post">
<input type="text" name="test_txt" id="test_txt" value="">
</form>
<p>Lorem ipsum dolor sit amet, <a href="#" class="info">consectetuer adipiscing elit<span class="info">Description détaillée du menu 1<br />texte et images peuvent être placés ici</span></a>. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac <a href="#" class="info">feugiat massa lacus non elit<span class="info">Description détaillée du menu 3<br />texte et images peuvent être placés ici</span></a>. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, <a href="#" class="info">facilisis sit amet<span class="info">Description détaillée du menu 2<br />texte et images peuvent être placés ici avec des détails supplémentaires histoire de faire des lignes supplémentaires.</span></a>, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero.</p>
</body>
</html>

Pour les CSS, il y a quelques très bon sites qui ont des tutos bien faits:
Va voir alsacreation

par **Fr4nsou3** » 17 juin 2005, 09:46

Merci Cyrano. T'as as vu, je me suis inscrit

Moi je vx bien utiliser une feuille style. Mais le truc c'est que z-index, j'y connais rien du tout. C'est du CSS 2 et j'en ai jamais fait.
J'utilise que les truc de base des CSS.

Si tu pouvais m'indiquer la marche a suivre que je teste. J'ai fait quelques recherches sur Google mais y a rien qui m'explique, alors même si tu as une url, ça me conviendrais tout a fait.

Je suis bien entendu ouvert à toute proposition

donc les autres n'hésitez pas

EDIT(ouais c bien d'éditer qd mm) : Je fais des test depuis tout a l'heure mais rien y fait. Je crois qu'on peut pas définir un z-index pour un select.

par **Cyrano** » 16 juin 2005, 16:36

Pour répondre à ton problème, il faudrait utiliser un style CSS pour ton pop-up-info et la propriété z-index pour les priorité d'affichage, en numérotant les z-index du plus petit (ce qu'on affiche en arrière plan) au plus grand (ce qu'on affiche au premier plan.)

par **Cyrano** » 16 juin 2005, 16:33

Dsl du double post mais je ne peux pas edit mes messages.

Tu peux t'inscrire:
1 ça coute pas un rond;
2 Tu peux éditer tes messages;
3 Quand une réponse est postée, tu es immédiatement avrti(e) par courriel automatique;

Tout ça mis bout à bout, ça fait que à mon avis, tu devrais investir les 45 secondes nécessaires à l'inscription

par **Invité** » 16 juin 2005, 16:29

c'est ta page que tu as mis en lien?

Parce que, si c'est le cas, moi je n'ai rien de bien ni sous Firefox ni sous IE.

Il me semble pas que ca vienne d'un histoire de fond puisqu'en fait, la div apparait bien mais il n'y a pas l'image de fond. Vérifies tes chemins car j'ai remarqué qu'a un endroit tu mettais
Code : Tout sélectionner
<img src="../mh/tonimage"
et a un autre
Code : Tout sélectionner
<img src="mh/tonimage"
cela peut venir de la peut etre.

Nan ce n'est pas ma page, c'est sur cette page que j'ai pris la fonction...mais tu a raison, il n'affiche rien...la page, je l'ai enregistré sur mon disque et j'ai remofifié les chemin et ca fonctionnait.
Je l'ai enregistré pour avoir les fonctions.

par **Invité** » 16 juin 2005, 16:27

Dsl du double post mais je ne peux pas edit mes messages.

Voila en gros ce que ca donne. Ce sont des print screen. La souris passe au dessus du petit point d'interrogation et affiche l'image

Sous mozilla

Sous IE

par **robined** » 16 juin 2005, 16:24

c'est ta page que tu as mis en lien?

Parce que, si c'est le cas, moi je n'ai rien de bien ni sous Firefox ni sous IE.

Il me semble pas que ca vienne d'un histoire de fond puisqu'en fait, la div apparait bien mais il n'y a pas l'image de fond. Vérifies tes chemins car j'ai remarqué qu'a un endroit tu mettais

Code : Tout sélectionner

<img src="../mh/tonimage"

et a un autre

Code : Tout sélectionner

<img src="mh/tonimage"

cela peut venir de la peut etre.

par **Invité** » 16 juin 2005, 15:59

Voila les fonction utilisé pour afficher cette image.

Code : Tout sélectionner

if (document.layers) document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = deplacerCurseur; 
function deplacerCurseur(e) { 
    if (document.all) afficherCurseur(window.event.x, window.event.y);
    else afficherCurseur(e.pageX-200, e.pageY); 
} 

function afficherCurseur(x, y) {
	if(document.getElementById("image").style.visibility=="visible"){
		if(Nom_Browser == 'Netscape'){

	 	document.getElementById("image").style.top=(y+25)+"px";
		document.getElementById("image").style.left=(x+200)+"px";	
	}
		if(Nom_Browser == 'Microsoft Internet Explorer'){

		document.getElementById("image").style.top=(y)+"px";
		document.getElementById("image").style.left=(x)+"px";	
}
}
	else{
	 	document.getElementById("image").style.top="-500px";
		document.getElementById("image").style.left="-500px";			
	}
}

function mouseOver(image,w,h){
	document.getElementById("image").style.width=w+'px';		
	document.getElementById("image").style.height=h+'px';		
	document.getElementById("image").style.backgroundImage="url("+image+")";
	document.getElementById("image").style.visibility="visible";
	document.getElementById("image").style.display="block";			
}

function mouseOut(){
	document.getElementById("image").style.visibility="hidden";
}

Je met aussi le lien qui se base sur cette fonction.

http://clemox2.free.fr/fr/7.php

par **robined** » 16 juin 2005, 15:28

peux-tu nous montrer ta fonction? Il y a surement quelque chose a faire avec pour que cela fonctionne.

par **Fr4nsou3** » 16 juin 2005, 12:30

Voila, je suis en train de développer un formaulaire en PHP et je suis en train d'essayer de fournir de l'aide a l'utilisateur qui remplira ce formulaire.

Pour ce faire, j'ai repris une fonction en JavaScript sur un site qui lorque je passe ma souris au dessus d'un petit point d'interrogation comme ceci

fait apparaitre une image comportant une aide.

Avec Mozilla, je n'ai aucun probleme mais des que je prend IE, l'image qui apparait passe EN DESSOUS de mes champs "select", ce qui la rend illisible.

Peut on definir des arriere et des avant plan avec Javascript?

Quelqu'un aurai la solution?

Merci
François

Probleme affichage image

Répondre

Étendre la vue Revue du sujet : Probleme affichage image

Probleme affichage image