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

Veränderndes Bild bei mouse move on

C

Criss

Neues Mitglied
Hallo!

Ich bin grade im Begriff mir eine eigene Seite aufzubauen und versuche das Menü etwas interessanter zu gestallten. Ich hätte gerne, dass...

1. hinter jedem Menüpunkt ein Bild ist.
2. sich das Bild verändert, wenn man mit der Maus drüber fährt.

Das Ganze soll dann ungefähr wie bei deiser Seite aussehen: Willkommen auf der Startseite

Das mit den Hintergrundbildern funktioniert bestimmt mit Hilfe einer Tabelle und dann dem Parameter background="bild" oder so was in der Art. Ich weiß aber nicht wie ich das hinbekomme, dass sich das Bild verändert.


Ich hoffe, dass mir hier jemand helfen kann.

MfG
Criss
 
Es gibt mehrer Möglichkeiten dies zu bewerkstelligen.

Zum einen hast du ja schon richtig erkannt: JavaScript mit onmouseover. Allerdings bringt dies auch Nachteile mit sich, denn wenn jemand JavaScript deaktiviert hat, funktioniert es nicht. Und es hat eine Ladezeit (wenn auch nicht wirklich bemerkbar), denn es wird jedesmal ausgeführt wenn du mit der Maus über dein Bild fährst.

standard mouseover onmouseover grafik tausch

-----------------------

Die zweitere Variante, zu der ich ehrlich gesagt tendiere, wäre die reine css-variante. Im css gibt es eine Pseudoklasse die sich ":hover" schimpft.

so kannst du z.B.

html:
Code: 
<a href="#"> Test </a>
css:
Code: 
a { background-image: url(bild1.jpg); ]
a:hover { background-image: url(bild2.jpg); ]
Edit:
- Menüs mit Hintergrundgrafiken
- Link-Buttons

machen.


Gruß
Loon3y

Edit: hab deinen posting nicht ganz zu ende gelesen. Du brauchst, bzw solltest für dein Menu KEINE Tabelle benutzen. EIn Menu ist eine auflistung von Punkten, also muss man eine liste dafür nehmen.
Code: 
<ul>
 <li><a href="#"> Punkt1 </a></li>
 <li><a href="#"> Punkt3 </a></li>
 <li><a href="#"> Punkt2 </a></li>
....
</ul>
 
Ich weiß, dass das eigentlich eine Liste ist. Jedoch wurde mir in dem Fall, dass ich ein Hintergrundbild (also Buttons) benutze, empfohlen eine Tabelle zu nehmen. Man könne bei einer Liste keine Hintergrundbilder nehmen. Korrigiert mich, wenn dies nicht stimmt.

Mit CSS kenen ich mich nciht so gut aus bzw gar nicht. :D
Könnte ich das was du geschrieben hast einfach kopieren und in meine html-Datei einsetzen?

Das mit den Link-Buttons versteh ich irgendwie nicht.

Habe das probiert was auf der 1. Seite steht, die du gepostet hast. Funktioniert gut und ist nicht sehr kompliziert. :)
Dankesehr!
 
Zuletzt bearbeitet:
Criss schrieb:
Ich weiß, dass das eigentlich eine Liste ist. Jedoch wurde mir in dem Fall, dass ich ein Hintergrundbild (also Buttons) benutze, empfohlen eine Tabelle zu nehmen. Man könne bei einer Liste keine Hintergrundbilder nehmen. Korrigiert mich, wenn dies nicht stimmt.
Zum Vergrößern anklicken....

EDIT: irks...das kommt davon wenn man nicht 100% aufmerksam liest...mein Beispiel was hier aufgeführt ist, zeigt auf, wie du bei deinen Menu, also hinter alle Buttson, ein Hintergrundbild bekommst...oder eine Hintergrundfarbe...

Was hast du am tutorial von den links nicht ganz verstanden?


-----------------------------------------------

Wer das wohl gesagt hat, hat noch weniger Ahnung wie du ^^ (nicht böse dir gegenüber gemeint).

Mitt css ist so gut wie alles möglich, nur z.B. Kinder kann man damit nicht bekommen.

