Schrift formatieren

[Robert]

Hallo,

wenn ich mit der Maus über ein Bild fahre, soll der Text neben dem Bild fett erscheinen. Ich weiß, dass ich das Ereignis mit onmouseover abfangen kann. Wie bekomme ich damit aber den Text fett?

Robert

[JürgenB]

Hallo Robert,

die gibst dem Text eine Id

<p id="machFett">Etwas Text</p>

und dem Bild gibst du die Eventhandler

  
<img ... onmouseover="document.getElementById('machFett').style.fontWeight='bold'"  
         onmouseout="document.getElementById('machFett').style.fontWeight='normal'">

Ich habe hier einfach mal zusätzlich eingebaut, dass der Text auch wieder normal wird. Beachte auch den Einsatz von " und ' (String in String).

Links hierzu:

http://de.selfhtml.org/javascript/sprache/eventhandler.htm
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
http://de.selfhtml.org/javascript/objekte/style.htm
http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_weight

Gruß, Jürgen

PS Mein Beispiel ist jetzt nicht getestet, Tipp- aber auch andere Fehler sind möglich.

[Robert]

Hallo Jürgen,

danke für den Tipp. Funktioniert einwandfrei.

Robert

[Robert]

Ich muss mich noch einmal einklinken.

Ich habe den Code soweit abgeändert, dass Farbe und Format (Fett) geändert wird. Den Code mal für ein Bild:

---

var a="design/bild_on"; var b="bild_off.gif";
image1on.src=a; image1off=b;

