Hilfe bei "onmouseover"

wakünick · 15. Januar 2008

Hallo erstmal

Also ich möchte meine Website so ändern das wenn ich auf ein bild in der navigation mit der Maus fahre dieses durch ein anderes ersetzt wird, bis ich wieder mit der maus das Bild verlasse!
dies soll mit insgesamt 6 Navigationspunkten funktionieren!

Ich weiß das sowas mit "onmouseover" geht, kenne mich damit jedoch nicht wirklich aus

Das ganze ist in eine tabelle eingepackt (kurzes Beispiel):

<html>
<head>
<titel> </titel>
</head>
<body>
<table border="3">
<tr>
<th><h3>Navigation</h3></th>
</tr>
<tr>
<td background="background.jpg"> -->hier solld das bild ("background.jpg") beim überfahren mit der Maus zu "highlight.jpg" wechseln
<A HREF="home.htm" target="MAIN">
<h1>HOME</h1>
</a>
</td>
</tr>
<tr>
<td >background="background2.jpg"> -->hier solld das bild ("background2.jpg") beim überfahren mit der Maus zu "highlight2.jpg" wechseln
<A HREF="infos.htm" target="MAIN">
<h1>INFOS</h1>
</a>
</td>
</tr>

</table>
</body>
</html>

Wäre super wenn ihr mir ein bisschen starthilfe dafür geben könntet!

Danke schonmal

Zweipunktnull · 15. Januar 2008

Zur Lösung solcher Aufgaben verwendet man kein JavaScript, sondern CSS. Lies dazu einfach ein wenig aus dem SELFHTML-Kapitel über Pseudoelemente und Pseudoklassen in CSS.

knuddelbaer1989 · 15. Januar 2008

so habe ich mein Mousover eingebunden:

<a href="Home.html"onmouseover="austausch1.src='Bilder/Buttons/Mousover_Home.gif';"onmouseout="austausch1.src='Bilder/Buttons/Button_Home.gif';" target="Haupt"><IMG border="0" src="Bilder/Buttons/Button_Home.gif" name="austausch1" alt="Home"></a>

so sollte es eigentlich gehen ist sogar ein Link mit driN!

MFG.:
knuddelbaer

Yo Mr. White · 15. Januar 2008

@wakünick
Wenn du willst das es überall funktioniert, dann solltest du zu Computer Freaks Lösung greifen. Wenn du aber möchtest das deine Bilder nur bei jedem 3. zu sehen sind, dann solltest du die Javascript-Variante wählen.

wakünick · 15. Januar 2008

Ich danke euch schonmal für eure Antworten
@Computer Freak:
hmm...sieht noch etwas unübersichtlich für mich aus!
könntest du mir netterweise ein kurzes beispiel machen wo das bild dann wechselt?
Wäre hilfreich!

@knuddelbaer 1989:
ja genau sowas meinte ich ;-)

@°A8
hmm...sollte natürlich überall funktionieren!
Vielleicht könntest du mir auch ein beispiel machen (reicht aber wen einer von euch eins schreibt ;-))

Yo Mr. White · 15. Januar 2008

Naja ein wenig sollten man schon selbst suchen. Aber ...

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>:link, :visited, :focus, :hover, :active</title>
<style type="text/css">

a { background-image:('normalesBild.jpg'); }
a:hover { background-image:('hoverBild.jpg'); }

</style>
</head><body>

<a href="deinLink">dein Linktext</a>

</body></html>

Noch ein kleine Lesetipp

wakünick · 15. Januar 2008

@°A8:
Danke aber irgendwie klappts nicht:-(

was hab ich falsch gemacht?

<html>
<head>
<titel> </titel>

<style type="text/css">

a { background-image"Bild.jpg"); }
a:hover { background-image"Bild2.jpg"); }

</style>
</head>

<body>
<a href="home.htm">Hallo</a>
</body>

</html>

