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

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

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