Du hast da auch wieder mehrere Möglichkeiten.

1. Variante, wenn unterhalt oder oberhalb der Liste noch Content / Anderes kommt:

Code: 
<div id="navi">
..........
<ul>
 <li><a href="#"> Punkt1 </a></li>
 <li><a href="#"> Punkt3 </a></li>
 <li><a href="#"> Punkt2 </a></li>
....
</ul>
.........
</div>
css:
Code: 
div#navi { 
width: 150px; 
height: 400px; [B]
background-image: url(deinbild.jpg);
[/B]}

ul {
margin: 0px; 
padding: 0px; 
list-style:none; 
}
ODER:

2. Variante wenn du nur ein Menu hast

html:
Code: 
<ul id="navi">
 <li><a href="#"> Punkt1 </a></li>
 <li><a href="#"> Punkt3 </a></li>
 <li><a href="#"> Punkt2 </a></li>
....
</ul>
css:
Code: 
ul#navi { 
width: 150px; 
height: 400px;  
margin: 0px; 
padding: 0px;
list-style:none; 
[B]background-image: url(deinbild.jpg); 
[/B]}
Natürlich kannst du jetzt das ganze noch dir beliebig anpassen. Sprich width, height, farben, schriftgröße, vertikale navi, horizontale navi, und und und....

aber lies dir doch mal die 2 links von oben (hier nochmal) durch:
- Menüs mit Hintergrundgrafiken
- Link-Buttons

Mit CSS kenen ich mich nciht so gut aus bzw gar nicht. :D
Könnte ich das was du geschrieben hast einfach kopieren und in meine html-Datei einsetzen?
Zum Vergrößern anklicken....
Kein problem, aber es wird zeit, dass du neben html dir auch css aneignest. Bei Fragen bist du hier ja goldrichtig.

Natürlich kannst du alles kopieren und dir, wie du es brauchst, anpassen. Dafür ist es ja da.


Das mit den Link-Buttons versteh ich irgendwie nicht.
Zum Vergrößern anklicken....
was verstehst du da genau nicht? frag einfach!

Gruß
Loon3y
 
Hm... Also im Moment möchte ich noch nicht mit CSS arbeiten.
Ich sagte, dass man bei HTML keine Hintergründe bei Listen machen kann. Ist das falsch? Oder geht das nur mit CSS?

Also ich hab mir ein kleines "Probemenü" gemacht. Hab das Hintergrundbild reinbekommen, weiß aber nicht wie ich jetzt hinbekomme, dass sich das Hintergrundbild wechselt.

Ganze sieht atm bei mir so aus:
Code: 
<table border="0" height="88" width="254" cellspacing="0">
  <tr>
    <td background="Buttons/button_a_01.jpg" height="44" width="254" onmouseover="button1.src='Buttons/button_a_02.jpg';"
      onmouseout="button1.src='Buttons/button_a_01.jpg';">
      <a href="startseite.html">
      Startseite
      </a>
    </td>
  </tr>
  <tr>
    <td background="Buttons/button_a_01.jpg" height="44" width="254">Seite 1</td>
  </tr>
</table>
Eine Idee hätte ich da noch: Ich könnte die Namen der Menüpunkte direkt auf die Bilder schreiben und dann einfach die Bilder verlinken. Das wechseln bekomme ich so dann ja auch ganz einfach hin.
Das werde ich jetzt mal ausprobieren. :D

btw: Bin kein Freund von so langen "Erklärungs"-Seiten. :D

Edit:
Habs jetzt so gemacht, wie oben beschrieben. Funktioniert gut.
 
Zuletzt bearbeitet:
Criss schrieb:
Hm... Also im Moment möchte ich noch nicht mit CSS arbeiten.
Zum Vergrößern anklicken....

wieso nicht? damit benachteiligst du dich selbst und wieso solltest du nicht mit den vorgegeben mitteln des webdesigns arbeiten? Das wäre wie "ich möchte momentan noch nicht mit PC, nur mit Schreibmaschine, arbeiten".

