mouseover mit html und CSS
|
| Verfasser |
Nachricht |
|
Beiträge: 1.130
Bewertung: 29
Registriert seit: Jun 2008
Status:
offline
|
mouseover mit html und CSS
Hi,
Ich habe eine Frage.
Und zwar habe ich ein Bild per CSS in meine html-Seite eingebunden, ganz normal eben.
Nun möchte ich aber, dass das Bild in Großansicht angezeigt wird wen man mit der Maus über das eingebundene Bild fährt.
Ich hab gelesen, dass es mit mouseover möglich ist, habe aber leider nicht genau herausgefunden wie es funktioniert…
Hier der html-Code von dem eingebundenen Bild:
Hier der CSS-Code von dem eingebundenen Bild:
#tlf {
background-image: url(link);
background-repeat: no-repeat;
position: absolute;
margin-top: 1171px;
margin-left: 408px;
width: 103px;
height: 100px;
}
Über Tipps wäre ich sehr dankbar!
Lg eret12
Dieser Beitrag wurde zuletzt bearbeitet: 06.02.2013 17:31 von eret12.
|
|
| 06.02.2013 17:30 |
|
|
Beiträge: 1.385
Bewertung: 48
Registriert seit: Dec 2011
Status:
offline
|
RE: mouseover mit html und CSS
mouseover ist meines Wissens eine Funktion aus JavaScript. Da wirst du mit HTML und CSS allein schlechte Karten haben.
|
|
| 06.02.2013 17:35 |
|
|
Beiträge: 334
Bewertung: 3
Registriert seit: Sep 2011
Status:
offline
|
RE: mouseover mit html und CSS
#tlf:hover {
hier die css Settings fürs hover
}
:hover für mousehover verwenden.
|
|
| 06.02.2013 17:35 |
|
|
Beiträge: 1.130
Bewertung: 29
Registriert seit: Jun 2008
Status:
offline
|
RE: mouseover mit html und CSS
Hi,
vielen Dank, das bringt mich schon ein ganzes Stück weiter...
aber es geht noch nicht so ganz wie es sollte 
CSS:
#tlf {
background-image: url(link);
background-repeat: no-repeat;
position: absolute;
margin-top: 1171px;
margin-left: 212px;
width: 103px;
height: 100px;
}
#tlf:hover {
background-image: url(link);
background-repeat: no-repeat;
position:absolute;
margin-top: 1171px;
margin-left: 212px;
width: 103px;
height: 100px;
}
Wenn ich jetzt mit der Maus über das Bild fahre verschwindet es einfach
Muss ich die beide iwi kombinieren?
Muss ich tlf:hover in der html auch mit einem div aufrufen?
Lg eret12
|
|
| 06.02.2013 18:00 |
|
|
Beiträge: 241
Bewertung: 4
Registriert seit: May 2012
Status:
offline
|
RE: mouseover mit html und CSS
|
|
| 06.02.2013 18:08 |
|
|
Beiträge: 19
Bewertung: 4
Registriert seit: Oct 2011
Status:
offline
|
RE: mouseover mit html und CSS
Hallo eret12,
habe dir hier eine Lösung mit CSS3 gebaut:
[Link: Registrierung erforderlich]
Bei den CSS-Deklarationen für dein :hover musst du nur Werte angeben die sich beim mouseover verändern sollen.
#tlf {
background-image: url(link);
background-repeat: no-repeat;
width: 100px;
height: 100px;
background-size: 100px 100px;
}
#tlf:hover {
background-size: 400px 400px;
width: 400px;
height: 400px;
}
Gruß,
dee
|
|
| 06.02.2013 19:10 |
|
|
Beiträge: 1.130
Bewertung: 29
Registriert seit: Jun 2008
Status:
offline
|
RE: mouseover mit html und CSS
Hi,
die Antwort von dee hat mich sehr weiter gebracht!
Das Problem ist nun, dass andere Texte und Bilder auf der Homepage im Vordergrund sind und mein vergrößertes Bild dahinter liegt...
Wie bekomme ich es hin, dass das Vergrößerte Bild immer im Vordergrund ist?
Zudem vergrößert sich das Bild immer nach unten hin...
kann man es auch so machen, dass es sich nach oben vergrößert?
Lg eret12
|
|
| 07.02.2013 19:27 |
|
|
Beiträge: 1.047
Bewertung: 35
Registriert seit: Oct 2009
Status:
Abwesend
|
RE: mouseover mit html und CSS
Versuch´s mal mit Z-Index
Dein Bild was vorne zusehen sein soll gibst Du den Wert 2, allen anderen Grafiken 1
Wenn Du Deinem Bild ein feste Größe geben würdest, sollte es sich auch nicht verschieben !
Gruß Plat
http://www.sponsor-board.de/images/english/postbit_thx.png(!https) nicht vergessen !!!
Ich wollte die Welt verändern, doch Gott gab mir den Quellcode nicht !
Es ist gelogen, dass Computerspiele Kinder beeinflussen. Hätte Pac Man das getan, würden wir heute durch dunkle Räume irren, Pillen fressen und elektronische Musik hören.
Dieser Beitrag wurde zuletzt bearbeitet: 07.02.2013 19:31 von PlatiniumHL.
|
|
| 07.02.2013 19:29 |
|
|
Beiträge: 1.134
Bewertung: 71
Registriert seit: Dec 2011
Status:
offline
|
RE: mouseover mit html und CSS
Alternativ kannst du's auch mal damit versuchen:
#tlf {
background-image: url(link);
background-repeat: no-repeat;
width: 100px;
height: 100px;
background-size: 100px 100px;
}
#tlf:hover {
zoom: 2; //Beliebigen Multiplikator einfügen
}
Mit freundlichen Grüßen,
Luca Postiglione
<[Link: Registrierung erforderlich]> "wordpress is an unauthenticated remote shell that, as a useful side feature, also contains a blog"
|
|
| 07.02.2013 19:35 |
|
|
Beiträge: 1.130
Bewertung: 29
Registriert seit: Jun 2008
Status:
offline
|
RE: mouseover mit html und CSS
Hi,
das mit z-index funktioniert 
Danke!
aber das Bild weitet sich immer nach unten aus...
es hat denselben "Ursprung" wie das kleine Bild...
Hier der CSS Code:
#tlf {
background-image: url(link);
background-repeat: no-repeat;
position: absolute;
margin-top: 887px;
margin-left: 212px;
width: 103px;
height: 100px;
background-size: 103px 100px;
z-index: 1;
}
#tlf:hover {
background-image: url(link);
background-size: 412px 400px;
width: 412px;
height: 400px;
border-style: solid;
border-width: 2px;
border-color: #ED1C24;
z-index: 2;
}
Es muss doch möglich sein, dass das Bild sich einfach nach oben hin ausrichtet...
Lg eret12
Dieser Beitrag wurde zuletzt bearbeitet: 07.02.2013 19:46 von eret12.
|
|
| 07.02.2013 19:46 |
|
|
