onmouseover

onmouseover

Beitragvon nuni83 » 25.07.2008, 18:36

Hallo Zusammen

Ich möchte ein onmouseover erstellen, habe schon viel ausprobiert, aber hat nie geklappt :(

Hier mal mein html code:

Bild

Code: Alles auswählen
<DOCTYPE>
<html>

<head>

<meta>
<meta>

<title>hcd-uri</title>

<link>


</head>

<body>

<div>
&nbsp;
</div>

<div>
&nbsp;
</div>

<table>
  <tr>
    <td>
    <td><a><img></a></td>
    <td><a><img></a></td>
    <td><a><img></a></td>
    <td><a><img></a></td>
    <td><a><img></a></td>
    <td><a><img></a></td>
    <td><a><img></a></td>
    <td><a><img></a></td>
    <td><a><img></a></td>
  </tr>
</table>

</body>
</html>


Hier mal mein css code:
Code: Alles auswählen
body {
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  margin-right:0px;
  margin-top:0px;
  background-image:url(images/hintergrund.jpg);
  background-repeat:repeat-x;
  background-color:#3399FF;
}

#banner_oben {
  background:url(images/banner_oben.jpg) no-repeat top;
  margin: 0 auto;
  height:25px;
  width:900px;
}

#banner {
  background:url(images/banner.jpg) no-repeat top;
  margin: 0 auto;
  height:150px;
  width:900px;
}



Damit ihr euch auch noch Vorstellen könnt wie es aussieht, hier ein print screen.

Bild

Und zwar möchte ich bei den links (Home, Archiv, Clubdaten, Fanartikel, Vorstand usw.) einen onmouseover, das onmouseover bild heisst home2.jpg, archiv2.jpg, clubdaten2.jpg usw.

ebenso möchte ich auch noch den active evekt, also wenn man zum beispiel auf archiv oder clubdaten oder so ist, dass dann das bild so aussieht wie beim onmouseover, damit man sozusagen sieht auf welchem link man ist.

kann mir da jemand helfen? wäre zu toll wenn mir jemand gerade bei meinem html und css code den onmouseover evekt bearbeiten könnte, damit ich dann nur noch kopieren müsste. wäre wirklich sehr toll.

hoffe ich habe euch genug informationen gegeben und ihr wisst was ich meine

besten dank schon mal

freundliche grüsse
nuni83
neu hier
 
Beiträge: 5
Registriert: 25.07.2008, 18:24

Beitragvon Laus » 25.07.2008, 22:45

Hallo

Schau dir mal dies Hier und dies Hier an den code kannst du einfach übernehmen und an deine bedürfnisse anpassen. Noch einfacher geht es mit Listamatik das erzeugt dir den code nach deinen wünschen.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Beitragvon nuni83 » 25.07.2008, 23:55

cool vielen herzlichen dank, werde es mal ausprobieren.
nuni83
neu hier
 
Beiträge: 5
Registriert: 25.07.2008, 18:24

Beitragvon nuni83 » 26.07.2008, 10:22

@Laus

Also habe mal deinen zweiten Link genommen und mit meinen Bildern überarbeitet. Und das klappt bislang sehr gut. Ein problem habe ich allerdings noch.

Leider steht nun auf allen Links das bild von "Home" drauf. Ich möchte das auf dem zweiten Link das Bild von "Archiv" kommt, auf dem dritten das Bild von "Clubdaten" usw.

Code: Alles auswählen
<DOCTYPE>
<html>
<head>
<meta>
<title>Unbenanntes Dokument</title>

<style>
#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url(images/home1.jpg);
text-align: center;
}

#navcontainer a
{
text-decoration: none;
display: block;
width: 59px;
height: 25px;
}

#navcontainer li#active { background: url(images/home2.jpg); }
#navcontainer a:hover { background: url(images/home2.jpg); }
</style>

</head>

<body>

<div>
<ul>
<li><a>&nbsp;</a></li>
<li><a>&nbsp;</a></li>
<li><a>&nbsp;</a></li>
<li><a>&nbsp;</a></li>
<li><a>&nbsp;</a></li>
</ul>
</div>


</body>
</html>


http://www.bilder-hochladen.net/files/7jhi-7-jpg-nb.html

verstehst du was ich meine?
nuni83
neu hier
 
Beiträge: 5
Registriert: 25.07.2008, 18:24

Beitragvon Laus » 27.07.2008, 19:28

Das ist wie man so sagt wieder eine andere Baustelle.
In diesem falle musst du nicht dem li das Hintergrundbild übergeben sondern dem dazugehörigem <a>
also
Code: Alles auswählen
#navcontainer ul li a.home {background-image: url(bildurl);}
HTML dazu
<li><a href="index.htm" class="home" title="Startseite">Home</a></li>

Und natürlich bei jedem Link die classe und das HG Bild wechseln
Analog dazu natürlich auch das bild für hover.

Einfacher wäre allerdings wenn du aus den zwei Bildern für den link eins machen würdest. ZB: des normale Bild oben und unten das hoverbild, dann brauchst du das Bild bei hover nur um die entsprechende Pixel zahl verschieben, was als weiteren vorteil auch noch hat das die Bilder für hover nicht extra erst nachgeladen werden müssen wenn sie gebraucht werden.
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald


Moderatoren: Laus, Moderatoren

Zurück zu: Fragen zur Homepage

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast