event.pageX and event.pageY not working on iframe correctley

All I want to do is to show a popup which appears when the user hovers a part of an image. I do it like this:

<!Doctype html>
<html>
<head>
<title>Wir feiern die Wirtschaft der Zukunft</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<body>
</div>
<div class="container">
<img src="strauss.png" />
<div class="popup"></div>
<p> <span>Move the mouse over the img.</span>
<span> </span>
</p>
</div>
<script>
var pageCoords,clientCoords,clientX,clientY
function cc(event){
pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
clientCoords = "( " + event.clientX / $(this).height() + ", " + event.clientY / $(this).width() + " )";
clientX = event.clientX / $(this).height();
clientY = event.clientY / $(this).width();
}
$("img").mousemove(function (event) {
cc(event);
$("span:last").text("( event.clientX, event.clientY ) : " + clientCoords);
if (clientX > 0.196 && clientX < 0.232 && clientY > 0.167 && clientY < 0.204) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html(
'<h1>«Wirtschaften in Kreisläufen»</h1><p>Forschungs- und Umweltberatungsinstitut<br><br>Lineares Denken herrscht in der Industriegesellschaft vor, schädliche Substanzen landen in der Umwelt und wertvolle Rohstoffe im Abfall. <b>EPEA Switzerland</b> hilft Unternehmen, Organisationen und Firmen bei der Implementierung des Cradle-to-Cradle®-Designs: Dank eines biologischen Kreislaufs für Verbrauchsgüter und eines technischen Kreislaufs für Gebrauchsgüter geht die Qualität der Rohstoffe über mehrere Lebenszyklen nicht verloren.</p>');
}
else if (clientX > 0.149 && clientX < 0.187 && clientY > 0.274 && clientY < 0.310) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Die Grenzen des Systems»</h1><p>Beratungs-Netzwerk<br><br>Die heutigen sozialen und ökonomischen Systeme respektieren die Grenzen der Natur nicht. Eine prosperierende Gesellschaft benötigt deshalb einen ganzheitlichen Zugang zur Nachhaltigkeit, damit sie weiss, wann sich Erfolg einstellt. <b>S2 Sustainability Strategies, The Natural Step Schweiz</b> rüstet Akteure mit dem Wissen aus, auf dem die künftige nachhaltige Gesellschaft gründet.</p>');
}
else if (clientX > 0.306 && clientX < 0.342 && clientY > 0.253 && clientY < 0.290) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Minimaler Ressourcenverbrauch, maximale Wirkung»</h1><p>Malergeschäft<br><br>Materielle Werte sind das eine, zauberhafte Stimmungen das andere. Wenn mit noch weniger Materialverbrauch noch harmonischere Fassadengestaltungen und Raumstimmungen erreicht werden können, ist das eine Bereicherung für alle. <b>Stahel + Co.</b> ist „Maler fürs Leben“ und holt bei minimalem Ressourcenverbrauch für Menschen und Natur das Maximum heraus.</p>');
}
else if (clientX > 0.248 && clientX < 0.284 && clientY > 0.371 && clientY < 0.407) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Aus den Augen – in die Verwertung»</h1><p>Ingenieurbüro für Abfalltechnologie und Energiekonzepte<br><br>Wegwerfen erleichtert und schafft Platz für Neues – da kann der Abfall getrost vergessen werden. Wichtige Rohstoffe zurückgewinnen, Energie noch besser nutzen, Produkte kreislauffähig machen: Das Nachdenken über die optimale Abfallverwertung übernimmt die <b>Rytec</b>. Sie plant umfassende und schrittweise umsetzbare Umwelttechnik. Damit Lösungen da sind, bevor Probleme akut werden.</p>');
}
else if (clientX > 0.245 && clientX < 0.282 && clientY > 0.504 && clientY < 0.542) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Wertstoff- statt Kehrichtsäcke»</h1><p>Entsorgungs- und Recyclingunternehmen<br><br>Viel zu viele Rohstoffe landen heute als Abfall in der Verbrennungsanlage. Bald wird man sich dies nicht mehr leisten können. <b>InnoRecycling</b> setzt sich dafür ein, dass die Kehrichtsäcke durch Wertstoffsäcke ersetzt werden. Die KVAs verschmelzen dann mit den Recyclern zu Rohstoffverwertungszentralen, alles wird stofflich oder thermisch verwertet.</p>');
}
else if (clientX > 0.386 && clientX < 0.422 && clientY > 0.443 && clientY < 0.480) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Geschäftsstrategien – 100% natürlich»</h1><p>Managementberatung<br><br>Will unser westliches Wirtschaftssystem langfristig überleben, muss es sowohl die menschliche Natur als auch die Natur als Ganzes in ihren Eigen- und Begrenztheiten respektieren. Die Transformationsstrategien von <b>sonntag consulting</b> nutzen Erkenntnisse aus Neurobiologie, Humanwissen¬schaften, System- und Chaostheorie, um radikale Change-Prozesse einzuleiten und zu führen.</p>');
}
else if (clientX > 0.516 && clientX < 0.551 && clientY > 0.414 && clientY < 0.451) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Komfortabel nachhaltig»</h1><p>Konzern für Spezialitätenchemie, Materialien, Agrochemie und Kunststoffe<br><br>Die wachsende Bevölkerung und der steigende Bedarf nach individueller Mobilität machen es für die Umwelt nicht einfach. Komfortabel Auto zu fahren bei weniger Emissionen ist nur mit innovativen Technologien möglich. <b>Dow</b> ist Pionier in der Entwicklung von Struktur-Klebstofflösungen für emissionsarme Leichtbaufahr-zeuge und trägt damit zu mehr Nachhaltigkeit auf der ganzen Welt bei. </p>');
}
else if (clientX > 0.521 && clientX < 0.557 && clientY > 0.531 && clientY < 0.567) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(200);
$(".popup").html('<h1>«Konsum für alle»</h1><p>Konzern für Haushaltreiniger, Körperpflegeprodukte und LebensmittelEine wachsende Mittelschicht möchte immer mehr konsumieren. Die grosse Herausforderung wird sein, diesen Konsum auf eine umweltverträgliche Art zu gewährleisten. <b>Unilever</b> will die Unternehmensgrösse verdoppeln, den Umwelteinfluss halbieren und gleichzeitig den Gesellschaftsnutzen steigern.</p>');
}
else if (clientX > 0.386 && clientX < 0.421 && clientY > 0.150 && clientY < 0.185) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Das Lebenselixier»</h1><p>Abwasserreinigungsunternehmen<br><br>Gewässerverschmutzung betrifft uns alle irgendwann. Ziel muss sein, so viele Schadstoffe wie möglich aus den Abwässern zu entfernen. Täglich reinigt die <b>ara region bern</b> 100 Mio. Liter Wasser von Industrie und Haushalten. Dank kompe-tenter, wegweisender und nachhaltiger Siedlungshygiene bleibt Wasser Lebens-elixier für Mensch, Pflanze und Tier. </p>');
}
else if (clientX > 0.436 && clientX < 0.471 && clientY > 0.058 && clientY < 0.096) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Nachhaltige Wertschöpfungsketten überall»</h1><p>Entwicklungsorganisation<br><br>Globalisierte landwirtschaftliche Märkte bergen Risiken – aber auch Chancen. Wenn für alle Güter nachhaltige Wertschöpfungsketten selbstverständlich sind, dann können auch Kleinbauern in Würde und Sicherheit leben. Projektarbeit, Beratung und Entwicklungspolitik sind die Bausteine von <b>HELVETAS Swiss Intercooperation</b> für gerechten Handel in einer gerechten Welt.</p>');
}
else if (clientX > 0.597 && clientX < 0.634 && clientY > 0.101 && clientY < 0.138) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Die Grenzen des Systems»</h1><p>Beratungs-Netzwerk<br><br>Die heutigen sozialen und ökonomischen Systeme respektieren die Grenzen der Natur nicht. Eine prosperierende Gesellschaft benötigt deshalb einen ganzheitlichen Zugang zur Nachhaltigkeit, damit sie weiss, wann sich Erfolg einstellt. <b>S2 Sustainability Strategies, The Natural Step Schweiz</b> rüstet Akteure mit dem Wissen aus, auf dem die künftige nachhaltige Gesellschaft gründet.</p>');
}
else if (clientX > 0.306 && clientX < 0.342 && clientY > 0.253 && clientY < 0.290) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Minimaler Ressourcenverbrauch, maximale Wirkung»</h1><p>Malergeschäft<br><br>Materielle Werte sind das eine, zauberhafte Stimmungen das andere. Wenn mit noch weniger Materialverbrauch noch harmonischere Fassadengestaltungen und Raumstimmungen erreicht werden können, ist das eine Bereicherung für alle. <b>Stahel + Co.</b> ist „Maler fürs Leben“ und holt bei minimalem Ressourcenverbrauch für Menschen und Natur das Maximum heraus.</p>');
}
else if (clientX > 0.248 && clientX < 0.284 && clientY > 0.371 && clientY < 0.407) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Aus den Augen – in die Verwertung»</h1><p>Ingenieurbüro für Abfalltechnologie und Energiekonzepte<br><br>Wegwerfen erleichtert und schafft Platz für Neues – da kann der Abfall getrost vergessen werden. Wichtige Rohstoffe zurückgewinnen, Energie noch besser nutzen, Produkte kreislauffähig machen: Das Nachdenken über die optimale Abfallverwertung übernimmt die <b>Rytec</b>. Sie plant umfassende und schrittweise umsetzbare Umwelttechnik. Damit Lösungen da sind, bevor Probleme akut werden.</p>');
}
else if (clientX > 0.496 && clientX < 0.532 && clientY > 0.179 && clientY < 0.215) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Herausfordernde Megatrends frühzeitig erkennen»</h1><p>Forschungs- und Beratungsbüro<br><br>Megatrends wie Bevölkerungswachstum, Globalisierung und Ressourcenknappheit verschärfen die Herausforderungen in allen Nachhaltigkeitsdimensionen. Politiker und Unternehmer brauchen möglichst frühzeitig Lösungsvorschläge. Die Planung und Forschung von <b>INFRAS</b> berücksichtigt Trends und studiert zum Beispiel das Prinzip «Nutzen statt Besitzen».</p>');
}
else if (clientX > 0.449 && clientX < 0.484 && clientY > 0.314 && clientY < 0.350) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Mobil mit Fokus auf Nachhaltigkeit»</h1><p>Anbieter von Elektrofahrzeugen und Sharing-LösungenEin attraktives Angebot an E-Bikes und E-Rollern sowie an passendem Zubehör beeinflusst unser Mobilitätsverhalten aktiv. Komplettiert durch Dienstleistungen im Bereich Ladeinfrastruktur für Elektrofahrzeuge und durch eine neue Sharing-Plattform fördert <b>m-way</b> die bedarfsgerechte Mobilitätslösung für Privat- und Firmenkunden. Damit wird der Energieverbrauch nachhaltig reduziert. </p>');
}
else if (clientX > 0.602 && clientX < 0.637 && clientY > 0.252 && clientY < 0.289) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Ökologischer Fahrstil für die Energiewende»</h1><p>Reise- und TransportfirmaWeg vom Atomstrom, hin zur Energieeffizienz. Schweizer Züge sind schon heute hauptsächlich mit Strom aus Wasserkraft unterwegs. Weil «fast ganz» nicht genug ist, senken die <b>SBB</b> ihren Energiebedarf um 20%. Effiziente Energienutzung ist der Schlüssel zur Vervollständigung des Plans, zum Beispiel mittels «Eco-Drive», der energiesparenden Fahrweise für Lokführer.</p>');
}
else if (clientX > 0.602 && clientX < 0.637 && clientY > 0.342 && clientY < 0.377) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Nachhaltigkeit richtig verstehen»</h1><p>Übersetzungsbüro<br><br>Sprachübergreifende Verständigung zu Themen der Nachhaltigkeit setzt nicht nur Fachwissen, sondern auch viel Weltwissen voraus. Als Übersetzungsunternehmen hat sich <b>Zieltext</b> auf nachhaltige Entwicklung spezialisiert. Nur wenn Sachverhalte auch in der Übersetzung korrekt eingeordnet und gewichtet werden, gelingt Verständigung über die Sprachgrenzen hinweg.</p>');
}
else if (clientX > 0.177 && clientX < 0.212 && clientY > 0.426 && clientY < 0.461) {
$("img").css( 'cursor', 'url(oeq.png),url(oeq.png),help' );
$(".popup").css('visibility','visible').stop().hide().fadeIn(0);
$(".popup").html('<h1>«Intelligente Infrastruktur für nachhaltige Städte»</h1><p>Energie- und InfrastrukturkonzernUnsere Zukunft wird von Megatrends bestimmt. Ohne intelligente Infrastruktur-lösungen ist nachhaltige Entwicklung nicht möglich. Das Umweltportfolio von <b>Siemens</b> ist die Antwort auf Urbanisierung, Globalisierung, Demographischer Wandel sowie Klimawandel – zum Beispiel mit integrierten Mobilitätslösungen und intelligenter Gebäudetechnik für nachhaltige Grossstädte.</p>');
}
else {
$("img").css( 'cursor', 'auto' );
$(".popup").fadeOut("slow");
}
});
</script>
</body>
</html>

Basically this works perfect. The problem is, this HTML file is getting used as iframe and then the coordinates will no longer be the same. This is how it looks like when using iframe. I need exactly the same position.

I appreciate any help!!

Topic Participants
r.saadati85
jakecigar

event.pageX and event.pageY not working on iframe correctley

event.pageX and event.pageY not working on iframe correctley

Topic Participants

r.saadati85

jakecigar