HTML Code Mauszeiger berührt Bild, dann dreht es sich

FCN Stefan

Hallo Forums Leute,

Ich brauche dringend einen HTML Code. Im ganzen Netz finde ich ihn nicht.

Ich sammle Autogramme. Da jede Fußball Autogrammkarte jedes Jahr einen anderen Hintergrund hat bräuchte ich folgenden Code.

Wenn ich die Bilder in mene HP eingebaut habe, und über das Bild mit dem Mauszeiger fahre, dreht sich das Bild und ich sehe die Rückseite der Karte. Wenn ich den Mauszeiger wieder vom Bild wegnehme, dann ist wieder die Vorderseite bzw. die Original Karte zu sehen.
Kann mir jemand helfen.

Liebe Grüße

#matthias

Hallo,

ich denke mal das du da mit reinen HTML schlechte Karten haben wirst.
Ich würde sage das da Javascript die richtige Antwort ist.

CroweHammer

Sers,

ich nehm an, dass es dir reicht, wenn man mit dem Mauszeiger auf dem ersten Bild ist sieht man die Rückseite. Oder muss sich das ganze auch noch drehen?
Ansonsten sollte es eigentlich mit einem Mouseover bzw. hover-effekt mittels CSS getan sein, d.h. du lasst dein erstes Bild laden und wenn man die Maus drüber bewegt, wird die Rückseite sichtbar, reicht dir das?

Gruß CroweHammer

FCN Stefan

Also ich habe es auf einer Seite gesehen da hat dich da Bild gedreht und man sah die Rückseite.
Aber wenn es nicht gehen sollte dann reicht mir auch die normale Rückseite wenn sich der Mauszeiger auf das Bild bewegt.

sejuma

Wenn du lediglich die beiden Grafiken (Vorder- und Rückseite) anzeigen willst, dann kannst du das per CSS lösen:

Geht per Hoverefekt, indem di für a:link und a:hover unterschiedliche Hintergrundgrafiken verwendest. Im Prinzip nichts anderes wie hier unter Ziffer 2 beschrieben: http://www.ohne-css.gehts-gar.net/0022.php

Eine andere Variante wäre diese: http://www.ohne-css.gehts-gar.net/0026.php
Mit einem Grafikprogramm fertigst du aus Vorder- und Rückseite eine Grafik. Der "Umdreh-Effekt" erfolgt per Hover und Background-Positionierung.

Soll dagegen eine Art "dreidimensionaler Effekt" entstehen, brauchst du dazu ein Script.

FCN Stefan

Ich habe Photoshop da werde ich mal versuchen was zu basteln. Zwei Bilder übereinander in einer Grafik. Das habe ich noch verstanden. aber wie es genau mit dem Drehen funkioniert muss ich halt ausprobieren.

Bandit

Wenn du eine Art Animation haben willst, brauchst du Flash, ansonsten hake den Begriff "drehen" ab und taufe das Kind "Bild austauschen"

Und als "kleiner" Schalke-Fan muss ich dir sagen, dass deine Homepage massenhaft Fehler hat. Siehe Klick mich

FCN Stefan

Ja ok dann heisst das Bild austauschen.

Ich habe mir eben den Link durchgelesen. Aber das mit CSS begreife ich nicht so richtig. Muss ich das CSS nicht in die HTML Seite einfügen. Nur den HTML Link. Und wo muss ich dann das CSS speichern

Bandit

Für dich könnte eine Galerie interessant sein. Hier findest du einige, die man "relativ" leicht integrieren kann: http://www.cssplay.co.uk/menu/

FCN Stefan

Also so wie es in diesem Link beschrieben ist
http://www.ohne-css.gehts-gar.net/0026.php
das würde mir reichen.

Nur verstehe ich noch immer nicht genau wie das mit dem CSS funktioniert
Muss ich das in meiner HTML Seite so eingeben wie es da steht, und darunter noch den Href Code eingeben.
Sehe ich das richtig. Und die men Hochladenes Bild wird dann durch foto ersetzt.

