<img>-Tag - wie bleibt der Text stehen mit "alt" oder "title"?

[Tamara-Jasmin]

Hi,
bastel jetzt seit fast 45 Min. am Image-Tag rum.

So sieht mein Code aus:

<img src="./images/cs-info.jpg" title="CS-INFO:">

Zuallererst bringt mir scriptly (ein Skript-Editor) einen Fehler, bei dem Endtag (>), - funktionieren tut es im Test aber trotzdem. Vielleicht auch eine Fehlinterpretation von Skriptly?

Das Hauptproblem aber ist folgendes:

Ich hätte gerne, dass der Infotext stehen bleibt!
Fährt man mit der Maus drüber, bleiben bei der Masse des Textes keine 5 Sek. zum lesen. (Der Text wurde hier im Beispiel nur auf ein Wort beschränkt).
Kann ich irgendwo die Zeit einstellen, dass der Text solange angezeigt wird, solange man mit der Maus drauf bleibt?

In Google habe ich Javascript gefunden, den ich auch da reinkopiert habe - das bringt mir allerdings meinen kompletten PC zum Absturz - habe das also wieder verworfen.

Wäre nett wenn da jemand eine kleine Info für mich hat!

Liebe Grüsse:
Tammy

[jade.78]

Wegen dem fehler bei Skriptly kann ich dir vielleicht helfen.
Versuch's mal so:

<img src="./images/cs-info.jpg" title="CS-INFO:" />

Bei dem anderen weiß ich da leider gerade keine Antwort drauf.

EDIT:
oder du versuchst es auch noch mit alt="CS-INFO:"

[Tamara-Jasmin]

Auf Dich ist verlass! Das ging ja echt schnell mit der Antwort - WHOW.

Danke, das hat schonmal gepasst - dachte ich hatte das schonmal getestet - scheinbar aber doch nicht .

Liebe Grüsse:
Tammy

[jade.78]

Funktioniert es auch, dass der Text stehen bleibt?

Ich hab gerade mal auf meiner privaten HP geguckt und dort bleibt der Info-Text stehen, solange man mit der Maus drauf bleibt. Ich hab alt und Title drin stehen.

[Tamara-Jasmin]

Nein, das hat sich leider nicht geändert. Ca. 5 Sekunden - dann ist es wieder weg. Habe jetzt auch beides eingetragen - aber keine Änderung.

So, ich geh mal schnell mit meinen Hunden - bin gleich wieder da Mal sehen was noch geschrieben wird dazu.

Liebe Grüsse:
Tammy

[jade.78]

Guck mal über einen anderen Browser. Im Opera und FF bleibt der Text stehen, im IE geht er nach ein paar Sekunden weg.

[Tamara-Jasmin]

Bringt mir nicht viel, da wohl mind. 70% IE verwenden - weshalb das auch dort funktionieren sollte
Hast Du eigentlich in alt und Title den selben Text stehen? Bei 6 Zeilen wäre das schon recht nervig in meinem Code


Liebe Grüsse:
Tammy

[jade.78]

Was genau hast du denn vor?
Du könntest ja auch eine Art Infobox dafür nutzen, die du per CSS konfigurieren kannst. Es gibt dafür auch genug Möglichkeiten ohne Javascript.

[Tamara-Jasmin]

Es geht um ein Formular für einen Wartungsvertrag, der Online abgeschlossen werden soll.

Hinter den einzelnen Wartungsoptionen ist ein Info-Bild eingefügt - dieses soll detailiierte Informationen über diese Option bieten, aber ich will nicht 100x alles mit <a href ...html...> verlinken. Stelle ich sämtliche Informationen mit ins Forumular ein, ist soviel Text vorhanden, dass die wählbaren Optionen nicht ordentlich lesbar sind. Muss ja auch nicht sein

Liebe Grüsse:
Tammy

[jade.78]

Wäre das hier vielleicht eine Möglichkeit dafür? Klick

[Tamara-Jasmin]

Leider nicht, weil das Infobild nur 25*10px gross ist. Dieses Bild ist nur eine Informationsgrafik dass dort etwas mehr zu erfahren ist

[jade.78]

Guck mal hier Klick

Da steht, wie man Infoboxen erstellt und Beispiele gibt's auch dazu.

[Tamara-Jasmin]

