nicht angemeldet
Effekte mit Dhtml statt flash / Imagemap Kontrast?
0 0 
Gernot Back
0 0 Gernot Back
0
0 0 Gernot Back
0 0 Gernot Back
0 0 Gernot Back
0
Effekte mit Dhtml statt flash / Imagemap Kontrast?
hallo und guten abend.
folgendes problem: (bitte zu ende lesen - ist nicht das wonach es erst scheint)
mein chef hätte gern auf der neuen Firmenhomepage (die ich großzügigerweise programmieren darf) eine Europakarte.
Diese Karte soll mit Rollovereffekten versehen werden, bei klick auf ein entsprechendes Land rechts neben der Karte der jeweilige Handelspartner stehen und alles soll möglichst schnell geladen sein.
Fakten:
Den Handelspartner rechts aufzuführen ist ja einfach mit Ebenen zu handhaben. Bissl tipperei - aber das passt schon.
Rollovereffekte sind mit Javascript auch kein Problem - aber ich habe bei den vielen Ländern Europas unheimlich viele Dateien die summiert viel zu groß sind.
Kann man (um zur Frage zu kommen) einfach dieses Imagemap in ner Kontrastfarbe erscheinen lassen? Dass man halt dieses Land über welches man mit der Maus fährt statt blau gelb erscheinen lässt oder führt kein Weg an einem eigenen Bild vorbei?
Andere Variante: Flash.
Ist dieser Rollovereffekt mit Flah darstellbar ohne dass sich die Kunden extra ein Plugin oder sonstwas runter laden müssen? Das soll ich auf jeden Fall verhindern da ein Teil der Kunden schon glücklich ist wenn die den Rechner überhaupt an bekommen - folglich sollte man die mit sowas nicht zu sehr verwirren.
Weiterhin: Wie siehts mit der tollen Windoof-Firewall aus?
Standartmäßig werden ja sogar einfachste Javascripte geblockt.
Führt da ein Weg dran vorbei?
Würde mich über Antworten freuen.
Danke dafür.
-
Hallo,
nur so eine lockere Überlegung. Und vorausgesetzt, das Du ja für Deine Arbeitszeit bezahlt wirst ;-) Nehmen wir mal unser Land:
Das Bild wiegt 318 Byte. Also nicht so viel. Wenn man nun "wieviele?" Länder per absolut platzierter Divs pixelgenau aneinander setzt, bekommt man eine Europakarte. Jedes Bild gibts Du nun einen handelsüblichen mouse-over Effekt bei dem selbiges gegen ein "andersfarbiges" ausgetusch wird. In ein a-Tag verpackt steuert das ganze dan auich noch die einblendbaren Infodivs....
Ist natürlich eine kleine Pixelfrickelei ;-) (Am besten alles in ein Masterdiv packen das einen dunklen Hintergrund hat. Die bilden dann die Grenzlinien zwischen den auf etwas Abstand platzierten Länder-image-Divs.....
Farbige Europakarten findet man gut per googles Bildersuche. Mittels "Zauberstabfunktion" Deiner Grafikverwaltung sind die Länder schnell selektiert.
Chräcker
-
Hallo Stefan,
das Thema Imagemap in Farben scheint ja geradezu en vogue zu sein im Moment. Drei Threads mit mehr oder weniger immer derselben Frage, aber du stellst sie als einziger richtig:
http://forum.de.selfhtml.org/archiv/2004/8/t88414/#m527192
Gruß Gernot
-
hier das Javascript, dass du brauchst für den Rollover Effekt, ich denke mal, dass die User, die auf die Website gehen eh mit dem IE Explodierer Surfen werden und sollte dieses Script kein Problem sein.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Rollover</title><script language="JavaScript">
<!--
function namosw_exchange_src(name, rpath, nsdoc)
{
str = (navigator.appName == 'Netscape') ? nsdoc+'.'+name : 'document.all.'+name;
img = eval(str);
if (img) {
if (img.altsrc == null) {
img.altsrc = img.src;
img.src = rpath;
} else {
var temp = img.src;
img.src = img.altsrc;
img.altsrc = temp;
}
}
}function namosw_preload_img()
{
var img_list = namosw_preload_img.arguments;
if (document.preloadlist == null)
document.preloadlist = new Array();
var top = document.preloadlist.length;
for (var i=0; i < img_list.length; i++) {
document.preloadlist[top+i] = new Image;
document.preloadlist[top+i].src = img_list[i];
}
}//-->
</script></head>
<body">
<p><a href="#" onmouseout="namosw_exchange_src('image1', 'bild2', 'document')"
onmouseover="namosw_exchange_src('image1', 'bild2', 'document')"><img src="bild1"
width="59" height="32" border="0" alt="bild1" name="image1"></a></p>
</body></html>
-
Hallo H4WK,
wo hast du denn dieses alte Skript ausgegraben? Das ist alles andere als allgemeingültig. Ich glaube Stefans Problem ist doch ein wenig komplexer.
Gruß Gernot
-
Hallo,
hier das Javascript, dass du brauchst für den Rollover Effekt,
für welchen Effekt an welcher Stelle in bezug auf sein geschildertes Problem hast Du denn nun dieses Script vorgesehen?
Und: ich gebe ja gerne zu, das das Script in selfhtml auch noch seine (eine) arge Macke hat (außer man zählt gerne image-Tags) aber ansonsten ist das doch tauglich - und selbst mich freigeistigen html-Chaoten schüttelst bei:
ich denke mal, dass die User, die auf die Website gehen eh mit dem
IE Explodierer Surfen werdenNichts gegen helfen-wollen, aber ein bissel Mühe gehört dann doch dazu ;-)
Chräcker
-
-
gruss Stefan
mein chef hätte gern auf der neuen Firmenhomepage (die ich großzügigerweise
programmieren darf) eine Europakarte.
Diese Karte soll mit Rollovereffekten versehen werden, bei klick auf ein
entsprechendes Land rechts neben der Karte der jeweilige Handelspartner
stehen und alles soll möglichst schnell geladen sein.
...
Rollovereffekte sind mit Javascript auch kein Problem - aber ich habe bei
den vielen Ländern Europas unheimlich viele Dateien die summiert viel zu
groß sind.
Kann man (um zur Frage zu kommen) einfach dieses Imagemap in ner
Kontrastfarbe erscheinen lassen? Dass man halt dieses Land über
welches man mit der Maus fährt statt blau gelb erscheinen lässt
oder führt kein Weg an einem eigenen Bild vorbei?mit html, css und javascript unter verwendung von maps funktioniert
browseruebergreifend nur die bildvariante, welche sich aber auf ein
einziges hintergrundbild beschraenken darf.
dieses bild stellt man sich am besten als microfilm vor, der mit
einem lesegeraet auch nur ausschnittsweise angesehen werden kann.bsp.: http://www.pseliger.de/testCases/countryMap.html
- angezeigt werden soll ein raster von 3x3 feldern.
- in der hover-faehigen version soll sich jedes einzelne
feld fuer das entsprechend "mouseover"-ereignis von
seiner umgebung abheben.
- die nicht hover-faehige variante fuer ausgeschaltetes
javascript muss auch noch beruecksichtigt werden.dies verlangt nach 11 bildzustaenden, integriert in ein einzelnes bild:
9.26 kByte bei einer groesse von 450px mal 600px
- das 3x3-raster rechts oben deckt den letztgenannten fall ab.
- das 3x3-raster links oben deckt den grundzustand aller laender ab.
- die folgenden 9 3x3-raster decken die "mouseover"-zusataende jedes
einzelnen landes ab.um zum ziel zu gelangen, muss der normale anwendungsfall fuer ein
HTMLImageElement etwas umgebogen werden, indem ein transparentes
_2_mal_2_pixel_gif_ als bildquelle zum einsatz kommt.die bildinformation erhalten wir jetzt ueber die css-regel fuer
dieses bild, die den bildhintergrund auf den ausschnitt fuer
javascript-verhinderte browser schiebt.
alle weiteren bildmanipulationen werden nach dem laden von
javascript-faehigen browsern initialisiert. dabei werden fuer
jedes HTMLAreaElement die eventhandler fuer "mouseover", "focus",
"mouseout" und "blur" definiert, deren funktionen sich um den
austauch der entsprechenden klassen-namen kuemmern.die logischen informationen stecken ohnehin im HTMLMapElement
und dessen HTMLAreaElementen, die deswegen einer gruendlichen
auszeichnung durch die "title"- bzw. "alt"- attribute beduerfen.Würde mich über Antworten freuen.
Danke dafür.
bitte
by(t)e by(t)e - peterS. - pseliger@gmx.net
--
"Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive." - Douglas Crockford
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]-
Hallo peterS.,
Deine Methode ist ziemlich genial, auch wenn es im IE6 (unterWin98) anders als in Opera7.54 und Mozilla 1.7.2 etwas flackert.
Was ich an deinem Quellcode im Moment nicht durchblicke ist u.a., wofür du deinen <area>-Elementen jeweils das Attribut
class="country"zuweist und warum du hier:img.country0 {background-position: 0px -150px;} img.country1 {background-position: -150px -150px;}usw.
mit dem Class- . statt mit dem ID-Selektor # arbeitest.
Gruß Gernot
-
gruss Gernot,
Was ich an deinem Quellcode im Moment nicht durchblicke ist u.a., wofür
du deinen<area>-Elementen jeweils das Attributclass="country"zuweist ...das ist eine entwicklungsleiche, ueber die ich auch gerade gestolpert
bin, und die ich gleich mal entsorgt habe.... und warum du hier:
img.country0 {background-position: 0px -150px;}
img.country1 {background-position: -150px -150px;}> usw. > > mit dem Class- . statt mit dem ID-Selektor # arbeitest. regeln ueber id-selektoren schieben alle klassen-regeln ins abseits. klassen aber werden unbedingt benoetigt, um die grundzustaende des bildes in browsern ohne als auch mit eingeschaltetem javascript zu beschreiben ("img.countryDefault" vs. "img.countryScript") desweiteren wird dem bild fuer das jeweilige "mouseover"- bzw. "focus"-ereignis eine klassennamen-kombination zugewiesen, die dann durch das jeweilige "mouseout"- bzw. "blur"-ereignis mit dem defaultwert fuer javascript-faehige browser wieder ueberschrieben wird: HTMLImageElement.className = "countryScript countryN"; vs. HTMLImageElement.className = "countryScript"; die klassennnamen-kombination benutze ich, weil das hintergrundbild immer dasselbe ist (regel: "img.countryScript") und nur noch in seiner position verschoben werden muss (regeln: "img.countryN"). by(t)e by(t)e - peterS. - pseliger@gmx.net -- "Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies. Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive." - Douglas Crockford ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]-
Hallo peterS.,
mit dem Class- . statt mit dem ID-Selektor # arbeitest.
regeln ueber id-selektoren schieben alle klassen-regeln ins abseits.
damit ist alles klar jetzt, danke!
Ich hoffe du lässt den Link noch eine Weile auf deiner Homepage. Hab ihn mir per Lesezeichen abgespeichert.
Ich finde ja eigentlich, dass das sogar mal was für einen Tipps-&-Tricks-Artikel wäre, sooft wie die Frage mit dem "Bereiche-Highlighten über Image-Map" hier in letzter Zeit gestellt wurde.
Gruß Gernot
-
hallo again Gernot,
Ich hoffe du lässt den Link noch eine Weile auf deiner Homepage. Hab ihn
mir per Lesezeichen abgespeichert.keine sorge, alle tests, die ich mal irgendwann fuer das forum verbrochen
habe, liegen noch immer und auch in zukunft unter meinem /testCase/-ordner.Ich finde ja eigentlich, dass das sogar mal was für einen Tipps-&-Tricks-Artikel
wäre, sooft wie die Frage mit dem "Bereiche-Highlighten über Image-Map"
hier in letzter Zeit gestellt wurde.ich weiss nicht - auf den meisten informativen css-seiten ist das
verschieben von hintergrundbildern schon seit 2(?) jahren abgehakt.by(t)e by(t)e - peterS. - pseliger@gmx.net
--
"Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive." - Douglas Crockford
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]-
Hallo peterS.,
ich weiss nicht - auf den meisten informativen css-seiten ist das
verschieben von hintergrundbildern schon seit 2(?) jahren abgehakt.aber in Verbindung mit Imagemaps und Javascript doch nicht, oder ist mir was entgangen?
Gruß Gernot
-
gruss Gernot,
aber in Verbindung mit Imagemaps und Javascript doch nicht, oder ist mir was
entgangen?noe - es liegt aber auf der hand, dass sich css-puristen von haus aus
ersteinmal die macht der selektoren zu nutze machen, welche in diesem
fall tatsaechlich erst ueber ein buendnis mit javascript und DOM richtig
zur entfaltung kommt - trotzdem handelt es sich hier nur um eine
kombination schon bekannter techniken.by(t)e by(t)e - peterS. - pseliger@gmx.net
--
Cheatah zu CSS in http://forum.de.selfhtml.org/archiv/2005/3/t104609/#m645300:
»CSS ist eigentlich ziemlich einfach. Das Problem ist, dass die meisten "CSS-Sprecher" nur über
einen sehr begrenzten Wortschatz verfügen - etwa im Stile von "will essen, jetzt", während echtes
CSS eher dem Rezitieren von Goethes Zauberlehrling entspricht.«
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]-
Hallo peterS.,
trotzdem handelt es sich hier nur um eine
kombination schon bekannter techniken.Das trifft auf alle Entdeckungen und Erfindungen zu; letztlich basiert alles auf dem Feuer, dem Rad, der Eins und der Null.
Gruß Gernot
-
hallo Gernot,
... letztlich basiert alles auf dem Feuer, dem Rad, der Eins und der Null.
ich gebe mich geschlagen - und um den anfang dieses argumentationspfades
mal wieder aufzunehmen, frage ich in die runde: "Soll aus dem Beispiel
wirklich ein Artikel zu 'Tipps & Tricks' werden?"so long - peterS. - pseliger@gmx.net
--
"Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive." - Douglas Crockford
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]-
Hi peterS.,
...frage ich in die runde: "Soll aus dem Beispiel
wirklich ein Artikel zu 'Tipps & Tricks' werden?"Wenn ich als Redakteur des Bereichs etwas dazu sagen darf:
Ich finde Deine Überlegungen interessant, das Thema wird oft
angefragt, das wäre also etwas für uns!Danke auch an Gernot, dass er besser als ich aufgepasst hat,
dass es hier etwas Interessantes zu lesen gibt!Viele Grüße
Mathias Bigge-
gruss Mathias,
Wenn ich als Redakteur des Bereichs etwas dazu sagen darf:
Ich finde Deine Überlegungen interessant, das Thema wird oft
angefragt, das wäre also etwas für uns!ok, ich meld' mich bei Dir per elektropost.
bis bald - peterS. - pseliger@gmx.net
--
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
-
-
-
-
-
-
-
-
-
-