Headergrafik bei mouseover ändern

[DerTheo]

Gibt es hierzu eine Mod oder einen Trick?

Ich würde gerne eine andere Grafik anzeigen lassen, sobald man mit der Maus über den Header fährt. Ziel ist eine Art "Bewegung" oder "animation" zu simulieren. Ich denke das Aufbauen der Grafik sollte dabei kein Problem geben.

Gibt es hierzu eine Mod?

Grüße
Der Theo

[hackepeter13]

Hmmm, das Thema hat sicherlich ehr was mit Style und Template oder Codding zutun, als mit Mod-Suche, denn dafür braucht man keinen Mod sondern schlicht und einfach entweder nur ein html/css- oder Javascript-Script.

Solche kleinen Scripte findet man eigentlich mehr als massig bei Tante Google, dazu einfach mal mousover Grafik oder so eintippen.

Viele Menüs und Buttons haben mousover-Effekte und diese könnte man als auch auf eine Headergrafik anwenden und dabei gibt es wie gesagt die einfach Möglichkeit mittels css oder wenn es mit mehr Effekte oder so sein soll, mit Javascript.

[BNa]

Erkläre das mal näher. Welche Grafiken sollen sich wie ändern?
Soll das wie ein Ausschnitt eines kleinen Filmchens sein (à la: zeige den nächsten Anigif-Frame onmouseover)?
Oder sollen Grafiken aus einem Random-Grafik-Pool angezeigt werden?
Fomuliere das mal etwas präziser, da es da unendlich Möglichkeiten gibt.

[DerTheo]

Wenn ich mit der Maus über meinen Header fahre, soll statt der aktuellen Header_Grafik_A die Header_Grafik_B angezeigt werden.
Sobald ich die Maus vom Header wegbewege, soll statt Header_Grafik_B wieder Header_Grafik_A erscheinen.

@hackepeter13
Durchs Googlen wurde ich leider nicht schlaucher: folgendes habe ich gefunden:
http://www.on-mouseover.de/script1.htm

Ich müsste das ganze ja im overall_header verwusteln... leider habe ich da keine Ahnung

[darkonia]

sowas kann man auch easy durch css machen

[hackepeter13]

@hackepeter13
Durchs Googlen wurde ich leider nicht schlaucher: folgendes habe ich gefunden:
http://www.on-mouseover.de/script1.htm

Ich müsste das ganze ja im overall_header verwusteln... leider habe ich da keine Ahnung

Steht doch alles da du öffnest die styles/DEINSTYLE/template/overall_header.html in einen Textbearbeitungsprogramm (Beispiel: Notepad++) und fügst den ersten Teil (Javascript-Code) vor </head> und den zweiten Teil dahin wo der deine Headergrafik ist/sein soll. Bei prosilver wäre das für die Headergrafik:

Code: Alles auswählen

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>

den du dann in folgendes ändern könntest:

Code: Alles auswählen

<a href="{U_INDEX}" title="{L_INDEX}" id="logo" onmouseover="austausch1.src='{T_IMAGESET_PATH}/logo2.jpg';" onmouseout="austausch1.src='{T_IMAGESET_PATH}/logo1.jpg';"><img src="logo1.jpg" border="0" width="71" height="60" name="austausch1"></a>

Hier auch die Angaben "width" und "height" anpassen!

Und natürlich im Javascript-Codeteil die Pfad und Dateinamen anpassen!

PS: Nach Style Änderungen nicht vergessen: ACP -> Cache leeren

[Talk19zehn]

Hello,

sowas kann man auch easy durch css machen

stimmt. Da das Thema hier aufgegriffen wurde, hier eine Version der Umsetzung eines Hovereffekts auf eine Grafik mittels CSS.

Mit CSS ginge es bspw. u.a. in der Form, einen Hoverefffekt auf einer Grafik anzuwenden. Du hast eine Grafik 520px breit und 115px hoch. In einem Grafikprogramm erweiterst du die Fläche auf 520px x 230px.
In die untere Hälfte setzt du passgenau die zweite Grafik ( Hovereffekt ) ein.

CSS in der common.css am Ende hinzufügen und bitte u.a. den Bildpfad der Klasse .meinhoverbild1 anpassen.

Code: Alles auswählen

.hoverbild {
width: 520px;
height: 115px;
display: block;
margin: 0 auto;
}