Yo Mr. White · 15. Januar 2008

Das war zwar ein Schreibfehler aber du solltest doch mal selbst suchen...

http://www.css4you.de/background-image.html

wakünick · 15. Januar 2008

also irgendwie funktioniert auch der eigenst von dir geschriebene Code nicht!?
Bei mir erscheint nur der text "dein linktext" aber keine bilder obwohl ich zwei bilder mit den namen "normalesBild.jpg" und hoverBild.jpg" in den ordner erstellt habe!

Deine Hilflinks habe ich mir mal durchgelesen...bin da glaub ich noch zu doof zu

Wäre nettw enn du mir weiter helfen könntest

Zweipunktnull · 15. Januar 2008

°A8 meinte auch, dass ER einen Fehler gemacht hat... und nicht du beim abschreiben.

Aber hör mal, also du willst mir doch nicht erzählen, du hättest die links gelesen, oder?
Ein bisschen Eigeninitative ist schon gefragt!

HTML:

<style type="text/css">
div.bg {
background-image: url(../images/bg.gif);
background-color:orange;
width:500px;height:200px;
border:1px solid red;
padding:20px;
}
</style>

Das steht auf der Seite. Jetzt probier mal anhand diesem Code die korrekte Syntax von background-image rauszulesen...

wakünick · 16. Januar 2008

sry mit dem fehler hatte ich dich wirklich falsch verstanden...hab die ganze zeit nach einem Fehler bei mir gesucht ;-)
Doch hab die wirklich gelesen, vesrtehe aber irgendwie nur bahnhof(Ok also mehr als nur Bahnhof;-))!
ich habe mich nur vorher noch nie mit Css asueinander gesetzt...kann nur HTML und ein ganz kleines bisschen Java

Werde das Morgen nach der Schule direkt mal ausprobieren...thx

Yo Mr. White · 16. Januar 2008

Ich will dir jetzt nicht zu nahe treten, aber dein im Ausgangspost gezeigter Quellcode zeigt auch, dass du HTML nicht kannst.

Also für HTML --> http://de.selfhtml.org/
und CSS --> http://www.css4you.de/

Und JAVA hat nichts mit Javascript zu tun!

Und üben üben üben
und nochmal üben, dann klapps das ;-)

wakünick · 16. Januar 2008

Nach dem Ausgangspost geschickten Quellcode würd ich das wahrscheinlich auch denken...
Mir ist klar das Java und Javascript zwei paar schue sind!
Hatten Java in ner Informatik Ag für 3 Monate in der Schule...deshalb "ein kleines Bisschen"!

natürlich möchte ich gern Üben...wills ja lernen...aber ich kann sowas immer nur an konkreten Beispielen, andernfalls krieg ich das nicht hin und bin nochmehr verwirrt als vorher

Selfhtml kannte ich schon...ist auch meine übliche Nachschlagequelle

Also bitte etwas nachsicht mit mir

Eagle-PsyX- · 20. Januar 2008

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html><head><title>title</title> 
<style type="text/css"> 
a {
background:url(bild1.jpg) no-repeat;
}
a:hover {
background:url(bild2.jpg) no-repeat;
}
</style> 
</head><body> 

<a href="deinLink">dein Linktext</a> 

</body></html>

So das klappt, aber erstmal "bild1.jpg" etc. austauschen ;-)

Suche

wakünick

Lt. Junior Grade

Zweipunktnull

Commander

knuddelbaer1989

Lieutenant

Yo Mr. White

Lieutenant

wakünick

Lt. Junior Grade

Yo Mr. White

Lieutenant

wakünick

Lt. Junior Grade

Yo Mr. White

Lieutenant

wakünick

Lt. Junior Grade

Zweipunktnull

Commander

wakünick

Lt. Junior Grade

Yo Mr. White

Lieutenant

wakünick

Lt. Junior Grade

Eagle-PsyX-

Commander

Ähnliche Themen