Landkarte mit Bildpunkten (Image Map) und Lightbox

Bruno54 · 13. Januar 2012

Zitat von "zwoemti"

würd da wieder mehr in richtung showbox gehen und kein popupfenster - jquery bietet sich hier auch an....

kann ich das als laie machen ?

Zitat von "zwoemti"

aber mir ist die Karte noch viel zu groß...in der Breite und auch in der Höhe

wenn ich die karte kleiner mache, bringe ich nimmer viel unter

Zitat

Kommen noch mehr verlinkungen dazu,

jau
ist so geplant
deshalb auch die grösse

little-key · 13. Januar 2012

Aber wenigstens die Breite des bodys würde ich schon einhalten.

Scrollen in der Breite macht Unmut....

Und wenn Du die so groß brauchst oder größer, könnte man nachdenken, ob man die Karte in einem eigene Fenster aufgehen läßt also schlichter Hintergrund, weil so ist das Mist mit dem scrollen.
Hätte ev. auch einen Vorteil für Deine User: Sie können auf der Homepage weiter stöbern und parallel dazu ist die Karte auf.

zwoemti · 14. Januar 2012

820x1400 px ist eine gute Größe keine Scrollbalken - wie willst du seitlich scrollen wenn du die karte in der Mitte anschaust?

Also mal eben getestet....

kommt an den Anfang vor die Map ist mit mouseover (würd ich nicht nehmen)

Code

<script type="text/javascript">
/*<![CDATA[*/
$(function(){
$('area[rel="photoframe"]').live('mouseenter', function(){
// container erstellen
if($('#photoframe').length == 0){
$('body').append('<div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; opacity: 0;"></div><div id="photoframe" style="display: none; position: fixed; left: 50%; top: 50%; z-index: 1999999;"><img src="images/close.png" id="close" alt="close" /><br /><img id="photoframe-image" src="" alt="" /><br /><span id="photoframe-caption"></span></div>');
// schliessfunktion
$('#close, #overlay').mouseleave(function(){
$('#overlay').animate({
opacity: 0
}, 'slow', function(){
$(this).hide();
});
$('#photoframe').slideUp('slow');
});
}
// overlay anzeigen
$('#overlay').show().animate({
opacity: 0.8
}, 'slow');
// bild setzen
$('#photoframe-image').attr('src', $(this).attr('href'));
$('#photoframe-caption').text($(this).attr('title'));
// container anpassen
$('#photoframe').css({
marginLeft: -($('#photoframe').outerWidth()/2),
marginTop: -($('#photoframe').outerHeight()/2)
}).slideToggle();
return false;
});
});
/*]]>*/
</script>

Alles anzeigen

willst du click verwenden musst du das nehmen

Code

<script type="text/javascript">
/*<![CDATA[*/
$(function(){
$('area[rel="photoframe"]').live('click', function(){
// container erstellen
if($('#photoframe').length == 0){
$('body').append('<div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; opacity: 0;"></div><div id="photoframe" style="display: none; position: fixed; left: 50%; top: 50%; z-index: 1999999;"><img src="images/close.png" id="close" alt="close" /><br /><img id="photoframe-image" src="" alt="" /><br /><span id="photoframe-caption"></span></div>');
// schliessfunktion
$('#close, #overlay').click(function(){
$('#overlay').animate({
opacity: 0
}, 'slow', function(){
$(this).hide();
});
$('#photoframe').slideUp('slow');
});
}
// overlay anzeigen
$('#overlay').show().animate({
opacity: 0.8
}, 'slow');
// bild setzen
$('#photoframe-image').attr('src', $(this).attr('href'));
$('#photoframe-caption').text($(this).attr('title'));
// container anpassen
$('#photoframe').css({
marginLeft: -($('#photoframe').outerWidth()/2),
marginTop: -($('#photoframe').outerHeight()/2)
}).slideToggle();
return false;
});
});
/*]]>*/
</script>

Alles anzeigen

dann ein wenig style für mouseover

Code

<style type="text/css">
#photoframe {
padding: 10px;
background: #FFFFFF;
}
#overlay {
background: #000000;
}
#close {
display: none;
}
</style>

Alles anzeigen

und dann wenn du click benutzt

Code

<style type="text/css">
#photoframe {
padding: 10px;
background: #FFFFFF;
}
#overlay {
background: #000000;
}
</style>

Damit das ganze auch funktioniert musst du jetzt nur noch in jeden area Bereich hinten bei alt und title

Code

rel="photoframe"

mit dazuschreiben.

und so sieht es dann aus mit mouseover und mit click wenn du ein Bild für das schließen mit hochgeladen hast.

Das X ist ein wenig groß war nur zum testen

Bruno54 · 14. Januar 2012

zwoemti

erstmal danke für deine mühe !

aber nun steh ich auf dem schlauch

wo muss ich nun die scripte bzw den code genau eintragen ?
wie gesagt habe das bisherige nur mehr oder weniger zusammengeklickt

little-key · 14. Januar 2012

Erstmal: Tolle Lösung von zwoemti

@Bruno

Das Map-Programm generiert Dir einen Code.
Vor diesen Code kommt das Script von zwoemti. Denke dran, bei jeder Veränderung der Map, muss der Code neu eingefügt werden (für Dich am Einfachsten, würde auch noch anders gehen).

Versuch:
Im Map-Programm hast Du das Feld Target, wo Du bisher _blank eingegeben hast. Damit Du die letztgenannte Codeerweiterung von zwoemti nicht überall nachher manuel einfügen musst, würde ich probieren bei im Feld Target einzugeben: _blank rel="photoframe" (wenn zwoemti keine Einwände hat).
Ob das Programm meckert, weiß ich nicht.

