HTML-Bildübergang

Hallo!

Ich bin dabei eine Homepage zu erstellen und möchte ein Bild einfügen, welches zuerst in Schwarz-Weiß angezeigt wird und bei berührung mit der Maus in Farbe dargestellt wird. Dazu müsste ich wahrscheinlich die beiden Bilder schon so vorbereiten, aber wie schreibe ich so einen Befehl, mit der Überblendung in HTML? Wäre sehr dankbar für eine gute Hilfe!

 

Das geht mit reinem HTML nicht. Eine Kurz- und eine Langfassung gibts in -> http://www.pcwelt.de/forum/web-know-how-f-r-homepage/281721-problem-beim-mouseover-javascript.html

 

ich habe dazu nun den folgenden Befehl gefunden:

<a href="deineseite.html" onmouseover="B1.src='bild2.gif';" onmouseout="B1.src='bild1.gif';"><img src="bild1.gif" border="0" width="100" height="30" name="B1"></a>

Ich wollte aber nochmal anfragen, ob dieser mir erklärt werden könnte....denn: warum soll ich nächstes mal nochmal fragen, wenn ich etwas habe? Ich könnte es ja vielleicht selbst lösen :-P

Danke!

 

PHP:

<a href="deineseite.html" onmouseover="B1.src='bild2.gif';" onmouseout="B1.src='bild1.gif';"><img src="bild1.gif" border="0" width="100" height="30" name="B1"></a>

Hi,
hui, diesen Code hatte ich in einem anderen Thread gepostet, hätte nie gedacht, dass sie ein zweites mal gepostet wird^^

Sicher kann ich dir erklären, was dieser Code tut, allerdings muss ich wissen, was du erklärt haben willst. Willst du wissen, was dieser Code tut oder was die einzelnen Befehle bedeuten? Wenn du wissen willst, was dieser Code tut, kannst du se in eine .html datei hineinkopieren, zwei verschiedene Graphiken erstellen und dann ma austesten...

 

Ich würde gern wissen, was die einzelnen Schlagwörter, wie z.B. "B1.src" und "href" bedeutet, das würde mich mal sehr interessieren. Bei der Funktion handelt es sich wohl um die in meinem Thema erfragte Bild-Überblendung...

 

Also,

ja klar kann ich dir erklären, was die einzelnen Befehle bedeuten:

PHP:

<a

Dies ist ein Befehl und gleichzeitig eine angefangene Funktion (Anweisung), mit der du ein Link (ein Verweis) erstellen kannst.

PHP:

href="deineseite.html"

Mit diesem Befehl ("href") gibst du den Pfad zur Datei ein, auf die Verwiesen werden soll. In diesem Beispiel wird auf die Seite "deineseite.html" verwiesen.

PHP:

onmouseover=

Bei diesem Befehl passiert was, wenn die Maus über ein bestimmtes Objekt in der HTML Datei drüber ist, z.B. wenn du mit der Maus auf ein Bild gehst, dass sich das Bild wechselt, aufleuchtet etc.

PHP:

"B1

B1 ist hier in diesem Beispiel ein sogenannter Bezeichner (ein Name) für ein bestimmtes Objekt.

PHP:

.src='bild2.gif';"

scr ist ein Befehl, bei der du wieder einen Pfad angeben musst. In diesem Beispiel findet man den Pfad zur Bilddatei "bild2.gif". Die enthält keine durchgänge über Ordner, d.h. dass sie in der selben Stelle ist, wie die HTML Datei, in der dieser Befehl enthalten ist. Solche Pfade nennt man auch Relative Pfade. Wenn du z.B. das eingibst scr="C:/Meine Pics/bild2.gif", wäre das ein Absoluter Pfad, die aber bei der Programmierung relativ selten verwendet wird. Gibst du z.B. nur scr="bilder/bild2.gif" ein, wäre das wieder ein Relativer Pfad. Von einem Absoluten Pfad spricht man, wenn Hauptknotenpunkte (wie z.B. Laufwerk C: oder D: etc.) mit in dem Pfad drinnen sind.

PHP:

onmouseout=

Dieser Befehl regelt, was mit dem Objekt passieren soll, wenn die Maus nicht drüber ist.

PHP:

<img

Dies ist ein Befehl, mit der du Bilder in deine HTML Datei einbauen kannst., das auch nachher ein Objekt ist.

PHP:

src="bild1.gif"

Dies ist der Pfad (siehe oben). In diesem Beispiel wird ein Pfad zur Bilddatei "bild1.gif" eingegeben.

PHP:

border="0"

Dieser Befehl regelt, dass es um das Bild herum keinen Rahmen geben soll. Wenn du border="1" schreiben würdest, würde das Bild dann einen schwarzen Rahmen haben, die Zahl bestimmt dabei, wie dick der Rahmen sein soll. Mit welchem Befehl man die Farbe des Rahmens bestimmt weis ich nicht mehr, aber den "border=" Befehl sollte man nicht weglassen. Wenn man se weglässt, hat man einen Rahmen. Und die sehen hässlich aus...^^

PHP:

width="100"

Mit diesem Befehl kannst du die länge des Bildes bestimmen, in diesem Beispiel hat sie 100 pixel länge.

PHP:

height="30"

Und mit diesem Befehl bestimmst du die Höhe des Bildes, hier hat sie 30 pixel Breite.

PHP:

name="B1">

Mit diesem Befehl vergibst du dem Bild, das auch ein Objekt ist, einen Namen. Hier heißt das Objekt "B1". Mit dem ">" beendest du das Befehl zum Bilder einfügen.

PHP:

</a>

Mit diesem Befehl schließt du die angefangene Verweis Funktion.





Und hier alles in einer Übersicht:

PHP:

<a href="deineseite.html"

Es wird eine Verweis Funktion erstellt, das auf die HTML Seite "deineseite.html" Verweist.

PHP:

onmouseover="B1.src='bild2.gif';"

Wenn man mit der Maus auf das Objekt "B1" drüber geht, soll es das Bild "bild2.gif" anzeigen.

PHP:

onmouseout="B1.src='bild1.gif';">

Wenn die Maus nicht gerade über das Objekt "B1" drüber ist, soll das Bild "bild1.gif" angezeigt werden.

PHP:

<img src="bild1.gif" border="0" width="100" height="30" name="B1">

Mit dieser Zeile wird das Bild "bild1.gif" in die HTML Seite eingebaut, das keinen Rand hat, das die länge 100 pixel und die Breite 30 pixel hat und das den Namen "B1" trägt.

PHP:

</a>

Mit diesem Befehl wird die Verweis Funktion geschlossen. (Wichtig, niemals diesen Befehl vergessen, da sonst die Verweis Funktion nicht ordnungsgemäß Funktioniert!!!)

Wenn man mit der Maus jetzt über das Bild geht, kann man ein anderes Bild sehen und wenn man damit weg von diesem Bild geht, kommt das alte Bild zurück. Wenn man mit der Maus drauf klickt, wird man auf die Seite "deineseite.html" verweist.

 

Danke für die Hilfe! Hat mir sehr weitergeholfen!