funtion showme(theImageName)
{
if(document.images)
   {
   document[theImageName].src = eval(theImageName+"on.src";
   document.getElementById.style.color="#880000";
   document.getElementById.style.fontWeight="bold";
   }
}

funtion goaway(theImageName)
{
if(document.images)
   {
   document[theImageName].src = eval(theImageName+"off.src";
   document.getElementById.style.color="#000000";
   document.getElementById.style.fontWeight="normal";
   }
}

<A HREF="seite.htm" onMouseOver="showme('image1');" onMouseOut="goaway('image1');"><IMG SRC="image_off" NAME="image1"></A><FONT SIZE=4 ID="image1">Text</FONT>

---

Interessanterweise funtktionert das Ändern des Textes mit folgenden Browsern wie folgt:

Mozilla 1.01 - ändert Text-Farbe und -Format
MS IE 6.0 - keine Änderung
Netscape 4.7 - keine Änderung
Opera 5.12 - ändert nur die Farbe
Opera 9.25 - keine Änderung

Das Netscape nichts macht ist klar, da diese Funktionen nicht unterstützt werden. Was bei Opera und IE los ist, verstehe ich nicht.

Wie kann ich den Code denn so hinbiegen, dass er auch unter Opera 9.25 und IE 6.0 funktioniert?

P.S.: Ich weiß dass die Verwendung von <FONT> veraltet ist.

[ChrisB]

Hi,

funtion showme(theImageName)
{
if(document.images)
   {
   document[theImageName].src = eval(theImageName+"on.src";
   document.getElementById.style.color="#880000";
   document.getElementById.style.fontWeight="bold";
   }
}

Wenn du das wirklich *so* geschrieben hast - was willst du dann eigentlich alles per eval auswerten lassen ...?

Abgesehen davon ist eval natuerlich reichlich bloedsinnig, wenn lediglich eine simple Stringverkettung gemacht werden soll.

MfG ChrisB

[JürgenB]

Hallo Robert,

var a="design/bild_on"; var b="bild_off.gif";
image1on.src=a; image1off=b;

hier würde ich ein var davorschreiben.

funtion showme(theImageName)
{
if(document.images)
   {
   document[theImageName].src = eval(theImageName+"on.src";

Ich würde dem Bild eine ID geben und mit getElementById arbeiten. Dann solltest du natürlich die Verfügbarkeit von document.getElementById prüfen. Das eval ist hier überflüssig.

document.getElementById.style.color="#880000";
   document.getElementById.style.fontWeight="bold";

Auf welche ID wird hier zugegriffen?

}
}

funtion goaway(theImageName)
{
if(document.images)
   {
   document[theImageName].src = eval(theImageName+"off.src";
   document.getElementById.style.color="#000000";
   document.getElementById.style.fontWeight="normal";

siehe oben.

}
}

<A HREF="seite.htm" onMouseOver="showme('image1');" onMouseOut="goaway('image1');"><IMG SRC="image_off" NAME="image1"></A><FONT SIZE=4 ID="image1">Text</FONT>

Namen und IDs würde ich nie gleich wählen. Wie oben schon geschrieben, würde ich Bild und <font..> unterschiedliche IDs geben. <font...> würde ich außerden durch <span...> ersetzen und dann per css formatieren. Da du jetzt schon zwei Eigenschaften änderst, könntest du auch zwei CSS-Klassen anlegen und beim <span> nur den Klassennamen (className) ändern.

Gruß, Jürgen

[Robert]

Hallo Jürgen,

Das eval ist hier überflüssig.

Wenn ich das eval weglasse, dann funktioniert der Code nicht mehr. Soweit ich das verstanden habe, gibt eval den Dateinamen des Bildes zurück. Und theImageName+"on.src" ergibt z.B. nur image1on.src als String. Das es sich dabei eine Variable handelt wird nicht betrachtet.

Ich würde dem Bild eine ID geben und mit getElementById arbeiten.

Dann funktioniert es aber nicht mehr mit Netscape.

document.getElementById.style.fontWeight="bold";

Auf welche ID wird hier zugegriffen?

Oh... sorry. Richtig muss es heißen:

document.getElementById(theImageName).style.fontWeight="bold";

Namen und IDs würde ich nie gleich wählen.

Wurde mit Absicht so gewählt, da ich jetzt nur den Namen des Bildes benötige ==> kurzer Code.

<font...> würde ich außerden durch <span...> ersetzen und dann per css formatieren.

Dann funktioniert es aber nicht mehr mit Netscape. Aus diesem Grund die Verwendung von <FONT>.

Robert

[Robert]

Ich hab' mich noch mal reingekniet um den Fehler zu finden. Letztendlich lag es daran, dass Opera 9.25 und IE 6.0 mit den gleichen Namen von NAME="image1" und ID="image1" nicht klargekommen sind. (Worauf Jürgen ja bereits hingewiesen hat.) Aus diesem Grund habe ich den Code wie folgt ergänzt:

---

var a="design/bild_on.gif"; var b="bild_off.gif";
image1on.src=a; image1off.src=b;

funtion showme(theImageName)
{
if(document.images)
   {
   document[theImageName].src = eval(theImageName+"on.src");
   document.getElementById(theImageName+"a").style.color="#880000";
   document.getElementById(theImageName+"a").style.fontWeight="bold";
   }
}

funtion goaway(theImageName)
{
if(document.images)
   {
   document[theImageName].src = eval(theImageName+"off.src");
   document.getElementById(theImageName+"a").style.color="#000000";
   document.getElementById(theImageName+"a").style.fontWeight="normal";
   }
}

<A HREF="seite.htm" onMouseOver="showme('image1');" onMouseOut="goaway('image1');"><IMG SRC="image_off" NAME="image1"></A><FONT SIZE=4 ID="image1a">Text</FONT>

---

Jetzt funktioniert es wie es soll. Lediglich Opera 9.25 spuckt eine folgenlose Fehlermeldung aus, wenn man den Browser nach Benutzung des Codes schließt. Scheint sich um einen internen Programmfehler bei der Verarbeitung des Codes zu handeln.

Robert

[robert]

Nachtrag:

image1on.src=a; image1off=b;

hier würde ich ein var davorschreiben.

Oh... mein Fehler. Es muss natürlich heißen:

image1off.src=b;

Und davor kann ich kein var setzen, da .src eine Eigenschaft von images ist.