JQueryTools Overlay

TitBen

25 Oct 2009 à 12:56

Bonjour à tous,

Après des tests de la bibliothèque jQuery Tools, j'aimerai faire un overlay. Mais j'ai 2 bugs que je n'arrive pas à m'expliquer :

Voici mon code :


<html>
<head>
	<script type="text/javascript" src="js/jquery.tools.min.js"></script>
    <style type="text/css">
	div.overlay {
		width:575px;
		height:450px;		
		display:none;
	}
	</style>
	</head>

<body>
<a href="#" rel="#map">click me</a>
<div class="overlay" id="map">
<iframe width="575" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.fr/maps?f=q&amp;source=s_q&amp;hl=fr&amp;q=Cupertino,+Comt%C3%A9+de+Santa+Clara,+Californie,+%C3%89tats-Unis&amp;sll=46.75984,1.738281&amp;sspn=13.461938,17.314453&amp;ie=UTF8&amp;cd=1&amp;geocode=FfaAOQIdyu-5-A&amp;split=0&amp;hq=&amp;hnear=Cupertino,+Comt%C3%A9+de+Santa+Clara,+Californie,+%C3%89tats-Unis&amp;ll=37.342185,-122.027035&amp;spn=0.061414,0.098705&amp;z=13&amp;iwloc=A&amp;output=embed"></iframe>
</div>
<script type="text/javascript">
$(function() { 
        $("a[rel]").overlay({expose: '#000', effect: 'apple'});
});
</script>
</body>
</html>

Aperçu de la frame chez Google, où tout est OK :
upload/24463-screen-bas.jpg

Aperçu au chargement de ma page après avoir cliqué pour ouvrir l'overlay :
upload/24463-screen-no-.jpg

Là, le centrage n'est pas bon et en plus la bulle d'infos n'est pas bien stylisée (voir le screenshot suivant)
upload/24463-screen-pos.jpg

Je n'arrive pas à comprendre pourquoi ces problèmes !!
A noter qu'il s'agit d'un problème présent sur tous les navigateurs :
- Firefox 3.0.14 Mac & Windows
- IE8
Mais sur Safari 4 Mac le style de la bulle d'infos est OK, mais pas le positionnement de la map.

Si vous avez une idée ? je suis preneur....
Please.

Merci d'avance.
Modifié par TitBen (25 Oct 2009 - 12:57)