Discussion :

[Danou12]

Bonjour à tous, je suis nouveau sur le forum spécialement inscrit afin de trouver une solution à mon problème en espérant y arriver
Donc :
voici un screenshots de ma page (nécessaire à la compréhension).



voici la page principale avec le menu. En cliquant sur Maths on fait glisser une iframe contenant ma page html en source.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<iframe src="ListeFiche.htm" height="100%" width="100%"></iframe >

Jusque là aucun soucis.
Lorsque je passe la souris sur une des images le pdf contenu s'agrandis et suis la souris tant que je suis dans l'image pour celà aucun soucis non plus.



Alors voilà le problème. Lorsque la souris passe lentement sur une image au moment ou je passe dessus mon iframe contenant ma page ListeFiche.htm (donc ma page principale de Maths) disparaît 1/4 de seconde avant de revenir. Ça donne un effet de clignotement c'est très désagréable.
Je ne connais que très peu les Iframes donc je n'ai aucune idée de la source du problème. Est-ce du à une surcharge (possible?), ou à mon code qui n'est pas bon (inspirer d'internet)

Code :

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
 
function montre(imgUrl) {
// Lorsque je survole l'image
document.getElementById("div_zoom_image").style.vi sibility = "visible";
document.getElementById("img_zoom_image").src = imgUrl;
document.onmousemove = moveImage;
}
 
function cache() {
// Lorsque je quitte l'image
document.getElementById("div_zoom_image").style.vi sibility = "hidden";
document.getElementById("img_zoom_image").src = "";
document.onmousemove = "";
}
 
function moveImage(event) {
// permet à l'image de suivre lorsque la souris bouge dans l'image
// position
var x = event.pageX - 780;
var y = event.pageY - 20;
// placement
document.getElementById("div_zoom_image").style.le ft = x + "px";
document.getElementById("div_zoom_image").style.to p = y + "px";
}

Div_Zoom_image est la div contenant l'iframe zoomer et img_zoom_image est l'iframe en question.

EDIT :

Je viens de remarquer que : Lorsque je clique sur un des cadres celui-ci s'agrandit pour offrir un aperçu et lorsque l'un est ouvert le problème disparaît et l'iframe principale ne saute plus... pourtant le seul effet du clique est de modifier la class du cadre


Un grand merci à vous d'avance ! En espérant que mon problème est compréhensible et que toute les infos sont présentes

[Watilin]

Salut,

je n'ai jamais vu une iframe scintiller à cause d'un simple mouseover sur une image.
Tu parles de pdf à un moment. Le pdf est-il chargé dans la même iframe ? Par quel moyen est-il affiché ? Est-ce par un plugin du navigateur ?

[Danou12]

Le tout est créer dynamiquement lors de la réponse de ma Servlet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var rfew = $('#page_content');		
$.each(data, function(PrivateKey, value) {
	var $row = $('<div class="bloc masonry-brick '+ value.Theme +'" style="position: absolute; top: 0px; left: 0px;"><a class="thumb" href=""><img onclick="'+ "montre('"+value.Url+"');"+ '" width="90" height="90" src="./icone/maths.ico" ><p> '+ value.Nom +'</p></a><div class="info"><div class="content_info"><span class="title_info">'+ value.Nom+'</span><a target="_parent" href=""><div class="bouton_role">Voir</div></a><a target="_parent" href=""><div class="bouton_role">Telecharger</div></a></div></div></div>');
	rfew.append($row);
});

Tout ces divs (une par réponse) ce situes dans une page html afficher dans une iframe dans la page principale.

Je met simplement l'url du PDF en paramètre de la fonction "montre" dans l'event "onclick", pdf situé sur mon pc qui me sert de serveur pour les tests

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function montre(imgUrl) {
	document.getElementById('imageTaille').src=imgUrl;
 }

Et ceci pour l'affichage. Si vous avez une meilleur idée ou si la mienne est mauvaise je suis preneur évidemment ^^
Je n'utilise aucun plugins.

[Danou12]

Désolé d'avance pour le double post mais j'ai résolu partiellement mon problème.

J'ai simplement remplacer l'évent onmouseover par "onclick" et déplacer celui-ci sur la div qui contient tout.
Le problème disparaît mais il faut maintenant cliquer mais je m'en contenterais pour le moment ^^

Merci tout de même.