hallo erstmal
ich arbeite an einer hp mit einem menü mit schräger schrift (steht in einem winkel von 45°).
die menüpunkte sind alle in einer "grossen" verweis-sensitiven grafik.
nun würde ich gerne einen mouseover für die einzelnen menüpunkte basteln.
allerdings kann ich ja (leider) net die ganze verweis-sensitive grafik austauschen.
gibt es eine möglichkeit dieses problem zu lösen?
oder muß ich auf einen mouseover verzichten???
puuuhh...was Ansprüch *g*
also: Zu allererst würd ich versuchen, die Menügrafik in mehrere Einzelbildchen zu zerstückeln, das wär die einfachste Lösung.
Falls das aufgrund irgendeiner ausgefallenen Form der Menüpunkte absolut nicht möglichst ist, könntest Du natürlich trotzdem das komplette Bild austauschen.
Müsstest halt für jeden Menüpunkt eine extra Fassung der Menügrafik basteln, sie sich alle durch den jeweils hervorgehobenen Navigationspunkt unterscheiden, damit Du alle Fälle abdeckst.
Es gibt eine Lösung, bei der Du nicht das ganze Menü / Grafik neu laden musst:
Lege die Menü-Grafik als Hintergrundbild in eine Tabelle.
Da man einem Hintergrundbild keine Hotspots verpassen kann, lege über die Menü-Grafik ein transparentes GIF (mit gleicher Grösse wie Menü-Grafik). Dieses GIF machst Du nun verweis-sensitiv, genau so, wie Du es bei der Menü-Grafik gemacht hattest.
Beim Event Mouseover wechselst Du nun nicht die Menü-Grafik aus (die bleibt schön im Hintergrund), sondern das trans. GIF wird gegen ein neues GIF ausgetauscht, das bis auf die "Austausch-Grafik" für den entsprechenden Button, ebenfalls transparent ist und verweis-sensitive Bereiche hat.
Diese Variante ist dann schnell und nicht so speicherintensiv.
Klar was ich meine ?
taratus
Hi,
also wenn ich dich richtig verstanden habe tausche ich im Endeffekt doch eine komplette verweis-sensitive Grafik gegen eine ander verweis-sensitive Grafik aus (allerdings das transparente GIF). wußte nicht das das geht. Ich werd's ma im Laufe der Woche versuchen.
Hatte schon überlegt mit Layern zu arbeiten (weiß nicht ob es da ne Lösung gibt.... hab ich noch nie verwendet), allerdings hätte da bestimmt irgendein Browser seine Probleme gehabt.
Wenn diese Variante allerdings klappt würde die wahrscheinlich sogar jeder Browser darstellen können
thx.... ich werd ne Rückmeldung posten sobald ich es versucht habe.
Also ich würde am einfachsten das Problem mal mit Fireworks angehen. Designe die ganze Nav in Fireworks und da kannst du dan ja alles einstellen. So sollte es eigentlich klappen.
Gruss: Spin
Hi !!
Die Variante, die taratus beschrieben hat, hab ich auch vor einiger Zeit mal benutzt. Ein Beispiel, sowie ein Unterschied zwischen einer Layerlösung und einer mit blind-Gif findest du hier: http://www.setasign-webdesign.de/ref...ayer/index.htm
...da sieht man aber z.B. auch, dass die Layerlösung ein paar kb einspart... (nurmal so am Rande)
Wenn dir der Kram hilft kannst du die Sachen gerne nutzen.
Gruss Jan
@ Spin: Ich hab kein Fireworks....
so... also ich hab mich für die NoLayer-Version entschieden...
Funktioniert auch soweit..... bis auf das Event "OnMouseOut"
Das krieg ich einfach nicht zum laufen.
Ich hab hier mal den Code der Testseite.
Kann mir einer anhand des Codes verraten was ich falsch mache?
----<Begin>--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
Normal = new Image();
Normal.src = "test2.gif";
Highlight1 = new Image();
Highlight1.src = "test3.gif";
Highlight2 = new Image();
Highlight2.src = "test4.gif";
function SwapImage(pic) {
window.document.test.src = pic.src;
}
// -->
</script>
</head>
<body>
<table align="center" background="test.gif" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<map name="menue">
<area shape="poly" coords="64,10,69,18,2,83,1,67" href="" alt="Menuepunkt 1" onMouseOver="SwapImage(Highlight1)" onMouseOut="SwapImage(Normal)">
<area shape="poly" coords="19,73,30,86,98,16,88,8" href="" alt="Menuepunkt 2" onMouseOver="SwapImage(Highlight2)" onMouseOut="SwapImage(Normal)">
</map>
<img src="test2.gif" width="100" height="100" name="test" usemap="#menue" alt="" border="0"></td>
</tr>
</table>
</body>
</html>
----<Ende>--------------------------------------------------------------
Nachtrag:
Ähm... ich hab grad gesehen das es im IE und im NS funzt. Nur im Opera spints etwas. Und das auch nur bei meinem. Bei nem Kollegen von mir tut es.... komische Sache.
Geändert von Navacho (03.10.2002 um 15:29 Uhr)
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
LinkBack URL
About LinkBacks
Zitieren
