nicht angemeldet
Auge
Matthias Apsel
Auge
Gunnar Bittersmann
Gunnar Bittersmann
Camping_RIDER
Gunnar Bittersmann
Camping_RIDER
Gunnar Bittersmann
Hey,
ich hab folgendes Problem. Ich hab eine sag ich mal Index Seite auf der per Imagemap auf verschiedene Seiten weitergeleitet wird.
Nun möchte ich in einem freien Feld auf der JPG wechselnde Zitate anzeigen lassen.
Folgenden Javascript Code habe ich schon für die Zitate, jedoch fehlt mir der Lösungsansatz wie ich dieses Script über das Bild rübergebügelt kriege.
<SCRIPT language="JavaScript">
<!-- Verstecken für ältere Browser --
var quotenumber = 14 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (quotenumber-1) * randomnumber) + 1 ;
quotes = new Array
quotes[1] = "NACHRICHT #1"
quotes[2] = "NACHRICHT #2"
quotes[3] = "NACHRICHT #3"
quotes[4] = "NACHRICHT #4"
quotes[5] = "NACHRICHT #5"
quotes[6] = "NACHRICHT #6"
quotes[7] = "NACHRICHT #7"
quotes[8] = "NACHRICHT #8"
quotes[9] = "NACHRICHT #9"
quotes[10] = "NACHRICHT #10"
quotes[11] = "NACHRICHT #11"
quotes[12] = "NACHRICHT #12"
quotes[13] = "NACHRICHT #13"
quotes[14] = "NACHRICHT #14"
var quote = quotes[rand1]
// -- End Hiding Here -->
</SCRIPT>
<SCRIPT language="JavaScript">
<!-- Vertecken für ältere Browser --
document.write("" + quote + "")
// -- Ende Verstecken -->
</SCRIPT>
mfg
Hallo
ich hab folgendes Problem. Ich hab eine sag ich mal Index Seite auf der per Imagemap auf verschiedene Seiten weitergeleitet wird.
Nun möchte ich in einem freien Feld auf der JPG wechselnde Zitate anzeigen lassen.
Soll der Text Bestandteil des Bildes werden oder soll der Text als Text auf das Bild gelegt werden und so weiterhin als Text markierbar bleiben?
Tschö, Auge
Hey, danke für dein Interesse & vllt. auch deine Hilfe.
Der Text kann gerne ganz simpel über dem Bild abgelegt werden. Und wiegesagt nach jedem Refresh sollte zufällig ein neues Zitat geladen werden.
mfg
Wenn Interesse besteht lass ich dir gerne den derzeitigen Seitenlink zu kommen.
Hallo Robert Becker,
Wenn Interesse besteht lass ich dir gerne den derzeitigen Seitenlink zu kommen.
Nein, die Hilfe wird hier gern gegeben, aber niemals im dunklen Kämmerlein, sondern öffentlich, damit andere, die später vor einem ähnlichen Problem stehen, diese Lösung finden können.
Bis demnächst
Matthias
Hallo Robert Becker,
Wenn Interesse besteht lass ich dir gerne den derzeitigen Seitenlink zu kommen.
Nein, die Hilfe wird hier gern gegeben, aber niemals im dunklen Kämmerlein, sondern öffentlich, damit andere, die später vor einem ähnlichen Problem stehen, diese Lösung finden können.
Bis demnächst
Matthias--
> Signaturen sind bloed (Steel) und Markdown ist mächtig. Die Site URL ist southtown.de/testi.html
Die Site URL ist southtown.de/testi.html
Hallo
Signaturen sind bloed (Steel) und Markdown ist mächtig.
Die Site URL ist southtown.de/testi.html
Die Seite mit den zwei glattgebügelten Figuren ist die richtige Seite?
Das von Gunnar beanstandete JavaScript scheinst du ja schon entfernt zu haben, deshalb nur eine Anmerkung zu dem mit „Fernwartung“ bezeichneten Link. Dort ist eine *.exe verlinkt. Diese wird dem geneigten Besucher nur zum Download angeboten. Wenn dieses Verhalten gewünscht ist, gut; wenn nicht, beschreibe bitte das gewünschte Verhalten.
Tschö, Auge
@@Robert Becker
Folgenden Javascript Code habe ich schon für die Zitate
Es ist selten sinnvoll, Scripte einzusetzen, von denen man nicht mal ansatzweise versteht, was sie tun. Oder was für Unsinn sie tun – wie in diesem Fall.
<SCRIPT language="JavaScript">
language="JavaScript" war schon immer Unsinn. Weg damit!
HTML ist zwar nicht case-sensitiv; es ist aber gute Praxis, Bezeichener von Elementtypen und Attributen kleinzuschreiben: <script>.
<!-- Verstecken für ältere Browser --
HTML-Kommentar in JavaScript-Code ist Unsinn. „Verstecken für ältere Browser“ ist Unsinn.
var quotenumber = 14 ;
Die Anzahl der Zitate in eine Variable zu schreiben (und diese bei Hinzufügen oder Löschen von Zitaten ändern zu müssen!!) ist Unsinn. Die Zahl ergibt sich aus der Größe des Arrays quotes.length.
var randomnumber = Math.random() ;
Die Zufallszahl in eine Variable umzukopieren ist überflüssig.
var rand1 = Math.round( (quotenumber-1) * randomnumber) + 1 ;
Die Formel ist Unsinn. Sie ergibt keine Gleichverteilung der Zitate.
quotes = new Array
Auch wenn es in JavaScript nicht zwingend erforderlich ist, ist es doch dringend angeraten, Statements mit ; abzuschließen.
Globale Variblen sind zu vermeiden! Also var quotes = new Array();
quotes[1] = "NACHRICHT #1" quotes[2] = "NACHRICHT #2" quotes[3] = "NACHRICHT #3" quotes[4] = "NACHRICHT #4" quotes[5] = "NACHRICHT #5" quotes[6] = "NACHRICHT #6" quotes[7] = "NACHRICHT #7" quotes[8] = "NACHRICHT #8" quotes[9] = "NACHRICHT #9" quotes[10] = "NACHRICHT #10" quotes[11] = "NACHRICHT #11" quotes[12] = "NACHRICHT #12" quotes[13] = "NACHRICHT #13" quotes[14] = "NACHRICHT #14"
Arrays beginnen mit dem Index 0. Warum sollte da ein Feld verschwendet werden?
Die Durchnumerierung ist überflüssig; das kann JavaScript allein (auch besser fürs bei Hinzufügen oder Löschen von Zitaten):
var quotes = new Array(
"NACHRICHT #1",
"NACHRICHT #2",
"NACHRICHT #3",
⋮
"NACHRICHT #13",
"NACHRICHT #14"
);
Beachte, dass in JavaScript nach dem letzten Feld kein Komma stehen darf!
document.write("" + quote + "")
Die Stringkonkatenation mit Leerstrings ist überflüssig.
document.write() würde zwar in diesem Fall funktionieren, sollte aber besser generell vermieden werden.
Besser ist es, ein Element mit ID (blockquote bietet sich hier an; auch aside. Oder beides: blockquote in aside) zu haben und den Inhalt mit document.getElementById('…').innerHTML o.ä. zu befüllen.
LLAP
@@Gunnar Bittersmann
Besser ist es, ein Element mit ID (
blockquotebietet sich hier an; auchaside. Oder beides:blockquoteinaside) zu haben und den Inhalt mitdocument.getElementById('…').innerHTMLo.ä. zu befüllen.
Das könnte dann in etwa so aussehen:
<header>
<img src="…" alt="…" usemap="…"/>
<aside>
<blockquote id="quote-of-the-day"></blockquote>
</aside>
</header>
(header jetzt mal angenommen. Bei dir ist womöglich ein anderer Elementtyp passender, am Ende vielleicht sogar div.)
"quote-of-the-day" kannst du absolut innerhalb des Containerelements positionieren, was dazu aber auch positioniert sein muss:
header
{
position: relative;
}
#quote-of-the-day
{
position: absolute;
top: …;
left: …;
width: …;
height: …;
overflow: hidden;
}
Statt width und height wären auch right und bottom denkbar.
Wichtig ist overflow: hidden, damit ein Zitat nicht wichtige Elemente (die Menüpunkte) überdeckt, wenn es länger sein sollte.
LLAP
@@Robert Becker
ich hab folgendes Problem. Ich hab eine sag ich mal Index Seite auf der per Imagemap auf verschiedene Seiten weitergeleitet wird.
Da haben wir das Problem. Imagemap funktioniert nur, wenn das Bild nicht skaliert wird. Bei responsive design – also bei Webdesign – werden Bilder aber skaliert.
Wie soll denn deine Seite auf einem Smartphone aussehen und bedienbar sein?
LLAP
PS: Man kriegt verweissenitive Grafiken auch responsiv hin, aber nicht mit <img usemap>, sondern mit SVG.
Gut also vielleicht hätte ich noch dazu sagen müssen das ich mich erst seit gestern mit HTML PHP JS und sonstigem beschäftige. Ich bin Auszubildender im ersten Lehrjahr und habe mega Respekt vor eurem Wissen wie ich in den Antworten herauslesen kann. Leider hab ich bis jetzt außer Copy&Paste und mit NVU zu arbeiten nicht viel gemacht.
Soll heißen, könnte mir jemand das schrittweise erklären? Bis jetzt lese ich leider nur das das JS Script kacke ist und ich mein Vorhaben mit Imagemap nicht realisieren kann. mfg
Hallo
Gut also vielleicht hätte ich noch dazu sagen müssen das ich mich erst seit gestern mit HTML PHP JS und sonstigem beschäftige. Ich bin Auszubildender im ersten Lehrjahr und habe mega Respekt vor eurem Wissen wie ich in den Antworten herauslesen kann. Leider hab ich bis jetzt außer Copy&Paste und mit NVU zu arbeiten nicht viel gemacht.
Gut, soviel zur Einordnung.
Soll heißen, könnte mir jemand das schrittweise erklären?
Kommt Zeit, kommt Rat, kommt …
Wir helfen bei der Selbsthilfe. Das beinhaltet auch, schrittweise zu fragen und zu antworten. Alles auf einmal zu erklären, wird dich, so vermute ich nach deiner Selbsteinschätzung, verwirren. Alles auf einmal zu wollen, funktioniert per se nie.
Bis jetzt lese ich leider nur das das JS Script kacke ist …
Ich habe jetzt zwar nur Gunnars Kommentare gelesen, das Skript also nicht selbst studiert, siene Kritikpunkte lassen aber zumindest vermuten, dass ich dir nur zustimmen kann.
… und ich mein Vorhaben mit Imagemap nicht realisieren kann.
Doch, kannst du. In bestimmten Einsatzszenarien, z.B. bei der Anzeige auf einem Spartphone, wird diese Lösung aber ungünstig sein.
Tschö, Auge
@@Robert Becker
Gut also vielleicht hätte ich noch dazu sagen müssen das ich mich erst seit gestern mit HTML PHP JS und sonstigem beschäftige. Ich bin Auszubildender im ersten Lehrjahr und habe mega Respekt vor eurem Wissen wie ich in den Antworten herauslesen kann. Leider hab ich bis jetzt außer Copy&Paste und mit NVU zu arbeiten nicht viel gemacht.
Soll heißen, könnte mir jemand das schrittweise erklären?
1. Schritt: Zitate im Array ablegen, wie von mir gezeigt.
2. Schritt: Zufällig eins davon auswählen.
Schade, dass beim Umkopieren von molilys Artikel ins Wiki das Intro verlorengegangen ist: „Der folgende Artikel basiert auf Beiträgen von Gunnar Bittersmann und Jürgen Berkemeier im SELFHTML Forum. Vielen Dank an die beiden.“ Dort waren vielleicht sogar die entsprechenden Beiträge verlinkt.
Vielleicht war es dieser. Im darauffolgenden findest du, wie’s richtig geht.
Statt anzahl nimmst du gleich die Größe des Arrays, wie gezeigt.
3. Schon hast du den Index für ein zufällig usgewähltes Zitat, das du – wie gesagt – zur Not auch per document.write() an die ensprechende Stelle schreiben kannst.
und ich mein Vorhaben mit Imagemap nicht realisieren kann.
Doch, kannst du. Ist dann halt auf Smartphones Kacke.
LLAP
@@Gunnar Bittersmann
Erstens, zweitens, erstens?
Go home, CForum 4, you’re drunk.
LLAP
Hallo Gunnar Bittersmann,
Erstens, zweitens, erstens?
Go home, CForum 4, you’re drunk.
1. Vorschau benutzen
2. Änderungen vornehmen
3. speichern
4. wundern
5. Änderungen vornehmen
6. speichern
Und natürlich beginnt eine neue geordnete Liste wieder bei 1.
Ich habs oben mal geändert.
Zudem hat sich hier noch ein CSS-Fehler verborgen, den es im alten Forum niemals gegeben hätte:
Hier kann es in den Beitragstexten auch ol- und ul-Elemente geben. Die notwendigen Stylevereinbarungen für den Threadbaum gelten dann auch innerhalb des Beitragstextes. Das ist natürlich nicht erwünscht. Ich bin sicher, Christian repariert das innerhalb kürzester Zeit. Erschwerend kommt hinzu, dass die ol innerhalb der Vorschau nicht in einem Baum steckt, sodass in der Vorschau die List-Items eine Nummerierung tragen, die sie bei der endgültigen Antwort in der nested-Ansicht verlieren. Abhilfe schafft
.thread-nested .posting-content ol { list-style-type: inherit; }
Das sind so Dinge, die eben nur auffallen, wenn es auch eine Vielzahl an Beiträgen gibt, bei denen dann natürlich auch so einiges schief gehen kann.
Bis demnächst
Matthias
@@Matthias Apsel
1. Vorschau benutzen
Ich habs oben mal geändert.
Danke. Und „usgewähltes“ so gelassen. Danke. ;-)
LLAP
Hallo Gunnar Bittersmann,
Ich habs oben mal geändert. Danke. Und „usgewähltes“ so gelassen. Danke. ;-)
Ich hab tatsächlich überlegt … ;-)
Bis demnächst
Matthias
Hallo Matthias,
[...] Abhilfe schafft
.thread-nested .posting-content ol { list-style-type: inherit; }
Fixed.
LG,
CK
Hallo Gunnar Bittersmann,
Schade, dass beim Umkopieren von molilys Artikel ins Wiki das Intro verlorengegangen ist: „Der folgende Artikel basiert auf Beiträgen von Gunnar Bittersmann und Jürgen Berkemeier im SELFHTML Forum. Vielen Dank an die beiden.“ Dort waren vielleicht sogar die entsprechenden Beiträge verlinkt.
Hm. Das war mir nicht bewusst. Der Satz ist jetzt wieder drin. Nein, die Links verw[ie|ei]sen auf eure Homepages.
Bis demnächst
Matthias
Aloha ;)
Da haben wir das Problem. Imagemap funktioniert nur, wenn das Bild nicht skaliert wird. Bei responsive design – also bei Webdesign – werden Bilder aber skaliert.
Seit wann bitte ist es für responsive design essentiell, dass Bilder skaliert werden? Da würde ich widersprechen. Das ist bitteschön ein kann, nicht ein muss. Und dementsprechend kann unter Umständen natürlich auch Imagemap weiter eingesetzt werden - wenn ich dir auch darin Recht gebe, dass SVG sicher die sauberere Lösung ist.
Grüße,
RIDER
@@Camping_RIDER
Seit wann bitte ist es für responsive design essentiell, dass Bilder skaliert werden?
Schon seit immer?
Da würde ich widersprechen. Das ist bitteschön ein kann, nicht ein muss.
Ja, es sind kleine Bilder denkbar, die nicht skaliert werden.
Und dementsprechend kann unter Umständen natürlich auch Imagemap weiter eingesetzt werden
Ein großes Bild, das horizontal aus dem Viewport herausragt, ist sicher nicht im Sinne von responsive design.
wenn ich dir auch darin Recht gebe, dass SVG sicher die sauberere Lösung ist.
Wobei man das auch nicht so klein skalieren sollte, dass man nichts mehr erkennen kann. Oder dass die sensiblen Bereiche so klein/so eng aneinander sind, dass man sie nicht mehr richtig anwählen kann.
Aber dafür gibt’s ja media queries.
LLAP
Aloha ;)
Ein großes Bild, das horizontal aus dem Viewport herausragt, ist sicher nicht im Sinne von responsive design.
Vollkommen unbestritten. Wobei groß auch Definitionsfrage ist, ich würde mich mal soweit aus dem Fenster lehnen, dass es vertretbar ist, anzunehmen, dass grundsätzlich mindestens eine Viewport-Breite von 400px verfügbar ist. Und 400px sind schon ganz respektabel. Aber natürlich - es kommt auf die Anwendung an.
Wenn das Bild mitskalieren soll, weil es zentraler Inhalt der Seite ist, ist SVG natürlich unumgänglich und imagemap, wie du schon sagtest, schlicht unpraktikabel.
Oder dass die sensiblen Bereiche so klein/so eng aneinander sind, dass man sie nicht mehr richtig anwählen kann.
Für letzteres muss ich den mobilen Browserherstellern ausnahmsweise ein Kompliment machen: Dass bei vielen mobilen Browsern bei unklarem "Tippen" eine vergrößerte Teilansicht aufpoppt finde ich löblich. Das entschärft die Problematik für den Webentwickler wieder etwas.
Grüße,
RIDER
Hallo
Ein großes Bild, das horizontal aus dem Viewport herausragt, ist sicher nicht im Sinne von responsive design.
Vollkommen unbestritten. Wobei groß auch Definitionsfrage ist, ich würde mich mal soweit aus dem Fenster lehnen, dass es vertretbar ist, anzunehmen, dass grundsätzlich mindestens eine Viewport-Breite von 400px verfügbar ist. Und 400px sind schon ganz respektabel. Aber natürlich - es kommt auf die Anwendung an.
Auf der nun offensichtlich vom Netz genommenen Testseite diente eine Grafik mit mehr als 1000 Pixeln Breite als Basis der Imagemap. Das ist dann doch schon recht groß. Die ganze Diskussion ist natürlich hinfällig, wenn die Seite nicht auf einem kleinen Display angezeigt werden sollte. Aber dazu haben wir ja keine Infos.
Tschö, Auge
Hallo
Ein großes Bild, das horizontal aus dem Viewport herausragt, ist sicher nicht im Sinne von responsive design.
Vollkommen unbestritten. Wobei groß auch Definitionsfrage ist, ich würde mich mal soweit aus dem Fenster lehnen, dass es vertretbar ist, anzunehmen, dass grundsätzlich mindestens eine Viewport-Breite von 400px verfügbar ist. Und 400px sind schon ganz respektabel. Aber natürlich - es kommt auf die Anwendung an.
Auf der nun offensichtlich vom Netz genommenen Testseite diente eine Grafik mit mehr als 1000 Pixeln Breite als Basis der Imagemap. Das ist dann doch schon recht groß. Die ganze Diskussion ist natürlich hinfällig, wenn die Seite nicht auf einem kleinen Display angezeigt werden sollte. Aber dazu haben wir ja keine Infos.
Tschö, Auge
--
> Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen! Bin nebenbei am Arbeiten kann nicht immer sofort zurück schreiben :P Also die Testseite ist immernoch online. http://southtown.de/testi.html Die Anzeige auf Smartphones ist erstmal außen vor. Die Zitate sollen am besten in den unteren linken Bereich der orange ist. Und zu deiner Download Frage, ja das ist so gewollt das ist unser Fernwartungstool für Kunden. mfg
Bin nebenbei am Arbeiten kann nicht immer sofort zurück schreiben :P Also die Testseite ist immernoch online. http://southtown.de/testi.html Die Anzeige auf Smartphones ist erstmal außen vor.
Die Zitate sollen am besten in den unteren linken Bereich der orange ist.
Und zu deiner Download Frage, ja das ist so gewollt das ist unser Fernwartungstool für Kunden.
mfg
Hallo
Bin nebenbei am Arbeiten kann nicht immer sofort zurück schreiben :P
Das ist normal und dies hier kein Chat.
Also die Testseite ist immernoch online. http://southtown.de/testi.html
Oh, dann war die wohl kurz (zumindest von mir aus) nicht erreichbar.
Die Zitate sollen am besten in den unteren linken Bereich der orange ist.
Ok, fangen wir damit an.
zu 1. Wo und wie groß dieser Bereich ist, kannst du ja z.B. mit einem Grafikprogramm oder mit passenden, im Browser laufenden Entwicklertools auslesen. Du brauchst den Abstand des Bereichs von links und oben sowie die Breite und Höhe des Bereichs.
zu 2. Über den orangenen Bereich gehört, wie hier von Gunnar angesprochen (siehe: letzter Absatz), ein HTML-Blockelement mit einer ID hin. Damit es sich auf dem Bild befinden kann, muss es positioniert und in den Vordergrund geholt werden.
Beispiel für einen möglichen Aufbau:
<header>
<img src="landing.png" usemap="#map" border="0" height="740" width="1420">
<div id="zitatbox"></div>
</header>
/*
Nimmt den header aus dem Elementfluss, belässt ihn ohne weitere
Angaben zur Position aber an der Stelle, wo er sowieso steht.
*/
header {
position: relative;
}
/* Angaben zur Zitatbox */
#zitatbox {
position: absolute; /* positioniert die Box absolut innerhalb von header */
left: XXXpx; /* Abstand der Box von links */
top: XXXpx; /* Abstand der Box von oben */
width: XXXpx; /* Breite der Box */
height: XXpx; /* Höhe der Box */
z-index: 1; /* hole die Box in den Vordergrund */
}
Warte aber mal kurz ab, es kommen bestimmt noch Verbesserungsvorschläge zum Code. Zum JavaScript-Teil, der das schlussendlich mit Leben erfüllen soll, soll sich bitte jemand anderer äußern. Da bin ich nicht firm genug.
Nun noch ein paar grundsätzliche Worte zum Aufbau der Seite. Du hast eine große Grafik, die sich offensichtlich über die gesamte Breite der Seite erstrecken soll. Das tut sie dann nicht, wenn der Viewport des Browsers (die zur Anzeige der Seite zur Verfügung stehende Fläche im Browser) breiter ist. Die Grafik steht dann einfach links oben in der Ecke.
Sinnvoll aufgebaut wäre es z.B., wenn die Welle eine einzelne Grafik als Hintergrundbild wäre, weil damit sichergestellt wäre, dass sie die ganze Seite ausfüllt. Wenn dann auch das Logo und der Link zum Fernwartungstool eigene Grafiken wären, hättest du als Imagemap nur noch das Hauptbild selbst.
Das bedeutet zwar einen etwas größeren Aufwand beim positionieren der einzelnen Grafiken, damit sie an der gewünschten Stelle angezeigt werden, macht dich aber flexibler in Sachen Code und Anzeigegröße der Seite.
Tschö, Auge
Super! Ich danke dir für die ganzen Vorschläge, ich versuch das mal bis morgen alles umzusetzen und würde mich hier dann nochmal melden falls ich Probleme habe.
Ihr habt mir bis hier hin super geholfen, danke euch allen.
@@Auge
zu 1. Wo und wie groß dieser Bereich ist, kannst du ja z.B. mit einem Grafikprogramm oder mit passenden, im Browser laufenden Entwicklertools auslesen. Du brauchst den Abstand des Bereichs von links und oben sowie die Breite und Höhe des Bereichs.
Oder anstatt Breite und Höhe die Abstände von rechts und unten, wie ich schon sagte.
Beispiel für einen möglichen Aufbau: <div id="zitatbox"></div>
Und warum hast du aus meinem aside/blockquote ein nichtssagendes div gemacht?
LLAP
@@Robert Becker
Nun möchte ich in einem freien Feld auf der JPG wechselnde Zitate anzeigen lassen.
Folgenden Javascript Code habe ich schon für die Zitate
Ein Nachteil der JavaScript-Lösung ist, dass sämtliche Zitate vom Server zum Client geschickt werden. Das mag bei 14 Zitaten nicht besonders ins Gewicht fallen, aber die Lösung skaliert nicht für viele Zitate. Es wird unnötig viel Quelltext für nur ein angezeigtes Zitat übertragen.
Besser wäre es, wenn das Script auf dem Server läuft, z.B. in PHP. Das sieht dann (bis auf geringfügig andere Syntax) genauso aus. Dort wird das Zitat zufällig ausgewählt und nur dieses eine in den HTML-Quelltext geschrieben.
LLAP