nicht angemeldet
Bildwechsel bei verweissensitiven Grafiken
0 0 0 0 
Gunnar Bittersmann
Bildwechsel bei verweissensitiven Grafiken
Hallo liebes Forum,
ich hänge immer noch über meiner Karte die aus verweissensitiven Grafiken aufgebaut ist.
Nun wird gewünscht dass beim Darüberfahren mit der Maus über die einzelnen Bereiche die jeweilige Gemeinde farbig hervorgehoben wird.
Ich möchte das nun mit einem Hintergrundbild lösen. Mein Bild ist ein transparentes gif mit einem Hintergrundbild. Per JS müsste diese nun ausgetauscht werden wenn ich mit der Maus über die jeweiligen areas gehe. Sind leider sehr viele, aber das muss ich nun mal in Kauf nehmen.
Hmm. Jetzt komme ich aber nicht weiter mit meinen nicht vorhandenen JS-Kenntnissen. Es wird denke ich was mit onmouseover und get element by id ..? Aber wo und wie?
Könnt ihr mir mal auf die Sprünge helfen?
Demütigsten Dank schon im Voraus,
Melanie
-
Hi Mel,
Könnt ihr mir mal auf die Sprünge helfen?
wenn Du evtl. mal etwas code oder besser noch eine URL posten würdest, würde mir das leichter fallen...
ich hänge ja im Moment an was ähnlichem -> siehe https://forum.selfhtml.org/?t=122693&m=789248Demütigsten Dank schon im Voraus,
MelaniemfG der Hilker
-
-
OK, wie wäre es, wenn Du es in etwa wie in meinem Beispiel machst, und absolut positionierte divs mit den "andersfarbigen" gebieten, als über die karte legst?
Diese dann allerdings "visibility: hidden" und dann per Mouseover & oder stylesheet anzeigen lässt...mfg, der Hilker
-
Das Prinzipt mit den tooltipps ( in Form von Text) hatte ich zuvor auch schonmal gehabt (aber wieder verworfen weil es mir dann doch nicht gefiel, jeztt muss title ausreichen) aber das würde bedeuten dass ich 36 einzelne gifs erstellen müsste und mit JS einblende...
ich tue mir grad selber leid wenn ich da an die Arbeit denke ;)
Und so sehr elegant ist das nicht also in meinem Fall. Und ich weiss nicht ob die area dann noch anklickbar ist ?? Ich glaube eher nicht oder? Wenn da passgenau ein layer drübergelegt wird?
vg melanie
-
Das Prinzipt mit den tooltipps ( in Form von Text) hatte ich zuvor auch schonmal gehabt (aber wieder verworfen weil es mir dann doch nicht gefiel, jeztt muss title ausreichen) aber das würde bedeuten dass ich 36 einzelne gifs erstellen müsste und mit JS einblende...
ja, allerdings ist das mit einem einigermaßen guten grafikprogramm sicher nicht schwierig die konturen zu finden...
Meine "ToolTips" sind im übrigen garkeine, die tun nur so als ob :-)ich tue mir grad selber leid wenn ich da an die Arbeit denke ;)
Und so sehr elegant ist das nicht also in meinem Fall. Und ich weiss nicht ob die area dann noch anklickbar ist ?? Ich glaube eher nicht oder? Wenn da passgenau ein layer drübergelegt wird?
doch sicher... auch das <div element> respektive dessen inhalt kann ja "anklickbar" sein...
wenn ich gleich mal einen moment zeit hab, bau ich dir mal ein beispielcode...vg melanie
Gruß, der Hilker
-
Hi there,
Das Prinzipt mit den tooltipps ( in Form von Text) hatte ich zuvor auch schonmal gehabt (aber wieder verworfen weil es mir dann doch nicht gefiel, jeztt muss title ausreichen) aber das würde bedeuten dass ich 36 einzelne gifs erstellen müsste und mit JS einblende...
ich tue mir grad selber leid wenn ich da an die Arbeit denke ;)
Also, ich hab für eine ähnliche Geschichte einmal ein PHP-Skript geschrieben, daß bei 2färbigen Bildern die Konturen nachfährt und je nach gewünschter Auflösung in eine Datenbank einträgt und automatisch in die Imagemap einträgt.
Du kannst Dir das ansehen unter:
http://www.ecml.at/edl/game/talktome.html
einfach auf Präsentationsmode klicken und dann irgendeinen Button auswählen, dann siehst Du die Europakarte mit einem Mouseovereffekt für jedes Land.
Man kann es also in Javascript lösen ;)
-
-
-
-
-
hi,
Hmm. Jetzt komme ich aber nicht weiter mit meinen nicht vorhandenen JS-Kenntnissen. Es wird denke ich was mit onmouseover und get element by id ..?
Und .style
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Ja richtig, aber die diese Teile zusammenzubauen und die logische Beziehung zwischen den areas und dem img herzustellen - da komme ich nicht weiter.
-
-
also ich kanns selbst kaum glauben aber ich habe jetzt was zusammengestöpselt was funktioniert:
im head:
<script type="text/javascript">
function bildwechsel (was) {
document.getElementById("landkreiskarte").style.backgroundImage = was;
}
</script>im body (Auszug):
<area title="Zapfendorf" shape="poly" coords="303,51,311,49,317,56,327,56,332,61,327,67,332,75,338,78,325,89,317,94,308,102,300,104,291,98,294,88,294,77,288,72,300,69,300,61" href="index.php?zapfendorf" alt="" onmouseover ="javascript:bildwechsel('url(images/zapfendorf.gif)')" onmouseout= "javascript:bildwechsel('url(images/landkreis.gif)')" />
Das klappt so wie ich mir das vorgestellt habe. Allerdings: schon schlimmes Flackern bei den grossen Hintergrundbildern...
hmm.
-
Hi Mel,
Ich weiß nicht, wie deine mouseover-Bilder aussehen; ich würde das so lösen:Die Karte kommt in den Hintergrund.
Die Image-Map ist ein transparentes GIF mit denselben Maßen wie die Karte.
Die Bilder mit den Hervorhebungen haben ebenfalls dieselben Maße wie die ganze Karte. Auf diesen sind aber nur die Veränderungen enthalten, alles andere ist einfarbig transparent. Durch die Kompression wirkt sich eine große einfarbige Fläche kaum auf die Dateigröße aus, so dass diese Bilder trotz ihrer Fläche nur wenig Übertragungszeit beanspruchen.
Beim mouseover-Event für eine Area tauschst du das tranparente GIF gegen das Bild aus, das die Veränderungen für diese Area enthält. Der Rest ist ja noch im Hintergrundbild.
Musst halt nur dafür sorgen, dass das Vordergrundbild passend über dem Hintergrundbild liegt.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo Gunnar!
ja das ist super! Ich werde es heute abend dann mal ausprobieren. Meine imagemap ist im Moment schon ein transparentes gif. ABer dem habe ich per css ein Hintergrundbild definiert. Das aber lasse ich nun und lege stattdessen mit entsprechender Positionierung das Kartengif dahinter.
Juchuh so könnte das super funktionieren. Rest wie Du dann vorgeschlagen. Und: ja damit müsste sich die Grösse der wechselnden Hintergrundbilder drastisch reduzieren.Obwohl.. ich lese gerade Dein Post nochmal: meintest Du ich sollte dann das transparente gif das über der Karte liegt austauschen also einen richtigen Bildwechsel vornehmen oder diesem halt jeweils ein anderes Hintergrundbild verpassen? Ich hätte es jetzt mit dem Hintergrundbild gelöst. Ist kein grosser Unterschied oder habe ich da was übersehen?
vg melanie
-
Obwohl.. ich lese gerade Dein Post nochmal: meintest Du ich sollte dann das transparente gif das über der Karte liegt austauschen
Ja, Mel, genau das.
oder diesem halt jeweils ein anderes Hintergrundbild verpassen?
Nein, das Hintergrundbild bleibt fest. Das brauchst du ja, damit du im Vordergrund nur die Veränderungen (i.e. wenig Information = kleine Dateien) tauschen musst.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
ahhhh! ;) Ein kleines Licht geht auf... ;)
Danke Dir,
falls es doch noch Probleme geben sollte melde ich mich (ja, das ist eine Drohung ;))
vg mel
-
-
-