Javascript - Bild durch HTML-Datei ersetzen in Code
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktion
beispiel
bild
code
dank
datei
einbinden
element
hilfe
http
image
koordinate
machen
programmieren
sache
tip
tool
url
verschieben
versuchen
-
Hallo Leute,
ich habe gerade wieder mal eine Stelle gefunden, bei der ich nicht weiter komme. Es geht um dieses nette Tool hier:
http://www.htmldrive.net/items/show/394/JQuery.iviewer-zoom-image-and-to-drag-effect
Ich versuche, der Zeit nur auf dem Test-Server, für unser Freizeitpark-Forum eine Image-Map als interaktiven Parkplan zu erstellen bzw. nun zu erweitern.
Hier ist der aktuelle Stand der Dinge:
http://epboard.lima-city.de/site/test4ever/parkplan.php
Das Tool wurde bereits komplett installiert und es funktioniert auch alles so, wie es soll, wenn man es denn so macht, wie eigentlich gedacht. Normalerweise gibt man als Quell-Datei ja ein Bild ein:
src: "{T_IMAGE_PATH}parkplan/parkplan.jpg",
Dann funktioniert das Tool wunderbar. Wenn ich jedoch, und nun kommt der Haken an der ganzen Sache, eine HTML-Datei dort angebe, funktioniert das Tool gar nicht mehr (siehe Link oben).
Einige stellen sich jetzt die Frage, warum ich denn eine HTML-Datei dort einfüge? Nun, dass ist eigentlich ganz einfach. Ich will ja eine Image-Map haben (ist auch bereits richtig in der HTML-Datei programmiert). Den Parkplan soll man jetzt jedoch zoomen und verschieben können.
Jetzt kommt wieder meine Signatur ins Spiel: Da ich absolut kaum Ahnung von Javascript habe und es eigentlich bisher selten brauchte, brauche ich eure Hilfe. Wie muss man die Dateien anpassen, um eine HTML-Datei dort einzufügen.
Auch Tipps wären hilfreich.
Ich danke euch!
Gruß,
mpsftp -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
hallo mpsftp,
also das tool ist nunmal dazu gedacht bilder zu zoomen und verschieben und nicht html-konstrukte.
nun könnte man versuchen das bild welches als map in deiner imagemap angegeben ist als bild für das tool zu nehmen - allerdings selbst wenn das tool mitspielt wird es dir wohl kaum die koordinaten der sensitiven flächen mitberechnen (da man die ja nur absolut und nicht relativ angeben kann).
denn wenn du dein bild zoomst oder verschiebst, sollen sich ja auch die größen und positionen der verweissensitiven flächen deiner imagemap mitverändern.
ich denke nicht das du das tool dazu überreden kannst.
bleibt also nur ein tool zu finden das gerade dafür gedacht ist oder halt selbst zu schreiben.
vielleicht solltest du dir mal zb dieses anschauen:
https://github.com/jamietre/imagemapster
lg hechma -
Hallo,
vielen Dank schon einmal für deine Hilfe.
Mir ist eben noch etwas aufgefallen. Das Tool bietet mir bereits die Funktion mit der Image-Map. Diese vergrößern sich auch mit dem Bild:
var objects = [ {x: 100, y: 100, r: 50, isInObject: isInCircle, title: 'big circle', getCenter: getCircleCenter }, {x: 150, y: 250, r: 35, isInObject: isInCircle, title: 'middle circle', getCenter: getCircleCenter }, {x: 500, y: 300, r: 10, isInObject: isInCircle, title: 'small circle', getCenter: getCircleCenter }, {x1: 200, y1: 400, x2: 300, y2: 500, isInObject: isInRectangle, title: 'rectangle', getCenter: getRectangleCenter } ]
Ich müsst jetzt nur noch wissen, wie man das ganze mit Polygonen macht und wie ich die Aktion beim Klick auf einen dieser Felder verändern muss. Aktuell zeigt die Aktion folgendes:
onClick: function(coords) { var object = whereIam(coords.x, coords.y); if (object) alert('Clicked at ('+coords.x+', '+coords.y+'). This is '+object.title);
Wie kriege ich das jetzt in Kombination mit dem Code oben hin, dass sich eine neue Seite öffnet? Vielleicht mit
?top.location.href
Danke schon einmal -
hallo mpsftp,
eigentlich werden die verweisziele der image-map ja einfach durch die href-angebe der areas bestimmt.
das man die area-koordinaten nochmals händisch an das tools übergeben muss ist ja auch nicht gerade schön...
hier mal ein kleines beispiel wie man das selber programmieren könnte:
demo: http://hechma.lima-city.de/imagemap-mit-zoom-und-drag/
code: http://hechma.lima-city.de/imagemap-mit-zoom-und-drag/code.php
natürlich noch nicht ausgereift was die begrenzungen usw angeht aber als denkanstoß hoffentlich ausreichend
ps: dein kartenbild hat eine auflösung von 300dpi und ist über 1mb groß - das solltest du ändern
lg hechma
Beitrag zuletzt geändert: 21.11.2014 2:18:28 von hechma -
Hallo,
vielen lieben Dank für deine Seite, aber leider scheitert der Einbau bei mir kläglich.
Ich habe nun meine Meinung etwas geändert. Es würde schon reichen, wenn man das Bild (also den Parkplan) verschieben könnte und eine Startposition festlegen könnte.
Vielleicht hast du da ja einen Tipp für mich.
Ich habe bisher an das gedacht: http://jsfiddle.net/xhMgu/
Gibt bestimmt aber eine leichtere Methode, welche auch funktioniert.
Gruß,
mps -
hi mpsftp,
wenn du keinen zoom willst würd ich dir dringend raten eine standart html-image-map zu verwenden - dieser ganze tool-kram bläht den code nur unnötig auf und sorgt für fehleranfälligkeiten und lange ladezeiten... bin ich kein freund von.
und warum auch wenns mit den normalen html-elementen genauso geht. außerdem sollte die seite auch immer benutzbar sein, also auch wenn der user zb javascript ausgeschaltet hat.
die image-map (optional) verschiebbar zu machen ist kein problem - da du ja eh schon jquery am start hast würde ich (wie auch in meinem beispiel) zum verschieben jquery-ui benutzen, denn das ist bietet komfort und ist ausreichend getestet. aber lieber nicht die komplette jquery-ui einbinden sondern auf der homepage nur den einen teil für dragable als custom-download runterladen und einbinden da die ganze juqery-ui wiederum auch ziemlich groß ist.
das fiddle ist ja anscheinend jQuery UI 1.8.18 - aber nimms lieber von originalanbieter wie gesagt als abgespeckten custom-download. dort findest du auch sämtliche beschreibungen zur konfiguration.
müsstest vielleicht nochmal rumprobieren wie man es am besten macht das man die map auch dort zum draggen anfassen kann wo sich eine area befindet...
ich perönlich fände es auch schick wenn man immer (egal auf welcher seite man sich befindet) eine kleinere ansicht der map sehen könnte die dann automatisch zum ausgewählten menüpunkt fährt. also wenn man zum beispiel im menü auf frankreich klickt wird der entsprechende seiteninhalt geladen und gleichzeitig fliegt die map zum punkt frankreich der dann irgendwie schick hervorgehoben wird. aber dazu müsstest du die komplette seitennavigation asynchron (ajax) aufbauen - das geht zwar mit jquery recht einfach aber das das erste mal zu programmieren ists vielleicht verwirrend
falls du mit rechteckig begrenzten klick-areas auskommen könntest hättest du noch die möglichkeit die karte als html-konstrukt aufzubauen, also keine image-map sondern einzelne sich überlagernde grafik-elemente - da gäbe es noch mehr möglichkeiten das ganze objektgebundener darzustellen...
außerdem wäre der html5-canvas eine gute alternative zur imagemap, aber ist wohl eher noch komplizierter.
mein ansporn wäre es die dinosaurier ruhen zu lassen (phpBB) und das ganze projekt selber zu schreiben, was sicherlich ne menge aufwand ist, aber man lernt halt auch viel. außerdem kann man viel viel besseren code produzieren (siehst ja wie sehr das ganze schon aufgebläht ist - und auf nem handy siehts auch etwas kaputt aus - und der sicherheitsaspekt bei phpBB ist auch sone sache) und die suchmaschinen würdens dir danken.
lg hechma
Beitrag zuletzt geändert: 21.11.2014 16:49:16 von hechma -
Ich habe nun den Zoom mit PHP gelöst, weil ich dieses einfach 1000x besser beherrsche, als Javascript. Das verschieben habe ich durch jQuery gelöst.
Vielen Dank trotzdem für die große Hilfe!
Beitrag zuletzt geändert: 21.11.2014 19:54:33 von mpsftp -
hi mpsftp,
zoom mit php ??!
durch verschiedene seiten die verschiedene zoomstufen anzeigen oder wie ?
...dann müsste ja bei jedem zoomklick ein neuer seitenaufruf stattfinden
sag mal bescheid wenns fertig ist
lg hechma -
Ist schon fertig. Ein neuer Seitenaufruf sollte sich verkraften lassen bei den Usern.
Der PHP-Code verändert nun beim div-Element den Style (zoom). -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
