• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mouseover-Problem

Status
Für weitere Antworten geschlossen.
M

Moe

Neues Mitglied
Also so n normales Mouseover wo alle Felder gleich sind und übereinander liegen ist ja easy. Aber ich möchte nun ein etwas komplexeres Mouseover. Es handelt sich dabei quasi um ein Bild mit 6 verschieden gesetzten Bildern drauf die die "Buttons" darstellt. (In dem Fall verlinkte bilderstellen) Ich habe auch 6 Weitere Bilder die mit diesem Identisch sind jedoch sich jedes unterscheidet. und zwar insofern das auf jedem Bild je ein anderer "button" "leuchtet" und auf dem ersten lecuhtet nichts. Also wie ist es nun möglich diese verschiedenen Stellen auf jeweils ein neues Bild erscheinen zu lassen? Am ende würde es soll es quasi aussehen als wenn sich nur der "button" ändert. Jedoch wird das ganze bild ausgetauscht. Sollte man es mit html nicht so leicht bewältigen lassen sind mir auch andere Lösungswege recht.

thx euer Moe
 
Hi Moe,

Dein Vorhaben ist leider so unverständlich formuliert, dass ich mir kein Bild davon machen kann, was Du machen willst.

Darum hier nur ein paar allgemeine Tipps, was Rollover-Effekte bei Menüs angeht:
1. Nach Möglichkeit "echten" Text, also
Code: 
<a href="index.html">Neuigkeiten</a>
verwenden und nicht
Code: 
<a href="index.html"><img src="neuigkeiten.jpg" ... /></a>
.
2. Das Aussehen der Menülinks mit CSS gestalten. Es bietet sich an, der ungeordneten Liste (ul-Tag) eine ID zu geben, damit Du die Menülinks folgendermaßen selektieren kannst: #menu a. Für Hintergrundbilder gibt es die Eigenschaft background-image.
3. Einen Menülink, über dem die Maus gerade ist, kannst Du mit #menu a:hover selektieren und dann anders formatieren.

Wenn Du weitere Hilfe brauchst, wäre es hilfreich, Deinen derzeitigen Stand in Form eines Codes oder einer Seite zu sehen.

Gruß
Junny
 
Du kannst die beiden Grafiken als Hintergrundbild hinterlegen: Eines für den normalen Linkszustand und eines für den Hoverzustand.
entsprechend der Anzahl der Links bräuchtest du dann sechs unterschiedliche Klassen.
Wie's mit CSS funktioniert findest du hier unter Ziffer 2 erklärt:
Link-Buttons
 
oooooooooo
oooooooooo
oooooxxxxxxxx
oooooooooo
oooooxxxxxxxx
oooooooooo
oooooxxxxxxxx
oooooxxxxxxxx
oooooooooo
oooooxxxxxxxx
ooooooooooo
ooooooxxxxxxxx
oooooooooooo
ooooooooooooo
ooooooooooooo

Also mal angenommen das obere ist mein "bild" Die stelle der 'x' Stellen die Postitionen der "buttons" dar.

Und an dieses Positionen brauche ich je einen mouseovereffekt und einen link.
 
Das komplette Menü in ein Bild zu quetschen, dort verschiedene Linkbereiche zu definieren und bei Mouseover das gesamte Bild auszutauschen ist nicht empfehlenswert:

1. Menülinks sind Links in ungeordneten Listen. Das heißt, man sollte die Tags ul, li und a verwenden. Alles andere ist semantisch mindestens fragwürdig.

2. Ein ISDN-/Modemsurfer wird sich bedanken für die horrenden Ladezeiten, wenn für jeden Effekt das ganze Bild ausgetauscht wird.

Fang am besten mit einem ganz einfachen Menü an:

Code: 
<ul id="menu">
  <li><a href="index.html">Neuigkeiten</a></li>
  <li><a href="blubb.html">Blubb</a></li>
</ul>

Formatiere dieses Menü mit CSS (geeignete Selektoren in meinem ersten Post) und dann stell Deine Frage dort, wo Du nicht weiterkommst.

Gruß
Junny
 
Junny schrieb:
1. Nach Möglichkeit "echten" Text, also
Code: 
<a href="index.html">Neuigkeiten</a>
verwenden und nicht
Code: 
<a href="index.html"><img src="neuigkeiten.jpg" ... /></a>
.
Zum Vergrößern anklicken....
An der Stelle muss ich Dich mal korrigieren. Die beiden hier von Dir dargestellten Lösungen sind gleichwertig gut. Das entscheidende hast Du nämlich vergessen, das alt-Attribut im img-Tag. Schreibst Du da dann "Neuigkeiten" rein, ist die Nutzbarkeit bei beiden Varianten gewährleistet. Das eine schreibt immer Text, das andere gibt Text aus, wenn keine Images dargestellt werden sollen/können und auch Clients, die gar keine Images nutzen können (Suchmaschinen) holen sich dann den Text aus dem alt-Attribut.

Gruß,
-Efchen
 
Hab mir was anderes ausgedacht.. habe nun trotzdem ein Problem. Die ersten Vier Bilder funktionieren reibungslos. Jedoch bei den letzten beiden zeigt er mir nen Fehler an:

....
Tauschbild05a = new Image();
Tauschbild05a.src = "GastButton.gif";
Tauschbild05a = new Image();
Tauschbild05b.src = "GastButton2.gif";

