Zum Inhalt springen

Menüaufbau mit Wechselnden Buttons zu langsam!


Empfohlene Beiträge

Geschrieben

Servus!

Ich habe auch einer neuen Seite ein Menü angelgt. Dort werden die Grauen Buttons durch Rote ersetzt wenn man mit der Maus ddrüber fährt! So wie das oft der Fall ist!

Ich verwiklich das ganze mit DHMTL!

Bloß irgendiwe dauert die Ladezeit deiser Buttons viel zu lange!

Ihr könnte euch die Seite ja mal anschauen! TSV-Goldbach.de

Kennt jemand ne bessere Lösung wie ich dieses Menü so verwirklichen könnte???

Geschrieben

Man kann die Bilder, die beim rüberfahren mit der Maus erscheinen (in diesem Fall also die roten buttons) auch vorher laden lassen. Ich weiß gerade leider nicht, wie das geht. :/

Oder du machst die Buttons komplett in Flash, hab ich auch gemacht.

(Du bist ja zu allen Schandtaten bereit :P)

Geschrieben

du könntest das mit JS und CSS machen.

einfach als std. für deine Menu bilder einen "filter:Alpha(opacity=40);" setzen und beim onmouseover dann auf 80 switchen. bzw lege 2 css klassen an und tausche beim mouseover die css klassen

beispiel

gruss

kills

PS: geht aber nur bei IE!!

Geschrieben

Per JS geht's z.B. so:


<html>
<head>
<title>Test BG</title>
<meta name="author" content="*I C Q*">
<script language="JavaScript">
<!--
function changebg (id, farbe)
{
document.getElementById(id).style.backgroundColor = farbe;
}
//-->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#000000" alink="#000000" vlink="#000000">
<table>
<tr>
<td id="td1" style="background-color:#00ff00;"><a href="test1.htm" onmouseover="changebg('td1','#ff0000');" onmouseout="changebg('td1','#00ff00');">Link 1</a></td>
</tr>
<tr>
<td id="td2" style="background-color:#00ff00;"><a href="test2.htm" onmouseover="changebg('td2','#ff0000');" onmouseout="changebg('td2','#00ff00');">Link 2</a></td>
</tr>
<tr>
<td id="td3" style="background-color:#00ff00;"><a href="test3.htm" onmouseover="changebg('td3','#ff0000');" onmouseout="changebg('td3','#00ff00');">Link 3</a> </td>
</tr>
</table>
</body>
</html>
[/PHP]

Funktioniert im IE ab 5.x und im Netscape ab 6.x (also auch im Mozilla)!

Die "schönere" Lösung (also ohne JS und ohne Flash sondern nur mit CSS) ist etwas komplizierter: Erstelle Deine Grafiken als GIFs mit transparentem Hintergrund und nutze das CSS-Pseudoformat a:hover, also so:

[PHP]
<html>
<head>
<title>Test BG</title>
<meta name="author" content="*I C Q*">
<style type="text/css">
<!--
a {
background: #00FF00;
}
a:hover {
background: #FF0000;
}
-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#000000" alink="#000000" vlink="#000000">
<table >
<tr>
<td><a href="test1.html"><img src="test1.gif"></a></td>
</tr>
<tr>
<td><a href="test1.html"><img src="test2.gif"></a></td>
</tr>
<tr>
<td><a href="test1.html"><img src="test3.gif"></a></td>
</tr>
</table>
</body>
</html>

Und zu Flash:

Flash an sich ist ja ganz nett (ich hab auch gerne damit gebastelt), allerdings haben längst nicht alle User Flash installiert. Und für einen simplen MouseOver-Effekt ist's wie mit Kanonen auf Spatzen geschossen.

ICQ

Geschrieben

Danke für das Angebot mit den Flash-Buttons!!

Aber ich glaube ich werde das mit dem "vor"ladesystem ausprobieren!!

Des passt auch besser zu dem Menü!!!

komme aber gerne auf dein Angebot zurück! irgendwann!!

Danke trotzdem!!

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde Dich hier an.

Jetzt anmelden

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...