#1 12. November 2012 Hallo, ich stehe gerade vor einem Problem und hoffe das Ihr mir helfen könnt. ich habe eine Grafik und will auf dieser Grafik mehrere Verlinkungen einbringen. Als Beispiel: Grafik = Weltkarte Verlinkungen = Kontinente Ich würde nun gerne, dass wenn ich mit meiner Maus über Afrika gehe, dieser Kontinent in einer anderen Farbe erscheint. Also ein Mouseover effekt plus Verlinkung. Meine Frage ist nun eher wie und mit welcher Programmiersprache ich das realisieren kann und sollte. Mir fällt nur Flash ein, dass kommt jedoch nicht in Frage da auch Apple User das sehen und nutzen können sollen. ich hoffe ihr könnt mir helfen. + Multi-Zitat Zitieren
#2 12. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt Hey, am einfachsten könntest du 5 weitere Bilder auf den Server laden und jeweils das Bild anzeigen, wo der gewünschte Kontinent als "aktiv" hervorgehoben ist! Das Abfangen der Mauszeigerposition auf dem Bild selbst geht auf jeden Fall mit JS, nur wie hab ich leider keine Ahnung - Habs noch nie gebraucht Gruß Blackb!rd 1 Person gefällt das. + Multi-Zitat Zitieren
#3 12. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt 5 weitere Bilder wären doch auch 5 weitere Bilder die geladen werden müssen. Würde das gerne so schlank wie möglich halten. Ist so etwas mit Html 5 möglich-? + Multi-Zitat Zitieren
#4 12. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt Du lädst natürlich am Anfang nur das Hauptbild und per ajax dann im Hintergrund die anderen Bilder nach! in nem ordentlichen Dateiformat sollte das eigentlich funktionieren! Mit HTML klappt das definitiv nicht, ggf kann man irgendwas mit CSS oder JS tricksen - Glaube aber eher nicht! Gruß Blackb!rd + Multi-Zitat Zitieren
#5 12. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt Android 4.1 (Jelly Bean) kommt von Haus aus auch ohne Flash. --- Die imo eleganteste Lösung ist HTML5 mit Canvas, zB wie hier oder hier. Weiters [g]html5 canvas world map[/g] + Multi-Zitat Zitieren
#6 12. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt Einfach eine große Grafik, die aus mehreren Bilder besteht. (Weltkarte = Bild1 Afrika Hover = Bild2 Europa Hover = Bild3) etc. Diese zusammenfügen sodass das ganze nur ein Bild ist. (Overflow hidden) Dann einfach der X-Achse nach verschieben. (Kannste komplett in CSS machen) Kein JavaScript nötig kein nachladen nötig und gecached wirds ja eh...so wird das eigentlich in der Praxis umgesetzt! + Multi-Zitat Zitieren
#7 12. November 2012 Zuletzt bearbeitet: 12. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt Wenn du aber nur die Flächen mit Farbe füllen willst, brauchst du keine extra Grafiken, was wünschenswert ist, oder nicht? Oder man macht es über Sprites und ändert nur die Hintergrundposition, ist aber trotzdem noch ein größeres Bild als die Weltkarte alleine 1 Person gefällt das. + Multi-Zitat Zitieren
#8 12. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt jo hast recht! habe da blöd gedacht aber bei so einem bild kann man die auch trennen! von der größe her muss man auch irgendwann mal wayne sagen. klar kann man alles so klein wie möglich machen bzw. selber drawen lassen jedoch sollte man sich eher fragen was man falsch macht wenn ein paar kb mehr nicht verkraften möchte kann oder will. 1 Person gefällt das. + Multi-Zitat Zitieren
#9 12. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt hört sich in erster Linie Ok an, jedoch verstehe ich nicht wie das genau Funktionieren soll. Woher soll das System dann wissen wo Europa ist und wo Afrika wenn ich mit der Maus über das Bild gehe. + Multi-Zitat Zitieren
#10 12. November 2012 Zuletzt bearbeitet: 12. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt Mit einer Map legst du die Bereiche fest und mit Javascript steuerst du dann den Highlight Effekt mithilfe von Absolute Positionierten DIVs und eine Sprite-Grafik Nur Niedersachsen und Brandenburg. War mir zuviel Arbeit http://nanobyte-online.de/sandbox/image-map-with-imghighlight/ Die Sprite Informationen habe ich als Attribute der Area-Elemente festgehalten: HTML: <area shape="poly" alt="" title="Niedersachsen" coords="206,122,221..." data-hlsp-img="bundeslaender-sprite.png" data-hlsp-data="60,120,0,0,306,267" href="http://de.wikipedia.org/wiki/Niedersachsen" target="_blank" /> Das ist das Highlight-Sprite-Bild http://nanobyte-online.de/sandbox/image-map-with-imghighlight/bundeslaender-sprite.png 2 Person(en) gefällt das. + Multi-Zitat Zitieren
#11 13. November 2012 Zuletzt bearbeitet: 13. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt Wenn ich mir nun deins runter kopiere, und ich ein anderes bild plus coords einsetze müsste das doch reichen oder? + Multi-Zitat Zitieren
#12 13. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt Dafür musst du den geänderten Code zeigen. P.s.: Keinen Support per PM + Multi-Zitat Zitieren
#13 13. November 2012 Zuletzt bearbeitet: 13. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt 60,120,0,0,306,267 sind die 60,120 der versatz zum ersten Bild? + Multi-Zitat Zitieren
#14 13. November 2012 AW: Grafik mit Verweis-sensitive Grafiken + Hovereffekt 60,120 = Position des Highlight DIVs 0,0 = Position vom Bild im Sprite 306,267 = Höhe und Bereite + Multi-Zitat Zitieren