Bruno54 · 14. Januar 2012

Zitat von "little-key"

Erstmal: Tolle Lösung von zwoemti

@Bruno

Das Map-Programm generiert Dir einen Code.
Vor diesen Code kommt das Script von zwoemti. Denke dran, bei jeder Veränderung der Map, muss der Code neu eingefügt werden (für Dich am Einfachsten, würde auch noch anders gehen).

Versuch:
Im Map-Programm hast Du das Feld Target, wo Du bisher _blank eingegeben hast. Damit Du die letztgenannte Codeerweiterung von zwoemti nicht überall nachher manuel einfügen musst, würde ich probieren bei im Feld Target einzugeben: _blank rel="photoframe" (wenn zwoemti keine Einwände hat).
Ob das Programm meckert, weiß ich nicht.

Alles anzeigen

ich hab nun folgendes eingetragen

Code

<script type="text/javascript">
/*<![CDATA[*/
$(function(){
$('area[rel="photoframe"]').live('click', function(){
// container erstellen
if($('#photoframe').length == 0){
$('body').append('<div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; opacity: 0;"></div><div id="photoframe" style="display: none; position: fixed; left: 50%; top: 50%; z-index: 1999999;"><img src="images/close.png" id="close" alt="close" /><br /><img id="photoframe-image" src="" alt="" /><br /><span id="photoframe-caption"></span></div>');
// schliessfunktion
$('#close, #overlay').click(function(){
$('#overlay').animate({
opacity: 0
}, 'slow', function(){
$(this).hide();
});
$('#photoframe').slideUp('slow');
});
}
// overlay anzeigen
$('#overlay').show().animate({
opacity: 0.8
}, 'slow');
// bild setzen
$('#photoframe-image').attr('src', $(this).attr('href'));
$('#photoframe-caption').text($(this).attr('title'));
// container anpassen
$('#photoframe').css({
marginLeft: -($('#photoframe').outerWidth()/2),
marginTop: -($('#photoframe').outerHeight()/2)
}).slideToggle();
return false;
});
});
/*]]>*/
</script>
<map name="PetrochromisKarte" id="PetrochromisKarte">
<area shape="rect" coords="54,93,107,105" href="images/redbulupoint.jpg" target="_blank rel="photoframe"" alt="petrochromis redbulupoint" title="petrochromis redbulupoint" />
</map>
<img src="http://www.cichlidenschwabe.de/images/karte1.jpg" width="820" height="1640" border="0" alt="Tanganjikasee Petrochromis Karte" title="Tanganjikasee Petrochromis Karte" usemap="#PetrochromisKarte" />

Alles anzeigen

aber irgenwo scheint der wurm drinn zu sein

das file karte1.jpg(neu erstell und grössenmäsig angepasst)
wurde manuell auf den server nach images kopiert

zwoemti · 14. Januar 2012

auf Den ersten blick mit dem handy sag ich es sind bei rel keine " sondern quot gesetzt .

Bruno54 · 14. Januar 2012

jep

kann sein daß das programm fastimagemap
das _blank rel="photoframe" falsch/ anders umsetzt

little-key · 14. Januar 2012

Mein Fehler, bzw. jetzt sehe ich was das Programm draus macht.

Dann so bei Target:

_blank" rel="photoframe

Aufpassen bei den Anführungszeichen. Das erste und letzte werden vom Programm gesetzt.

zwoemti · 14. Januar 2012

Nix da target - das muss wegbleiben sonst verschiebt sich alles....

Ist doch nicht so schwer im fertigen HTML Teil das rel hinzuzufügen da braucht man noch nicht mal Ahnung haben... Editor suchen und ersetzen und fertig ist die laube....

little-key · 14. Januar 2012

Genau das hatte ich bereits oben angefragt bei Dir...

@Bruno
also muss der Target-Bereich leer bleiben...
und manuell wie zwoemti schreibt alles zufügen.

Bruno54 · 14. Januar 2012

JJJUUUHHHHUUUUUU

DANKE

es geht

zwoemti · 14. Januar 2012

Naja teilweise - es fehlt das schließen Bild im Ordner images/close.png

Dein Bild ist in der Breite zu breit und auch in der Höhe...

Bzw. das HTML Feld in der Höhe zu klein.

Scrollleisten sind immer noch beide vorhanden.

Guck mal in dein HTML Objekt dort siehst du die Breite von deiner Seite die du benutzen kannst (minus ein paar pixel...ist ausgegraut. Das nimmst du als width und die Länge guckst du wie es am besten aussieht und nicht verzogen ist das Bild.

Die Höhe vom HTML Feld machst du ein wenig länger da nicht jeder Browser es gleich darstellt! Und mach die Scrollleisten weg - den Haken....

Bruno54 · 14. Januar 2012

Zitat von "zwoemti"

es fehlt das schließen Bild im Ordner images/close.png

habe ich keines gefunden

das heißt dann selber erstellen oder ?

zwoemti · 14. Januar 2012

Zitat

und mit click wenn du ein Bild für das schließen mit hochgeladen hast.

ja das heißt es...

Bruno54 · 14. Januar 2012

Zitat von "zwoemti"

ja das heißt es...

ein (hoffentliches) passendes im www gefunden, geladen
und eingebaut

zwoemti · 18. Februar 2012

Hast du aufgegeben?

Bruno54 · 21. Februar 2012

Zitat von zwoemti

Hast du aufgegeben?

danke er nachfrage
NENE

bin nur auf reh gewesen
als ich 2 tage zuhause war
muste frau ins krankenhaus
daher schludert es gerade etwas.................

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Landkarte mit Bildpunkten (Image Map) und Lightbox

Teilen

Tags