nicht angemeldet
Bei klick auf <area> - Element Seite über Ajax-Effect anzeigen
Hi,
ich habe ein Bild mit <area> Elementen und möchte nun, das wenn man auf eine dieser <area>s klick über einen Ajax Effekt die Seite im Vordergrund geladen bekommt.
Ich möchte dabei den Effekt "This Page" von folgender Seite verwenden:
http://mjijackson.com/shadowbox/
Habe es im Header schon eingefügt und es läuft auch mit normalen <a href="..."> Links.
Jetzt ist nur die Frage wie ich das ganze in ein <area> bekomme.
habe die Parameter hier eingefügt wie es auch bei dem <a href> aussieht, aber der Effekt funktioniert dann nicht.
-
Hallo,
der Quelltext ist zur Abwechslung mal hervorragend kommentiert und die Dokumentation ist herausragend für solche Scripte. Schau einfach mal in den Quellcode, da ist der Fall sogar angesprochen:
/** * Sets up listeners on the given links that will trigger Shadowbox. If no * links are given, this method will set up every anchor element on the page * with the appropriate rel attribute. Note: Because AREA elements do not * support the rel attribute, they must be explicitly passed to this method. * * @param {Array} links An array (or array-like) list of anchor * and/or area elements to set up * @param {Object} opts Some options to use for the given links * @return void * @public * @static */ Shadowbox.setup = function(links, opts){ .... * Skips calling Shadowbox.setup() in init(). This means that it must * be called later manually. * * @var {Boolean} skipSetup */ skipSetup: false,Du führst also beim Starten Shadowbox.init() mit dem Parameter { skipSetup : true } aus und übergibst dann Shadowbox.setup() deine area-Elemente als Array (z.B. die durch document.getElementsByTagName("area") zurückgegebene Knotenliste).
Mathias
-
Danke, das ist gut erklärt, aber ich bin net so gut in Javascript. Kannst du mir das mal anhand eines Beispiels erklären?
Also hier mal wie es bei mir aussieht:<head>
<link rel="stylesheet" type="text/css" href="src/css/shadowbox.css"><script type="text/javascript" src="src/js/lib/yui-utilities.js"></script>
<script type="text/javascript" src="src/js/adapter/shadowbox-yui.js"></script>
<script type="text/javascript" src="src/js/shadowbox.js"></script>
<script type="text/javascript">window.onload = function(){
Shadowbox.init();
var flash_els = [
document.getElementById('flash1'),
document.getElementById('flash2'),
document.getElementById('flash3')
];Shadowbox.setup(flash_els, {
gallery: 'Flash',
continuous: true,
counterType: 'skip'
});};
</script>
</head>
<body>
<img src=".team.jpg" alt="Team" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="86,106,148,188" href="#" title="Bereich_1" alt="Bereich_1" />
<area shape="rect" coords="201,143,262,223" href="#" title="Bereich_2" alt="Bereich_2" />
<area shape="rect" coords="229,44,302,137" href="#" title="Bereich_3" alt="Bereich_3" />
</map>
</body>Jetzt möchte ich das wenn ich:
Bereich_1 anklicke "seite_1.html" öffne oder
Bereich_2 anklicke "seite_2.html" öffne und so weiter-
Hallo,
Das sieht soweit korrekt aus bis auf diese Sachen:
var flash_els = [
document.getElementById('flash1'),
document.getElementById('flash2'),
document.getElementById('flash3')
];In deinem HTML-Code gibts keine Elemente mit diesen IDs.
Gib deinen drei area-Elementen doch mal diese IDs, dann stehen sie auch in diesem Array drin.<img src=".team.jpg" alt="Team" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="86,106,148,188" href="#" title="Bereich_1" alt="Bereich_1" />Wenn du willst, dass beim Klick daran seite_1.html geöffnet wirst, musst du diese Adresse natürlich auch in das href-Attribut reinschreiben.
Mathias
-
Hallo,
habe es jetzt wie folgt geändert:var flash_els = [
document.getElementById('area1'),
document.getElementById('area2'),
document.getElementById('area3')
];<img src=".team.jpg" alt="Team" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area id="area1" shape="rect" coords="86,106,148,188" href="seite_1.html" title="Bereich_1" alt="Bereich_1" />Wenn ich jetzt allerdings die area anklicke öffnet sich zwar die zeite, aber ohne den überblendungs Effekt.
-
-
-