Zum Inhalt springen

Mouseover Effekt für einzelne Buttons

Erstellt am 18. August 2004 · 5 Antworten · letzte Antwort am 19. August 2004

Tags: HTML & CSS, Frage

aviereck ·

Hey,

ich habe im Bannerbereich einer Seite einige Buttons (Weiterempfehlung, Link auf Hauptseite, Link auf Suche etc.).

Ich muss für diese Buttons einen Mouseover Effekt realisieren.

Normalerweise habe ich das immer über ein normales Javaskript gelöst.

Hat jemand ne Ahnung, ob es mit TypoSkript auch eine Möglichkeit gibt, ohne ein externes Javascript einzubinden ?

Die Buttons sind sowieso im Root Template definiert. Es wäre daher super, wenn man den Grafikaustausch auch direkt im Template definieren könnte.

Thx.
aviereck

maxhb ·
aviereck schrieb

Ich muss für diese Buttons einen Mouseover Effekt realisieren.
Normalerweise habe ich das immer über ein normales Javaskript gelöst.

Versuchs doch mal mit CSS und entprechenden IDs / Classes für dier einzelnen Buttons.

CU
maxhb

Bremen ·

Ich habe im menu so gemacht...
onBlur ausschalten z.b.temp.meni_1.1.onBlur=1
und im template *.html
<script language="JavaScript">
function chBg(obj) {
obj.bgColor = "#C7C7C7";
}
function chBg2(obj) {
obj.bgColor = "#FAFAFA";
}
function chBg3(obj){
obj.bgColor="#E7E7E7";
}
</script>

und in
setup:
temp.menu_1.1.NO {
temp.meni_1.1.onBlur=1
allWrap = <table cellspacing="0" cellpadding="0"><tr><td width="7" bgcolor="#044B83"></td><td width="180" onMouseOver="chBg(this);" onMouseOut="chBg3(this)";><div class="menu1-level1-no"> | </div></td><td width="4"><img src="images/transf.gif" border="0" width="4"></td></tr></table>
}

aviereck ·

Hey,
also wenn man sich mal: http://aktuell.de.selfhtml.org/artikel/css/mouseover/ durchliest, so sieht das mit den Browserkompatibilitäten noch nicht so gut aus.

Bremen:
deine Syntax verwundert mich etwas :-), Du hast da hier und dort Klammern vergessen. Irgendwie etwas undurchsichtig was Du genau gemacht hast.

Wie bindet man denn einfach ein Javaskript in den Header ein, ohne dass er wieder gelöscht wird. Im HTML Template einen Javaskript code einzubinden bringt ja nichts, da dieser wieder von Typoscript ersetzt wird.

Der Rest ist ja nur noch Ergänzung der Buttons durch onmouse over/out und somit klar.

Thx.
av.

maxhb ·
aviereck schrieb

Hat jemand ne Ahnung, ob es mit TypoSkript auch eine Möglichkeit gibt, ohne ein externes Javascript einzubinden ?

Geht am Besten folgendermaßen (TS Setup):

page.headerData.5 = TEXT
page.headerData.5.value (
<script type="text/javascript">
...
</script>
)

Damit wird Dein Javascript Code im Headbereich der Seite eingefügt. Natürlich kannst Du das JS auch wie gewohnt in eine externe Datei auslagern und diese dann wie oben gezeigt einbinden...

CU
maxbh