Ja ist das G... ...äh ... Grossartig !!!!!
Genau so habe ich mir das vorgestellt!
Werde ich Montag gleich probieren! Danke Dir, dass Du Dir die Zeit genommen hast.
Hatte in google wohl den falschen Suchbegriff (gebe immer ein "HTML <teil vom tag>" und schau was es da so gibt .
Die Seite kenne ich aber gut - alle 30 Min. komme ich mit meinen Sonderwünschen oder "Tag-Erweiterungsfragen" dort hin
Ist meiner Meinung nach die am besten gestaltete Seite was HTML betrifft - Informationsgehalt mehr als Klasse! Die Suchfunktion sollte ich dort wohl mal direkt nutzen, verwende
fast ausschliesslich google und klicke mich so durch. Der Suchbegriff Infobox bei selfhtml.org hätte mich auch zu Deinem Artikel geführt (musste das doch mal testen *g), bin aber auf den
Begriff gar nicht gekommen <pfeiff>.

Gute Nacht und liebe Grüsse:
Tammy

[Tamara-Jasmin]

Hi, konnte nicht anders und musste heute nochmal in den Laden um zu basteln
Nur nochmal eine etwas - für Dich sicherlich - "dumme" Frage zum CSS.
In manchen Codes sehe ich - wie in Deinem Link - eine "#" und dann den Code.
Da ich derzeit aber gerade mal in CSS eine Schriftart und Grösse zuordnen kann, kenne ich
dies nur so:
.style {...code; } ist das nur eine andere möglichkeit, oder etwas ganz anderes?

Liebe Grüsse:
Tammy

[Tamara-Jasmin]

Wäre übrigens zu schön gewesen diese Infobox einzubinden. Aber man kann sie scheinbar nicht auf ein Bild zuordnen.
Je nach Auflösung des Betrachtenden verschiebt sich ja die ganze Seite - die Infobox bleibt aber durch die absolute
Position an ihrer Stelle und verzerrt dadurch das Gesamtbild. Und für jedes Bild müsste ich eine neue CSS Box schaffen.
Leider bin ich mit dem CSS nicht wirklich Firm (auch wenn ich das nur kopieren und die Koordinaten ändern müsste),
womit ich Deinen Link leider verwerfen muss. Werde mich die Tage in Google nochmal nach einer anderen Lösung
umsehen, wo ich die Info direkt mit dem Bild verbinden kann.
Danke Dir aber nochmal!

Liebe Grüsse:
Tammy

[jade.78]

Ich weiß gerade nicht so genau, was du meinst.

Mit # ist eine id gemeint und mit . ist eine Klasse gemeint.

Ich persönlich mach das bei HP's so, dass ich für einen gesamten Container eine ID vergeb, als #container in die css schreibe.
Und für allen Inhalt in diesem Container vergebe ich eine Klasse dann, also .inhalt

[jade.78]

Das dritte Beispiel ist doch mit verlinktem Bild.
Und so schlimm ist das eigentlich gar nicht, für jedes Bild eine eigene Klasse zu vergeben.

[Tamara-Jasmin]

Habe einfach noch ein wenig Angst vor CSS, weil ich da wirklich von 0 anfangen muss.
mein VisualBasic ist 20 Jahre her, das ist mir vertraut
mein HTML ist ca. 10 Jahre her - da geht auch noch was - diese beiden Komponenten
bin ich gerade täglich am auffrischen - aber wenn jetzt noch CSS dazukommt ... oje

Das dritte Beispiel hatte ich mir auch angesehen, allerdings müsste ich da den Mausklick
irgendwie wegbekommen, weil das Bild in einem Formular liegt und wahrscheinlich wieder
zurückgesetzt wird wenn die info ein href_self durchführt. Mal sehen was ich vom Code
auslesen und selber ändern kann - aber wie gesagt ... trau mich da nicht so recht ran

Liebe Grüsse:
Tammy

[Tamara-Jasmin]

Das kommt dem alles schon sehr nahe.
Weist Du zufällig wo da ein Umbruch stattfindet?
Das Bild, dass sich eigentlich direkt hinter dem Text befindet, wird nun UNTER den Text gesetzt - also in eine neue Zeile.

Habe jetzt den Code mal auf das Minimum reduziert, nun sieht es so aus:

img {
border:none;
}
#box{
height:20px;
width:50px;
padding:0;
margin:0px;
border:0px solid black;
font:bold 14px verdana, sans-serif;}
#box div{display:none;}
#box:hover div{
display:block;
width:300px;
background-color: #FFFFFF;
border:1px dashed black;
padding:15px;
font:normal 14px verdana, sans-serif;}

<div id="box"><img src="./images/cs-info.jpg" alt="CS-INFO:"/>
 <div>
 Lorem ipsum dolor sit amet.
 </div>

Liebe Grüsse:
Tammy

[jade.78]

Was meinst du genau mit Umbruch?

Du kannst ja mal mit padding oder margin versuchen, die Box oder das Bild zu verschieben.