Bandit

Also, ein wenig mehr Mühe musst du dir schon geben, das ist alles nichts kompliziertes. Du könntest ja mal so clever sein und dir den HTML-Code von der Seite ansehen, dann kannst das schon per Copy/Paste und minimalen Anpassungen übernehmen.

Da funktioniert so aber nur mit einem Bild, wenn du mehrere Bilder auf einer Seite damit anzeigen willst, musst du schon Dynamic einbauen, z.B. mit PHP. Ansonsten tatsächlich eine Galerie und dann am besten noch mit PHP zusammenbauen.

sejuma

Wo und wie die CSS-Angaben eingebunden werden, findest du hier erklärt:
http://www.ohne-css.gehts-gar.net/0053.php

Tobse

Du kannast es mit CSS machen:

Code

man sollte mal nen css bb einbauen -.-
#hoverbild {
 width: 200px;
 height: 200px;
 background(autogramm1_forne.png) no-repeat;
}
#hoverbild:hover {
 background(autogramm1_hinten.png) no-repeat;
}

und dann hat der IE-Nutzer keine Chance (SCHANDE AUF DEN VERDAMMTEN IE] oder du machst es mit JS, denn JS haben weniger aus als IE benutzen:

HTML

<img src="autogrammkarte1_forne.png" alt="Autogramm1 von MisterXY" titel="Ein autogramm xD" onmouseover="src='autogrammkarte1_hinten.png';" onmouseout="src='autogrammkarte1_forne.png';" preload="autogrammkarte1_hinten.png">

Bandit

Dafür braucht man kein JavaScript!

Tobse

Schonmal ein x:hover im IE zu machen?? Es geht nicht. Er nimmt es nur mit a!

Bandit

Ja, nee, is' klar. Deswegen funktioniert das bei sejuma auch. Und das auch noch ohne JavaScript! Komisch, oder?

Entweder "Ziel verfehlt" oder "Falsche Aussage"

Tobse

Dann hab ich in Sejumas beitrag übersehen, dass das ja im a tag steht. *auf ten kopf hau*.

FCN Stefan

Hallo Leute, ich bekomme es einfach nicht hin. Was habe ich falsch gemacht. Habe den untenstehenden Code in meine HP HTML Modus so wie er steht eingegeben. Aber der Hover Effekt funktioniert nicht. Auf der Textseite beim anschauen ist nur der Code zu sehen und nichts von einem Bild. Was ist falsch. Bitte um eine weitere Hilfe

.foto-link
{
width: 290px;
height: 190px;
display: block;
margin: 0 auto;
}
.foto1
{
background:http://www.pagedeluxe.de/userdaten/000013/05/bilder/11.jpg no-repeat;
}
.foto-link:hover
{
background-position: 0 -190px;
}
<a href="#" class="foto-link foto1"></a>

Grevas

HTML

.foto1
{
         background-image: url(http://www.pagedeluxe.de/userdaten/000013/05/bilder/11.jpg);
         background-repeat: no-repeat;
}

/p.s. habs mir jetzt genauer angeschaut, da ist ja mehr falsch als richtig...

CSS:

HTML

.foto1
{
    width: 150px;
    height: 200px;
    background-image: url(http://www.pagedeluxe.de/userdaten/000013/05/bilder/11.jpg);
    background-repeat: no-repeat;

}
.foto1:hover
{
background-position: 0 -200px;
}

Alles anzeigen

html

HTML

<a href="#" class="foto1">
    <div class="foto1">

    </div>
</a>

zum verschieben des ganzen machst du einfach nochmal ein div drum rum... (<div ...> <a ...> ... </a> </div> )

Das Bild ist übrigens 400px hoch, also musst du das ganze auch 200px hochsetzen...

FCN Stefan

Danke werde das mal probieren

Tags