Tauschbild06a = new Image();
Tauschbild06a.src = "KontaktButton.gif";
Tauschbild06b = new Image();
Tauschbild06b.src = "KontaktButton2.gif";
........
....
<tr>
<td width="190" align="center">
<a href="Gast.html" OnMouseover="Wechseln('foto5','Tauschbild05b')" OnMouseout="Wechseln('foto5','Tauschbild05a')">
<img name="foto5" src="GastButton.gif" width="150" border="0" alt="">
</a>
</td>
</tr><br>
<tr>
<td width="190" align="center">
<a href="Kontakt.html" OnMouseover="Wechseln('foto6','Tauschbild06b')" OnMouseout="Wechseln('foto6','Tauschbild06a')">
<img name="foto6" src="KontaktButton.gif" width="150" border="0" alt="">
</a>
</td>
</tr>
........


So das sind die zwei "fetzen" um die es sich handelt O_____o Geht nicht.
 
Ich versteh nicht, wenn er Dir schon einen Fehler anzeigt, warum Du uns dann nicht die Fehlermeldung gibst. "Geht nicht" ist keine ausreichende Fehlerbeschreibung.
Und das JavaScript, das den Bildwechsel macht, kennen wir auch nicht.

Dein HTML-Code ist übrigens auch nicht in Ordnung. Nicht nur, dass da ein <br> zwischen einem </tr> und einem <tr> steht, auch ist die Tabelle hier fehl am Platze. Menüs zeichnet man als Liste aus (<ul>).
 
Das hier ist ne brilliante lösung... und das <br> stimmt schon da wos ist.

Er sagt mir nur das die Tauschbil05b oder wie des heißt und bei 6 ebenfalls undefiniert wären.

_____________________________
<script type="text/javascript" language="JavaScript">
<!--


Tauschbild01a = new Image();
Tauschbild01a.src = "StartButton.gif";
Tauschbild01b = new Image();
Tauschbild01b.src = "StartButton2.gif";

Tauschbild02a = new Image();
Tauschbild02a.src = "GalerieButton.gif";
Tauschbild02b = new Image();
Tauschbild02b.src = "GalerieButton2.gif";

Tauschbild03a = new Image();
Tauschbild03a.src = "ForumButton.gif";
Tauschbild03b = new Image();
Tauschbild03b.src = "ForumButton2.gif";

Tauschbild04a = new Image();
Tauschbild04a.src = "WissenButton.gif";
Tauschbild04b = new Image();
Tauschbild04b.src = "WissenButton2.gif";

Tauschbild05a = new Image();
Tauschbild05a.src = "GastButton.gif";
Tauschbild05a = new Image();
Tauschbild05b.src = "GastButton2.gif";

Tauschbild06a = new Image();
Tauschbild06a.src = "KontaktButton.gif";
Tauschbild06b = new Image();
Tauschbild06b.src = "KontaktButton2.gif";


function Wechseln(Bildname,Tauschbildname)
{
document.images[Bildname].src = eval(Tauschbildname + ".src")
}


//-->
</script>

</head>
<body bgcolor="red">
<table widht="200" height="600" valgin="top" background="start1.gif" border="0">
<tr>
<td width="190" align="center">
&nbsp;<br>&nbsp;
</td>
<tr>
<td width="190" align="center">
<a href="Home.html" OnMouseover="Wechseln('foto1','Tauschbild01b')" OnMouseout="Wechseln('foto1','Tauschbild01a')">
<img name="foto1" src="StartButton.gif" width="150" border="0" alt="">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="Galerie.html" OnMouseover="Wechseln('foto2','Tauschbild02b')" OnMouseout="Wechseln('foto2','Tauschbild02a')">
<img name="foto2" src="GalerieButton.gif" width="150" border="0" alt="">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="Forum.html" OnMouseover="Wechseln('foto3','Tauschbild03b')" OnMouseout="Wechseln('foto3','Tauschbild03a')">
<img name="foto3" src="ForumButton.gif" width="150" border="0" alt="">
</a>
</td>
</tr><br>
<tr>
<td align="center">
<a href="GesammeltesWissen.html" OnMouseover="Wechseln('foto4','Tauschbild04b')" OnMouseout="Wechseln('foto4','Tauschbild04a')">
<img name="foto4" src="WissenButton.gif" width="150" border="0" alt="">
</a>
</td>
</tr><br>
<tr>
<td align="center">
<a href="Gast.html" OnMouseover="Wechseln('foto5','Tauschbild05b')" OnMouseout="Wechseln('foto5','Tauschbild05a')">
<img name="foto5" src="GastButton.gif" width="150" border="0" alt="">
</a>
</td>
</tr><br>
<tr>
<td align="center">
<a href="Kontakt.html" OnMouseover="Wechseln('foto6','Tauschbild06b')" OnMouseout="Wechseln('foto6','Tauschbild06a')">
<img name="foto6" src="KontaktButton.gif" width="150" border="0" alt="">
</a>
</td>
</tr><br>
<tr>
<td align="center">
&nbsp;<br>&nbsp;
</td>
<tr>
</table>

...usw.
 
Moe schrieb:
Das hier ist ne brilliante lösung... und das <br> stimmt schon da wos ist.
Zum Vergrößern anklicken....
Tuts nicht. Zumindest nicht nach HTML. Vielleicht nach MoeML?

Er sagt mir nur das die Tauschbil05b oder wie des heißt und bei 6 ebenfalls undefiniert wären.
Zum Vergrößern anklicken....
Ich bin sicher, er sagt noch mehr. Zum Beispiel die Zeilennummer. Dann weißt Du schon, wo der Fehler auftritt. Der Fehler besagt, dass es das Objekt nicht gibt. Also musst Du prüfen, warum es das nicht gibt. War es zum Zeitpunkt des Erstellens (new) existent? Hast Du Dich irgendwo vertippt?

Ack. Dein alt-Attribut ist auch nicht ausgefüllt. Ohne Images sieht man gar nichts.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben