✔ Fontangabe in JavaScript

Status
Nicht offen für weitere Antworten.
O

Ossi

Erfahrenes Mitglied
Ich suche schon eine ganze Weile nach einem universellen und einfachen Script für Menüs, die beim Mouseover von Links (Text) eine Voransicht bringen, die sich formatieren läßt.
Gumbo hatte einen Super-Script erstellt, nur ist er leider nicht so universell wie ich wollte, da ich ihn auch für die Voransicht von Schriftgrößen, Linienstärken, Farben usw. verwenden möchte.

Nun habe ich was passendes gefunden, nur gelingt es mir nicht, die Javascriptfunktion entsprechend zu formatieren (Schriftart, Schriftgröße). Hier das Beispiel:

<html>
<head>
<style type="text/css">
<!--
@font-face {
font-family: Schrift_1;
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: Schrift_2;
font-style: normal;
font-weight: normal;
}
.text { font-family: Verdana, Arial, Geneva, Monaco, Sans-Serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: normal}
a:link { text-decoration:none; font-weight:normal; color:#000000; }
a:visited { text-decoration:none; font-weight:normal; color:#000000; }
a:hover { text-decoration:none; font-weight:bold; background-color:#CCCCCC; }
a:active { text-decoration:none; font-weight:normal; background-color:#CCCCCC; }
-->
</style>
<script language="JavaScript">
function szeile(text) {
document.forms[0].linktext.value=text;
}
</script>
<title>Test</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p span class="text">
<a href="URL #1" onMouseOver="szeile('Schriftbeispiel 1')"
onMouseOut="szeile(' Bitte wählen')">Link 1<br>
</a><a href="URL #2" onMouseOver="szeile('Schriftbeispiel 2')"
onMouseOut="szeile(' Bitte wählen')">Link 2</a><br>
</p>
<form>
<p><input type="text" name="linktext" value=" Bitte wählen" size="30"></p>
</form>
</body>
</html>

Das Schriftbeispiel 1soll dabei in der Schrift_1, Size 4, und das Schriftbeispiel 2 in der Schrift_2, Size 4 dargestellt werden.

Wer kann mir bei der richtigen Notation helfen??
 

<script type="text/javascript" language="JavaScript">
function szeile(text,schrift,groesse) {
  box = document.forms[0].linktext;
  if(text!="" && schrift!="" && groesse!="")
    {
    box.value = text;
    box.style.fontFamily = schrift;
    box.style.fontSize = groesse+"px";
    }
  else
    {
    box.value = box.defaultValue;
    box.style.fontFamily = "Courier New";
    box.style.fontSize = 12+"px";
    }
  }
</script>

<a href="URL #1" onMouseOver="szeile('Schriftbeispiel 1','Verdana','10')" onMouseOut="szeile('')">Link 1</a><br>
<a href="URL #2" onMouseOver="szeile('Schriftbeispiel 2','Arial','10')" onMouseOut="szeile('')">Link 2</a>
</p>
<form>
<p><input type="text" name="linktext" value=" Bitte wählen" size="30" style="font-family:Courier New; font-size:12px;"></p>
</form>



Ich hab noch das vorheriege etwas erweitert und drangehangen.
 

Anhänge

  • schriftvergleich.txt
    2,6 KB · Aufrufe: 39
Danke, Gumbo, hat mir sehr geholfen. Auch der andere Script ist absolute Spitze. Ich hatte erst das Problem, daß es nicht lief, bis mir dann eingefallen ist, daß es ja auch an der Version des Internet Explorers liegen kann. Ich sitze nämlich hier am Mac G4 und da ich nur das OS 9.2.2 drauf habe, muß ich leider mit dem Internet Explorer 5.0 vorlieb nehmen, und der kann vieles noch nicht (z.B. auch kein CSS 2). Habe es mir aber dann auf einen Windows 2000-Rechner gemailt und dann lief es.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück