Lightbox öffnet sich nicht

Hallo alle zusammen,

ich will mir eine Image-Map bauen. Klappt auch soweit alles nur das wenn ich auf den Map-Bereich klicke wird das Bild im Firefox im selben Fenster angezeigt und im IE öffnet sich die Lightbox.

Irgend wie finde ich den Fehler nicht. Alles was ich mir bis her durchgelesen habe bringt mich nicht weiter. Bin allerdings noch etwas unerfahren in HTML.

Hier mal der Code:

Code:

---

<div style="text-align:center; width:700px; ">
<img id="Image-Maps" src="tl_files/layout/cnc/maschine1.jpg" usemap="#Image-Maps" width="700" height="340" alt="123" />
<map id="IImage-Maps" name="Image-Maps">
<area  shape="rect" coords="11,206,166,340" rel="lightbox" href="tl_files/layout/cnc/maschine1.jpg" alt="123"/>
</map>
</div>

---

Bitte nicht drüber lachen, bin Anfänger.

Außerdem zeigt mir HTML Tidy folgenden Fehler an:
Fehler: there is no attribute "rel"

Wäre euch sehr dankbar für bischen Nachhilfe.

Vielen Dank im Voraus.

Gruß
Thomas

Nutzt du TL 2.8 mit der Mediabox? Falls ja könntest du das moo_mediabox.tpl anpassen und ihm sagen, das er neben a-Tags auch nach area-Tags suchen soll:

PHP-Code:

---

<?php

// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox.css|screen';

?>

<script type="text/javascript" src="plugins/mediabox/js/mediabox.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
Mediabox.scanPage = function() {
  var links = $$("a","rel").filter(function(el) {
    return el.rel && el.rel.test(/^lightbox/i);
  });
  $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    var rel0 = this.rel.replace(/[[]|]/gi," ");
    var relsize = rel0.split(" ");
    return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
  });
};
window.addEvent("domready", Mediabox.scanPage);
//--><!]]>
</script>

---

Ungetestet!

Hallo Psi,

vielen Dank für Deine Antwort.

Zurzeit setze ich noch TL 2.7.6 ein. Bevor ich auf TL 2.8 umsteige wollte ich noch auf die endgültige Version warten. Werde aber Deinen Vorschlag trotzdem mal testen.
Habe bis jetzt Dutzende von Foren und Seiten durchforstet, aber noch kein Lösung gefunden. Was mich grundsätzlich interessiert ist warum funktioniert es im IE 8 und im FF 3.5.7 nicht???
Außerdem habe ich gelesen dass die map-Funktion veraltet wäre und etliche Anleitungen gefunden in denen Bilder via css oder Java eingeblendet werden.
Na ja, ich suche erst einmal weiter.

Gruß und ein schönes Restwochenende.

Thomas

Zitat:

---

Zitat von Psi

Nutzt du TL 2.8 mit der Mediabox? Falls ja könntest du das moo_mediabox.tpl anpassen und ihm sagen, das er neben a-Tags auch nach area-Tags suchen soll:

PHP-Code:

---

<?php

// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox.css|screen';

?>

<script type="text/javascript" src="plugins/mediabox/js/mediabox.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
Mediabox.scanPage = function() {
  var links = $$("a","rel").filter(function(el) {
    return el.rel && el.rel.test(/^lightbox/i);
  });
  $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    var rel0 = this.rel.replace(/[[]|]/gi," ");
    var relsize = rel0.split(" ");
    return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
  });
};
window.addEvent("domready", Mediabox.scanPage);
//--><!]]>
</script>

---

Ungetestet!

---

Ist zwar etwas älter, aber wenn nochmal jemand danach sucht ...

Einfach einen Javascript-Trigger per onclick einfügen:

HTML-Code:

---

<img src=meinbild.jpg" alt="luftbild" width="681" height="478" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area onclick="Mediabox.open('zu-oeffnendes-bild.jpg', 'Titel', '360 180');return false;" shape="rect" coords="517,212,547,241" href="#" alt="Titel" />
</map>

---

Hallo Stefan,
wo muß daß in Contao 2.9.... eingestellt werden?

Bitte teile es mir im Detail -Kurzform- mit.
Vielen Dank im Voraus.

Zitat:

---

Zitat von stefan.sl

Ist zwar etwas älter, aber wenn nochmal jemand danach sucht ...

Einfach einen Javascript-Trigger per onclick einfügen:

HTML-Code:

---

<img src=meinbild.jpg" alt="luftbild" width="681" height="478" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area onclick="Mediabox.open('zu-oeffnendes-bild.jpg', 'Titel', '360 180');return false;" shape="rect" coords="517,212,547,241" href="#" alt="Titel" />
</map>

---

---

Content-Element Typ "HTML" erstellen -> Area-Map Code reinkopieren -> area-tag um das onclick=".." (s.o.) erweitern.

Wenn Du nicht weißt, wie man den Area-Code erstellt, dann musst Du Dir mal irgendwelche Imagemap-Generatoren anschauen oder bei selfHTML nachlesen.