.meinhoverbild1 {
background: url(http://www.meineadresse.xx/images/eigenebilder/meinhoverbild520x230.jpg) no-repeat;
}

.hoverbild:hover {
background-position: 0 -115px;
}

Ausgabe: Verweise bitte anpassen
overall_header.html

Code: Alles auswählen

<br />
<a href="http://www.meineganzandereadresse.xx" class="hoverbild meinhoverbild1"></a>
<br />

Oder:

Code: Alles auswählen

		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>
			<a href="http://www.meineandereadresse.xx" class="hoverbild meinhoverbild1"></a>
			<span class="corners-bottom"><span></span></span></div>
		</div>

Oder:

Code: Alles auswählen

		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>
			
			<p><a href="{U_INDEX}" title="{L_INDEX}" class="hoverbild meinhoverbild1"></a></p>
			<div id="site-description">
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<span class="corners-bottom"><span></span></span></div>
		</div>

Ergebnisse: Hovereffekt vgl. Mauszeiger ( nur einmalig in dem Bild vorhanden )

[ externes Bild ]

Viele Grüße



Edit:
Da es sich hier um pures CSS und HTML handelt, verschiebe ich den Beitrag mal in die "richtigere Rubrik" .
Die Grafik ist eine von mir persönlich erstellte.
LG

[andyc]

Hallo wollte den mouseover effekt einfügen in mein subsilver 2 basierter style einfügen kommt aber nur ein schwarzes bild

Overallheader:

<div id="logodesc">
<table width="100%" cellspacing="0">
<tr>
<td align="center"><a href="{U_INDEX}" title="{L_INDEX}" class="hoverpic myhoverpic1"></a></td>
</tr>
<tr>
<td align="center"><h1 style="color:#FFBF00" >{SITENAME}</h1>
<tr>
<td width="100%" align="center" style="color:#FFBF00"><span class="gen">{SITE_DESCRIPTION}</span></td>
</tr>
</table>
</div>
Stylesheet.css :

.hoverpic {
width: 600px;
height: 700px;
display: block;
margin: 0 auto;
}

.myhoverpic1 {
background: url('./images/site_logo.png') no-repeat;
}

.hoverpic:hover {
background-position: 0 -700px;
}


Vielen dank für die hilfe

[hackepeter13]

@andyc
Es wäre sehr Hilfreich wenn du Codezeilen auch mit einem BBCode-Code schreiben würdest (also [code]codezeilen[/ code] ).

Zudem kommt, das bei sowas immer schwer zu helfen ist, wenn man selber keinen richtigen Einblick in das ganze hat.
Sprich ein Link wäre ganz hilfreich, damit man sich mal genauer ein Bild von der Sache machen kann.

Frage, wie sieht das "site_logo.png" denn aus?
Bei dieser Art und Weise, muss es 1400px hoch sein - sprich es müssen beide Logos (die 700px hoch sind) in einer Grafik sein - oben das normale Loge und dadrunter das hover-Logo.
Ist das nicht der Fall, wird logischerweise kein hover-Logo angezeigt, da das normale ja um 700px nach oben verschoben wird, wenn man mit der Mauso rüberfährt.

[andyc]

Vielen dank

Die gesamt grafik ist 1400 px hoch aber es wird weder das eine noch das ander angezeigt, hier ist die adresse www.teamwardogs.com/php username: tester passwort : tester ( board ist in Franzosich )

Overallheader:

Code: Alles auswählen

<div id="logodesc">
<table width="100%" cellspacing="0">
<tr>
<td align="center"><a href="{U_INDEX}" title="{L_INDEX}" class="hoverpic myhoverpic1"></a></td>
</tr>
<tr>
<td align="center"><h1 style="color:#FFBF00" >{SITENAME}</h1>
<tr>
<td width="100%" align="center" style="color:#FFBF00"><span class="gen">{SITE_DESCRIPTION}</span></td>
</tr>
</table>
</div>

Stylesheet.css :

Code: Alles auswählen

Stylesheet.css :

.hoverpic {
width: 600px;
height: 700px;
display: block;
margin: 0 auto;
}

.myhoverpic1 {
background: url('./images/site_logo.png') no-repeat;
}

.hoverpic:hover {
background-position: 0 -700px;
}