31.01.2008
Mini-Jobofferte: flexibeles barriere-armes Bildwechsel-Script
Ich benötige möglichst gestern folgendes barrierearme Javascript, das auch im IE5 funktioniert.
Mouseover auf Thumb namens ‘logo_firma.jpg’ tauscht das große Bild ‘xy-unbekannt.jpg’ in der Tabellenzelle-Zelle mit der Klasse ‘preview’ gegen ’screenshot_firma.jpg’. Beide Bilder Thumb bzw. Logo und Screenshot befinden sich im selben Bildordner.
‘firma’ steht hier für den Platzhalter der diversen Firmen.
‘xy-unbekannt’ steht für ein Bild das sich jederzeit ändern kann und dann u.U. weder Klasse noch ID besäße.
Alle Bilder sind in einer Tabelle mit der ID ‘partner’ und die Tabellenzellen mit den Thumbs haben die Klasse ‘partnerlogo’.
Das Script darf jQuery verwenden.Ups. Ich lerne noch und habe auf die Kompatibilität nicht geachtet. Siehe Kommentar von Stefan B.- Sollte Objektorientiert sein (http://blog.templaterie.de/index.php?s=objektorientiert+java…)
- Barrierearm, also DOM-Tree und Eventhandler verwenden und absolut ohne inline-javascript auskommen.
- Bildbezeichnungen aus dem HMTL ermitteln (vom this.img.src des thumbs unter dem Mauszeiger für das Vorschaubild vom Thumbnamen logo_ gegen screenshot_ austauschen)
- Keine Javascript-Fehler ausgeben, wenn kein passender Screenshot gefunden werden kann oder das Bild zum Austauschen fehlt.
Budget ist nicht üppig aber angemessen.
Wenn es heute noch klappen könnte, wäre riesig. Ich vermeide Programmieren, wenn ich kann und wenn dies stressfrei klappt, dann sehe ich eine lange Businessfreundschaft.
Gerne nehme ich auch sachdienliche Hinweise zu fertigen Scripts im Netz entgegen.
Kontakt unter info bei silkester.de oder unter Telefon 07191-910091 von 11 am wird dann doch eher Nachmittag werden … bis knapp vor Mitternacht und heute noch bis 1 am.
Mit Hilfe von Stefan (Trafex.de) ist eine Lösung gefunden, die schon sehr gut ist, auch wenn sie zu meinem großen Bedauern im CMS selbst noch rumzickt. Hilfe nehme ich daher immer noch gerne an, die Dringlichkeit ist nicht mehr so gegeben. Demo funktioniert tadellos. Siehe Kommentare. Eine ganz dickes Danke an Stefan für die tolle Unterstützung.
Filed under: Programmierung
4 Comments
February 1st, 2008 at 00:15
Hallo Silke, Deine Anforderungen verwirren mich etwas. Auf der einen Seite hättest du gerne kompatibilität mit dem IE5, auf der anderen Seite darf man jQuery verwenden. Laut Doku ist jQuery IE6+ Kompatibel. Weiterhin beherrscht der IE5 meines wissens nach noch kein DOM (bzw nur sehr begrenzt), unterstützung kam hier erst ab dem IE5.5
Sei’s ‘drum. Ich habe mal etwas gebastelt. Vor allem aus sportlichem Ehrgeiz
Das ganze setzt nur in sehr geringem Teil auf DOM auf. Auch verwende ich kein objektorientiertes Javascript und schon garkein jQuery (mag ich nicht, zum größten Teil persönliche Preferenz, zum kleinen Teil auch da jQuery gegenüber Mootools (setzte ich privat ein) und prototype etwas langsamer ist.
Ob es nun Barrierearm ist kann ich auch nicht sagen.
Getestet mit dem IE5.5, 6 und 7 sowie aktueller Firefox, sollte aber theoretisch auch mit dem IE4 laufen.
http://trafex.de/demos/jsimageswitch/jsimageswitch.html
Die Funktion die bei onload aufgerufen wird kann man theoretisch auch am Ende der Datei aufrufen. Das ist aber auch das einzige Inline Javascript welches man verwenden muss. Alles andere macht das Script selbst.
Viel Spass und danke für dieses tolle Blog.
February 1st, 2008 at 00:30
Oh, vielen Dank. Das Script wird auf einer Seite für Maschinenbau-Firmen eingesetzt werden und da sind alte MS IE gerne noch anzutreffen. Das jQuery nicht im IE5 läuft ist damit ein Knockout. Die Wahrscheinlichkeit, dass es sich nun mit anderem Javascript beißt ist in diesem Fall gering, das heißt die absolute Kür mit OOP muss nicht sein.
Und ob DOM oder andere Javascript-Funktionen genutzt werden, die HTML vom Javascript frei halten ist letztlich auch nicht wichtig.
Super, Danke. Damit dürfte ich heute Nacht doch noch etwas Schlaf bekommen.
Wie geschrieben vermeide ich Programmieren, so gut ich kann und damit fange ich fast jedes mal von Null an. Meine Kenntnisse sind schwach ausgeprägt.
Was die Klasse beim Thumb anbelangt, so ist das möglich aber fehleranfällig, weil das eingesetzte CMS Editland die Klasse u.U. auch in den Absatz oder den Link setzt. Insbesondere wenn die Assistenzkraft einen Partnerlogo ergänzt oder austauscht. Weswegen ich die Klasse in die nicht editierbare Tabellencelle gesetzt habe. Meine DOM und Javascript-Kenntnisse sind zu schwach ausgeprägt um beurteilen zu können, ob man mit dem DOM-Tree diesbezüglich in IE 5 noch etwas anfangen kann oder wie die Funktion dann aussehen muss. Aber ich lerne.
BTW: in meinem MS IE 5.01 standalone funktioniert Deine Seite mit dem Script.
February 1st, 2008 at 07:27
Hallo Silke, das ist mir nachher auch aufgefallen.
Schau dir mal http://trafex.de/demos/jsimageswitch/jsimageswitch2.html an. Gefällt mir zwar noch nicht so wie es funktioniert, aber das ist ja nicht immer hauptsache.
February 1st, 2008 at 21:50
Wenn Du am Ende des Scriptes
window.onload = funktionsname;setzt kannst du Dir dasonLoadim<body>auch noch schenken und es ist immer noch mit den ‘noch’ im Web zu findenden alten Browsern kompatibel.Quirksmode: Event compatibility tables
Ich bereite gerade eine kleine Präsentation Deier beiden Scripts vor. Das zweite auch noch mit PHP nachgetunt, so dass man mit PHP ganzleicht auch noch den Tagnamen ändern kann, in dem die thumbs untergrbracht ist. Ich hoffe, das geht für Dich in Orndung. Links und Credentials natürlich dabei.