Hover-Effekt für Buttons

Chickeweck · Beitrag von **Chickeweck** » 28.03.2006 20:46

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

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.

Elvis · Beitrag von **Elvis** » 29.03.2006 01:25

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.

miccom · Beitrag von **miccom** » 29.03.2006 09:32

besser, weil ohne javascript:
http://www.1ngo.de/web/bildwechsel.html

Elvis · Beitrag von **Elvis** » 29.03.2006 12:40

Sorry ich kenn nur diesen Weg aber dank miccom kenn ich jetzt noch nen anderen

miccom · Beitrag von **miccom** » 29.03.2006 12:52

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.

Chickeweck · Beitrag von **Chickeweck** » 29.03.2006 17:10

Danke für die Antworten schonmal, aber das von Elvis funktioniert irgendwie nicht und das andere raff ich nicht so ganz

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

Elvis · Beitrag von **Elvis** » 29.03.2006 17:31

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 ???

Chickeweck · Beitrag von **Chickeweck** » 29.03.2006 18:04

Verstehen tu ichs schon, nur funktionierts nicht wenn ichs mach...vielleicht bin ich einfach zu blöd dazu

miccom · Beitrag von **miccom** » 29.03.2006 18:14

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.

Chickeweck · Beitrag von **Chickeweck** » 29.03.2006 18:21

Und wie änder ich das ?