mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 07:47 Benutzername: Passwort: Auto-Login

Thema: Fancybox und Imagemap vom 14.03.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Fancybox und Imagemap
Seite: 1, 2, 3, 4  Weiter
Autor Nachricht
Morpheus1968
Threadersteller

Dabei seit: 04.03.2010
Ort: Paderborn
Alter: 56
Geschlecht: Männlich
Verfasst Mi 14.03.2012 11:55
Titel

Fancybox und Imagemap

Antworten mit Zitat Zum Seitenanfang

ich versuche seit tagen Fancybox und Imagemap zu vereinen .. es soll .. eine Europakarte .. mit Mouse over und Mouse out ... gestaltet werden ...

Das habe ich bereits .............

Dann sollen einzelnen Länder mit click ... und fancybox angezeigt werden ....

bei einer andere Seite habe ich es mit Lightbox .. sauber hinbekommen ..

aber bei diesem Projekt muss ich mit fancybox arbeiten .. aber es klappt nicht ..

Kann evtl. jemand Helfen ??
  View user's profile Private Nachricht senden
immerIch

Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht: Männlich
Verfasst Mi 14.03.2012 12:08
Titel

Antworten mit Zitat Zum Seitenanfang

Nunja, du musst halt erstmal den Click-Handler setzen und danach Fancybox aufrufen:

Code:

$('area').on("click",function(){

$.fancybox({...Parameter...});

});
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Morpheus1968
Threadersteller

Dabei seit: 04.03.2010
Ort: Paderborn
Alter: 56
Geschlecht: Männlich
Verfasst Mi 14.03.2012 12:12
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
 <area shape="poly" coords="454,275,475,273,476,265,426,271,419,286,436,305,459,322,466,306,468,300,453,290" alt="" title="Greece"  onmouseover="imgchg('eumap','../css/images/map/bg-map-greece.jpg')" onmouseout="imgchg('eumap','../css/images/map/bg-map.jpg')" href="#" onclick=(href="../css/images/map/greece.jpg", rel="pagidas")/>
 


habe ich gesetzt
  View user's profile Private Nachricht senden
Morpheus1968
Threadersteller

Dabei seit: 04.03.2010
Ort: Paderborn
Alter: 56
Geschlecht: Männlich
Verfasst Mi 14.03.2012 12:17
Titel

Antworten mit Zitat Zum Seitenanfang

map

hier klappt es einwandfrei da habe ich mit Lightbox gearbeitet

nur mit fancybox bekomme ich es nicht hin


Zuletzt bearbeitet von Morpheus1968 am Mi 14.03.2012 12:23, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
immerIch

Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht: Männlich
Verfasst Mi 14.03.2012 12:52
Titel

Antworten mit Zitat Zum Seitenanfang

Fancybox ist ein jQuery Plugin, habe dir oben beschrieben, wie du herangehen musst.

Erst den Klick-Handler auf dem Area-Element setzen, und dann Fancybox aufrufen. Innerhalb des Fancybox-Aufrufs musst du natürlich irgendwas angeben, was in die Fancybox geladen werden soll, entweder mit einer angegebenen Url zur Seite, die geladen werden soll, oder direkt ein als Content



Code:

$('area').on("click",function(){
var thisUrl = $(this).attr("href");
$.fancybox({href:thisUrl});

});


Dir ist aber schon bewusst, das Fancybox ein jQuery-Plugin ist, dementsprechend auch jQuery eingebunden werden muss.

Lightbox ist standalone und kann ohne irgendeine Bibliothek eingesetzt werden.


Zuletzt bearbeitet von immerIch am Mi 14.03.2012 12:57, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
Morpheus1968
Threadersteller

Dabei seit: 04.03.2010
Ort: Paderborn
Alter: 56
Geschlecht: Männlich
Verfasst Mi 14.03.2012 13:00
Titel

Antworten mit Zitat Zum Seitenanfang

schau mal auf die seite

testseite ....imagemap + fancybox

<script type="text/javascript" src="../fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.3.4.css" media="screen" />
  View user's profile Private Nachricht senden
immerIch

Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht: Männlich
Verfasst Mi 14.03.2012 13:06
Titel

Antworten mit Zitat Zum Seitenanfang

Überprüf bitte erstmal dein Markup. In deinem map-Tag sind anchor-tags samt Bilder drin, die müssen da raus.

Darüber hinaus frage ich mich, warum du hier mit onmouseover, onmouseout, onclick arbeitest, wenn du eh jQuery drin hast. Das vereinfacht doch einiges.

Code:
$('area').on("mouseover",function(){

});

$('area').on("mouseout",function(){

});

$('area').on("click",function(){

});


Zuletzt bearbeitet von immerIch am Mi 14.03.2012 13:12, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden
Morpheus1968
Threadersteller

Dabei seit: 04.03.2010
Ort: Paderborn
Alter: 56
Geschlecht: Männlich
Verfasst Mi 14.03.2012 13:49
Titel

Antworten mit Zitat Zum Seitenanfang

na eigentlich sollte nun alles passen

aber geht immer noch nicht

*Huch* *Huch*
  View user's profile Private Nachricht senden
 
Ähnliche Themen Tabslideout.js vs. Fancybox
Fancybox > genau so...
FancyBox und Flash
jQuery Fancybox per Js aufrufen?
jquery easySlider + Fancybox
JW Image Rotator & Fancybox
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3, 4  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.