Ich sagte, dass man bei HTML keine Hintergründe bei Listen machen kann. Ist das falsch? Oder geht das nur mit CSS?
Zum Vergrößern anklicken....
HTML ist eine Auszeichnungssprache. Sprich, du gibst deinem Inhalt eine bedeutung. Jedes html-tag gibt eine andere Bedeutung:

h1 - h6 -> Überschriften
p -> Textabsätze
ul -> unsortierte liste
ol -> sortierte liste
dl -> Definitionsliste
table -> tabelle

usw. usf.
D.h. du musst für deine textlichen Bausteine den richtigen html-tag verwenden. Man geht ja schließlich auch nicht in excel hin und schreibt einen Aufsatz dadrin.

Man kann per CSS eigentlich so gut wie jedem Tag (mir fällt spontan keins ein bei dem es nicht so ist), eine Farbe, Hintergrund, Größ, Position usw geben.

Hm um nochmal das Menu von dir anzusprechen. Eine Tabelle ist für tabellarische Daten da. Ist dein Menuinhalt tabellarische Daten? Oder ist es eher eine auflistung von Punkten?

Bei deinem Menu könntest du folgendes machen..

html:
Code: 
<ul id="navi">
 <li> <a href="#"> Punkt 1 </a>
 <li> <a href="#"> Punkt 2 </a>
 <li> <a href="#"> Punkt 3 </a>
...
</ul>
css:
Code: 
ul#navi {
margin: 0px;
padding: 0px;
list-style: none;
}

ul#navi li {
width: 100px;
height: 30px;
background-image: url([B]bild1.jpg[/B]);
}

ul#navi li[B]:hover[/B] {
width: 100px;
height: 30px;
background-image: url([B]bild2.jpg[/B]);
}
Leider wirst du ohne diese langen "erklärungsseiten" nicht weiter kommen mit deiner Homepage. Sobald Efchen hier mal auftaucht und noch ein paar Tips geben möchte, dann hast du deine Erklärungsseiten in Form eines Postings :) Ist nicht negativ Efchen gegenüber gemeint, eher im Gegenteil, wollte dich nur vorwarnen *g* Ich beherrsche mich immer so knapp wie möglich alles zu formalieren, da ich auch ehrlich gesagt keine Lust habe am Tag 10x zu predigen "tabellendesign ist falsch, lern html".

Anbei, noch einer erklärungsseite die mir viele Tiparbeit immer spart: Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten
Bitte beachten, dass es zu blättern geht, also es ist viel viel viel zu lesen.

Gruß
Loon3y
 
Also ich habe jetzt das obige Beispiel mal für dich gemacht[mit ein bissl Schleichwerbung für <html.de>]
PHP: 
<html>
 <head>
  <title>Adrianuserscript</title>
<script
language="JavaScript">
<!--
button1= new Image();
button1.src = "http://www.on-mouseover.de/images/mouseover_off.gif"
button2= new Image();
button2.src = "http://www.on-mouseover.de/images/mouseover_on.gif"
/* usw. für alle Grafiken,
die am Mouse-Over-Effekt beteiligt sind */
//-->
</script>

 </head>
 <body>
<a href="http://www.html.de"

onmouseover="austausch1.src='http://www.on-mouseover.de/images/mouseover_on.gif';"
onmouseout="austausch1.src='http://www.on-mouseover.de/images/mouseover_off.gif';">

<img src="http://www.on-mouseover.de/images/mouseover_off.gif"
border="0" width="100"height="33"
name="austausch1">
</a>

   <h1>IM AUFBAU</h1>
 </body>
</html>
 
Naja geht doch schonmal. Allerdings fehlt bei dir der Doctype und du müsstest:

Code: 
<script type="text/javascript">
...
</script>

schreiben..bzw, wenn es mehr wird, kannst du es auch auslagern.

das ein Menu mit <ul> gemacht wird, hab ich ja schon öfters gesagt.

Gruß
Loon3y
 
So wie es Adrian geschrieben hat, habe ich es jetzt auch ungefähr.

Ich wüsste jetzt gar nicht, wie ich das als Liste machen sollte...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben