Seite 1 von 2

Hover-Effekt für Buttons

Verfasst: 28.03.2006 20:46
von Chickeweck
Schönen guten Abend,

ich möchte die Buttons in meinem Forum mit dem Hover-Effekt ausstatten, nur weiss ich leider nicht wie ich den Code in der overall_header.php abändern muss :oops:

Hier ein Codeblock als Beispiel:

Code: Alles auswählen

&nbsp;<a href="{U_MEMBERLIST}" class="mainmenu"><img src="templates/LLC/images/Mitglieder.gif" width="150" height="40" border="0" alt="{L_MEMBERLIST}" hspace="3" /></a>&nbsp; 
Wäre nett wenn mir jemand helfen könnte.

Verfasst: 29.03.2006 01:25
von Elvis
suche in templates/subSilver/overall_header.tpl

Code: Alles auswählen

<!-- BEGIN switch_enable_pm_popup -->
füge dadrüber ein

Code: Alles auswählen

<script language="Javascript" type="text/javascript">
<!--
/* Menu */
	image1 = new Image;
	image1.src = "{MENU_MEMBERS_OVER}";
	image2 = new Image;
	image2.src = "{MENU_MEMBERS}";

	image3 = new Image;
	image3.src = "{MENU_PROFILE_OVER}";
	image4 = new Image;
	image4.src = "{MENU_PROFILE}";

//-->
</script>
suche in templates/subSilver/subSilver.cfg

Code: Alles auswählen

//
// Vote graphic length defines the maximum length of a vote result
// graphic, ie. 100% = this length
//
$board_config['vote_graphic_length'] = 205;
$board_config['privmsg_graphic_length'] = 175;
füge dadrunter ein

Code: Alles auswählen

//Menu
// Custom Template Variables
$current_template_lang_images = ( file_exists(@phpbb_realpath($phpbb_root_path . 
$current_template_path . '/images/lang_' . $board_config['default_lang'])) ) ? 
$current_template_path . '/images/lang_' . $board_config['default_lang'] : 
$current_template_path . '/images/lang_' . 'english';

$template->assign_vars(array(
'MENU_MEMBERS' => $current_template_lang_images . "/menu_members_off.gif",
'MENU_MEMBERS_OVER' => $current_template_lang_images . "/menu_members_on.gif",

'MENU_PROFILE' => $current_template_lang_images . "/menu_profile_off.gif",
'MENU_PROFILE_OVER' => $current_template_lang_images . "/menu_profile_on.gif"
	)
	);
die Buttons fügste dann in der overall_header.tpl mit folgendem Code ein
für Profil

Code: Alles auswählen

<a href="{U_PROFILE}" onmouseover="button01.src=image1.src" onmouseout="button01.src=image2.src"><img src="{MENU_PROFILE}" border="0" alt="{L_PROFILE}" title="{L_PROFILE}" name="button01" /></a>
für Mitgliederliste

Code: Alles auswählen

<a href="{U_MEMBERLIST}" onmouseover="button03.src=image3.src" onmouseout="button03.src=image4.src"><img src="{MENU_MEMBERS}" border="0" alt="{L_MEMBERLIST}" title="{L_MEMBERLIST}" name="button03" /></a>
Die Buttons müßen dann zb so heissen

-- menu_profile_off.gif
-- menu_profile_on.gif

-- menu_members_off.gif
-- menu_members_on.gif

Die Buttons müßen dann in "templates/subSilver/images/lang_german" liegen.

Verfasst: 29.03.2006 09:32
von miccom
besser, weil ohne javascript:
http://www.1ngo.de/web/bildwechsel.html

Verfasst: 29.03.2006 12:40
von Elvis
Sorry ich kenn nur diesen Weg aber dank miccom kenn ich jetzt noch nen anderen :)

Verfasst: 29.03.2006 12:52
von miccom
Elvis hat geschrieben:Sorry ich kenn nur diesen Weg aber dank miccom kenn ich jetzt noch nen anderen :)
das tolle an der css-version ist, dass keine bilder nachgeladen werden - somit wirkt der effekt flüssiger. ältere browser haben zwar probleme damit und zeigen dann keinen hoovereffekt an, aber das problem ist bei deaktiviertem js genauso vorhanden.

Verfasst: 29.03.2006 17:10
von Chickeweck
Danke für die Antworten schonmal, aber das von Elvis funktioniert irgendwie nicht und das andere raff ich nicht so ganz :oops:

Ich stell mal meine overall_header zur Verfügung, vielleicht hat ja einer die Geduld mir zu erklären was genau ich abändern muss. Die Variante von miccom würde mir ganz gut gefallen.

overall_header

Verfasst: 29.03.2006 17:31
von Elvis
wenn Du alles richtig gemacht hast smuß es Funktionieren denn ich Arbeite gerade an einem Style wo das drinn eingebaut ist. Zeigen kann ich dir es nciht da es noch Local auf meinem Rechner liegt.

deine Overall_heder stimmt ja garnicht denn der HTML Code kommt immer hinter dem hier.

Code: Alles auswählen

</head>
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
und was genau verstehste nicht bei meinem Code ???

Verfasst: 29.03.2006 18:04
von Chickeweck
Verstehen tu ichs schon, nur funktionierts nicht wenn ichs mach...vielleicht bin ich einfach zu blöd dazu :cry:

Verfasst: 29.03.2006 18:14
von miccom
auf jedenfall sieht deine overall_header.tpl etwas falsch aus, html-tabellen-code im header bereich ist nicht konform und hat da auch nichts verloren.

Verfasst: 29.03.2006 18:21
von Chickeweck
Und wie änder ich das ?