Navigation mit Hover-Buttons

[modbo]

Deine phpBB Version: 2.0.15
Typ Deines phpBB Forums: Premodded phpBB
MODs: Ja
Dein Wissensstand: Grundwissen
Link zu Deinem Forum: http://www.svbomber.de

PHP Version:
MySQL Version:


Was hast Du gemacht, bevor das Problem aufgetreten ist?
Die Standard-Navigationslinks in der overall_header.tpl gegen Images getauscht.


Was hast Du bereits versucht um das Problem zu lösen?
Ein bisschen unter http://www.on-mouseover.de/ gespickt ;o)



Fehlerbeschreibung und Nachricht

Die Navigation wird folgendermaßen zusammengebastelt:

Code: Alles auswählen

# fisubsilversh.cfg
...
// Navigation
$images['button_portal'] = "$current_template_images/{LANG}/button_portal.gif";
$images['button_forum'] = "$current_template_images/{LANG}/button_forum.gif";
...


# overall_header.tpl
...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" class="topnav">
<a href="{U_PORTAL}">{BUTTON_PORTAL}</a><a href="{U_INDEX}">{BUTTON_FORUM}</a> ...


# page_header.php
...
$template->assign_vars(array(
'BUTTON_PORTAL' => '<img src="' . $images['button_portal'] . '" alt="' . $lang['Home'] . '" title="' . $lang['Home'] . '" border="0" />',
'BUTTON_FORUM' => '<img src="' . $images['button_forum'] . '" alt="' . $lang['Forum'] . '" title="' . $lang['Forum'] . '" border="0" />',
...

Nun sollen sich die Buttons beim Überfahren mit der Maus ändern, d.h. das entsprechende Image soll gegen ein anderes getauschr werden.

Hat jemand einen Tip, wie ich das am geschicktesten hinbekommen?

[oxpus]

So vielleicht:

Code: Alles auswählen

# overall_header.tpl vor </head>

<script language="Javascript" type="text/javascript">
<!--
function switch(image_name, image_hover, image_norm, mode)
{
	if (mode == 'hover')
	{
		document.image_name.src = image_hover;
	}
	else
	{
		document.image_name.src = image_norm;
	}
}
//-->
</script>



# page_header.php

$template->assign_vars(array( 
'BUTTON_PORTAL' => '<img src="' . $images['button_portal'] . '" name="portal" onmouseover="javascript:switch(\'portal\', \''.$images['button_portal_hover'].'\', \''.$images['button_portal'].'\', \'hover\');"  onmouseout="javascript:switch(\'portal\', \''.$images['button_portal_hover'].'\', \''.$images['button_portal'].'\', \'\');" $alt="' . $lang['Home'] . '" title="' . $lang['Home'] . '" border="0" />', 
'BUTTON_FORUM' => '<img src="' . $images['button_forum'] . '" onmouseover="javascript:switch(\'forum\', \''.$images['button_forum_hover'].'\', \''.$images['button_forum'].'\', \'hover\');"  onmouseout="javascript:switch(\'forum\', \''.$images['button_forum_hover'].'\', \''.$images['button_forum'].'\', \'\');" alt="' . $lang['Forum'] . '" title="' . $lang['Forum'] . '" border="0" />', 
...

Soweit zumindest die Theorie. Probiers aus...

[modbo]

Probiert, aber es hovert nichts.

Ich hab es jetzt erstmal nur für den Portal-Button probiert.
Fehlt dort evtl. noch die Verabeitung von image_norm?
Müsste im zweiten Link name="forum" vor onmouseover?

[oxpus]

Öhm ja, das 2. Image müsste den Namen "Forum" bekommen. Mein Fehler.
Hm und wenn nicht gehovert wird, dann mal ein Formular um den Bereich in der tpl packen. So in etwa:

Code: Alles auswählen

<form action="" name="image_hover">
...
Images
...
</form>

und das Script für die overall_header.tpl muss dann so heissen:

Code: Alles auswählen

<script language="Javascript" type="text/javascript">
<!--
function switch(image_name, image_hover, image_norm, mode)
{
	if (mode == 'hover')
	{
		document.image_hover.image_name.src = image_hover;
	}
	else
	{
		document.image_hover.image_name.src = image_norm;
	}
}
//-->
</script>

[modbo]

Ich hoffe, du bist mir nicht böse, wenn ich das nicht mehr ausprobiere.
Zum einen hab ich das mit dem Forular nicht verstanden, zu anderen hab ich es gerade so gelöst:

Code: Alles auswählen

'BUTTON_PORTAL' => '<img src="' . $images['button_portal'] . '" alt="' . $lang['Home'] . '" title="' . $lang['Home'] . '" border="0" style="filter:alpha(opacity=100)" onMouseOver="this.filters.alpha.opacity=50" onMouseOut="this.filters.alpha.opacity=100" style="filter:alpha(opacity=100)" onMouseOver="this.filters.alpha.opacity=50" onMouseOut="this.filters.alpha.opacity=100" />',

Erfordert kein zusätzliches Skript und erfüllt seinen Zweck

[oxpus]

Auch eine Möglichkeit.

[modbo]

[quote="oxpus - Di 31.Mai, 2005 18:34";p="33980"]Auch eine Möglichkeit.[/quote]
Ja, zudem ich festgestellt habe, dass die Funktion als solche im phpBB Plus schon vorhanden ist
Integriert in der *.css; *.cfg, zusätzlich mit dem Zusatz, dass die "Einfärbung" auch im Firefox angezeigt wird.
Somit konnte ich die Funktion einfach dublizieren, anpassen.

Code: Alles auswählen

# fisubsilversh.css
.navfade{filter:alpha(opacity=60); -moz-opacity:0.6}
.navfull{filter:alpha(opacity=100); -moz-opacity:1}

# fisubsilversh.cfg
$nfade = 'onmouseover="this.className='navfade'" onmouseout="this.className='navfull'';

...

$images['button_portal'] = "$current_template_images/{LANG}/button_portal.gif" class="navfull" " . "$nfade";

Trotzdem Danke für deine Bemühungen!