Seite 1 von 4

Buttons und Text

Verfasst: 24.05.2004 18:58
von Julian
dies sind buttons die auf mouseover reagieren:

<html>
<head>
<title>navigation</title>
<meta name="author" content="simon">
<meta name="keywords" content="navigation, dj cannie">
<script type="text/javascript">


Normal1 = new Image();
Normal1.src = "http://julianlindenberg123istichbins.s4 ... lieder.gif";
Highlight1 = new Image();
Highlight1.src = "http://julianlindenberg123istichbins.s4 ... seover.gif";

Normal2 = new Image();
Normal2.src = "http://julianlindenberg123istichbins.s4 ... m/Home.gif";
Highlight2 = new Image();
Highlight2.src = "http://julianlindenberg123istichbins.s4 ... 20over.gif";

Normal3 = new Image();
Normal3.src = "http://julianlindenberg123istichbins.s4 ... com/PM.gif";
Highlight3 = new Image();
Highlight3.src = "http://julianlindenberg123istichbins.s4 ... SEOVER.gif";

Normal4 = new Image();
Normal4.src = "http://julianlindenberg123istichbins.s4 ... Profil.gif";
Highlight4 = new Image();
Highlight4.src = "http://julianlindenberg123istichbins.s4 ... seover.gif";

Normal5 = new Image();
Normal5.src = "http://julianlindenberg123istichbins.s4 ... SUCHEN.gif";
Highlight5 = new Image();
Highlight5.src = "http://julianlindenberg123istichbins.s4 ... SEOVER.gif";

Normal6 = new Image();
Normal6.src = "http://julianlindenberg123istichbins.s4 ... LOGGEN.gif";
Highlight6 = new Image();
Highlight6.src = "http://julianlindenberg123istichbins.s4 ... SEOVER.gif";

Normal7 = new Image();
Normal7.src = "http://julianlindenberg123istichbins.s4 ... teBuch.gif";
Highlight7 = new Image();
Highlight7.src = "http://julianlindenberg123istichbins.s4 ... seover.gif";

function Bildwechsel(Bildnr,Bildobjekt)
{window.document.images[Bildnr].src = Bildobjekt.src;}
</script>

</head>
<body bgproperties="fixed" link="#1ABEFD" alink="#11D516" vlink="#1ABEFD" bgcolor="FFFFFF">



<br>
<a target="main" href="-------------------"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"><img src="http://julianlindenberg123istichbins.s4 ... lieder.gif" alt="Home" border="0"></a>

<a target="main" href="-----------------"
onMouseOver="Bildwechsel(1,Highlight2)"
onMouseOut="Bildwechsel(1,Normal2)"><img src="http://julianlindenberg123istichbins.s4 ... m/Home.gif" alt="Home" border="0"></a>

<a target="main" href="-------------------"
onMouseOver="Bildwechsel(2,Highlight3)"
onMouseOut="Bildwechsel(2,Normal3)">
<img src="http://julianlindenberg123istichbins.s4 ... com/PM.gif" alt="Private Masseges" border="0"></a>

<a target="main" href="-----------------------"
onMouseOver="Bildwechsel(3,Highlight4)"
onMouseOut="Bildwechsel(3,Normal4)">
<img src="http://julianlindenberg123istichbins.s4 ... Profil.gif" alt="Profil" border="0"></a>

<a target="main" href="---------------"
onMouseOver="Bildwechsel(4,Highlight5)"
onMouseOut="Bildwechsel(4,Normal5)">
<img src="http://julianlindenberg123istichbins.s4 ... SUCHEN.gif" alt="Suchen" border="0"></a>

<a target="main" href="-------------------"
onMouseOver="Bildwechsel(5,Highlight6)"
onMouseOut="Bildwechsel(5,Normal6)"><img src="http://julianlindenberg123istichbins.s4 ... LOGGEN.gif" alt="Ausloggen" border="0"></a>

<a target="main" href="---------"
onMouseOver="Bildwechsel(6,Highlight7)"
onMouseOut="Bildwechsel(6,Normal7)"><img src="http://julianlindenberg123istichbins.s4 ... teBuch.gif" alt="Geste Buch" border="0"></a>



</body>
</html>


Wenn sich aber statt einem Bild, der Text sich bei mouseover ändern soll was muss ich dann eingeben???

und im welchem verzeichnis finde ich die datei: common.php ??

Verfasst: 24.05.2004 20:36
von Markus67
Hi ...

Textveränderungen kannst du über CSS realisieren ...
entweder in der overall_header.tpl oder bei aktivierten Stylesheets in der entsprecheden css-Datei ...
http://selfhtml.teamone.de/css/intro.htm

Die commo.php findest du im Forumroot ...

Markus

Verfasst: 25.05.2004 13:29
von Julian
ich finde da nichts kann mir vieleicht jeman erklähren wie man das macht???

Verfasst: 25.05.2004 13:41
von Markus67
Hi ...

Was willst du denn genau machen ?

Was findest du nicht ?

Markus

Verfasst: 25.05.2004 13:51
von Julian
ich wil einen link erstellen , der bei mouseover vergrößert und bei onMouseOut wieder klein wird!!!!

Verfasst: 25.05.2004 13:53
von Markus67
Hi ...

also unterschiedliche Schriftgröße beim "Hoover"-Effekt ....

Und wo soll der Link stehen ?

Lass dir doch nicht alles einzeln aus der Nase ziehen ... :D

Markus

Verfasst: 25.05.2004 14:18
von Julian
ich wil diesen effekt in die Menueleiste einbauen ich habe ja auch schon mal sowas mitt bildern erstellt siehe oben!!!!!!!

Verfasst: 25.05.2004 14:40
von Markus67
Hi ...

in der overall_header.tpl bzw. dem Stylesheet ist das Aussehen der Links definiert ...

Code: Alles auswählen

/* General text */
.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover	{ color: #DD6900; text-decoration: underline; }


/* The register, login, search etc links at the top of the page */
.mainmenu		{ font-size : 11px; color : #000000 }
a.mainmenu		{ text-decoration: none; color : #006699;  }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }


/* Forum category titles */
.cattitle		{ font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}
a.cattitle		{ text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }


/* Forum title: Text and link to the forums used in: index.php */
.forumlink		{ font-weight: bold; font-size: 12px; color : #006699; }
a.forumlink 	{ text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }


/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav			{ font-weight: bold; font-size: 11px; color : #000000;}
a.nav			{ text-decoration: none; color : #006699; }
a.nav:hover		{ text-decoration: underline; }


/* titles for the topics: could specify viewed link colour too */
.topictitle			{ font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link   { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover	{ text-decoration: underline; color : #DD6900; }
Jetzt musst du nur die "Hoover"-Definition entsprechend verändern und schon hast du den gewünschten Effekt ....

Oder du legst dir eine neue Class-Definition an spezielle für dein Menü

Und wenn du es detaillierter wissen möchtest .... dann bräuchte ich die URL zu deinem Forum .... denn sonst tippe ich nur im "Dunkeln" rum ...

Markus

Verfasst: 25.05.2004 15:32
von Julian

Code: Alles auswählen

/* The register, login, search etc links at the top of the page */
.mainmenu                { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu                { text-decoration: none; color : {T_BODY_LINK};  }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }
was muss ich jetzt in dieser textzeile ändern das die schrifft grß wird??

{ text-decoration: underline; color : {T_BODY_HLINK}; }

Verfasst: 25.05.2004 15:44
von Markus67
Hi ...

Code: Alles auswählen

a.mainmenu:hover{ font-size : {T_FONTSIZE3}px; text-decoration: underline; color : {T_BODY_HLINK}; }
Markus