+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: mouseover mit html und CSS (/showthread.php?tid=35316)
mouseover mit html und CSS - eret12 - 06.02.2013 17:30
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:
PHP-Code:
<div id="tlf"></div>
Hier der CSS-Code von dem eingebundenen Bild:
PHP-Code:
#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
RE: mouseover mit html und CSS - Dream-Code - 06.02.2013 17:35
mouseover ist meines Wissens eine Funktion aus JavaScript. Da wirst du mit HTML und CSS allein schlechte Karten haben.
RE: mouseover mit html und CSS - gentlemon - 06.02.2013 17:35
Code:
#tlf:hover {
hier die css Settings fürs hover
}
:hover für mousehover verwenden.
RE: mouseover mit html und CSS - eret12 - 06.02.2013 18:00
Hi,
vielen Dank, das bringt mich schon ein ganzes Stück weiter...
aber es geht noch nicht so ganz wie es sollte
CSS:
PHP-Code:
#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
RE: mouseover mit html und CSS - Jerko - 06.02.2013 18:08
Ich hab mal ein bisschen gegoogelt und das hier gefunden:
[Link: Registrierung erforderlich]
mfg
RE: mouseover mit html und CSS - dee - 06.02.2013 19:10
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.
Code:
#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
RE: mouseover mit html und CSS - eret12 - 07.02.2013 19:27
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
RE: mouseover mit html und CSS - PlatiniumHL - 07.02.2013 19:29
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
RE: mouseover mit html und CSS - Luca - 07.02.2013 19:35
Alternativ kannst du's auch mal damit versuchen:
PHP-Code:
#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
}
RE: mouseover mit html und CSS - eret12 - 07.02.2013 19:46
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:
PHP-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
RE: mouseover mit html und CSS - Luca - 07.02.2013 19:48
Hast du vielleicht mal einen Link wo ich mir deinen Fall live ansehen könnte?
RE: mouseover mit html und CSS - eret12 - 07.02.2013 19:56
Hi,
ja habe ich:
[Link: Registrierung erforderlich]
Das Bild des ersten Fahrzeugs...
Lg eret12
RE: mouseover mit html und CSS - dee - 08.02.2013 09:52
Hallo eret12,
füge deiner #tlf:hover-pseudoclass einfach
Code:
top: -200px;
hinzu (-200px ist hier beispielhaft, kannst an deine Anforderung anpassen).
Falls du das Bild noch etwas weiter Links angezeigt haben möchtest kannst du mit
Code:
left: -100px;
arbeiten.
Gruß,
dee
RE: mouseover mit html und CSS - eret12 - 10.02.2013 20:37
Hi,
eine soweit funktioniert das nun alles...
Allerdings gefällt mir die Version der alten Seite besser...
Hier folgt der Mouseover Befehl der Maus, am besten einfach schnell auf der Seite angucken, ich weiß nicht wie man das richtig beschreiben soll.
Einfach über eins der Bilder mit der Maus fahren:
[Link: Registrierung erforderlich]
Der Code müsse in etwa so aussehen:
PHP-Code:
<img onmouseover="(src='Link Bild Groß')" onmouseout="(src='Link Bild Klein')" src="Link bild Klein" alt="" border="0" />
Wen ich den Code aber übernehme auf die neue Seite wird so lediglich ein ganz normales :hover wie mit css auch erstellt...
wie bekomm ich es nun aber so hin wie auf der alten Seite?
Lg eret12
RE: mouseover mit html und CSS - Fujikatoma - 10.02.2013 20:58
Wieso möchtest du jetzt javascript benutzen ?
RE: mouseover mit html und CSS - Kevv - 10.02.2013 20:59
Schau dir doch einfach den Quelltext an vond er alten Seite.
Dort steht:
Code:
<a class="Stil18" onmouseout="UnTip()" onmouseover="Tip('<img src=../Bilder/tooltip_bilder/vu_28_10_1.png width=650 height=500 center>', WIDTH, 650, PADDING, 6, BGCOLOR, '#ffffff')">
<img width="auto" height="auto" border="0" src="../Bilder/einsatzbilder/vu_28_10_2011/vu_28_10_1_tmb.png">
</a>
so und die Funktion Tip() sowie UnTip() kommen aus dieser Datei
Code:
<script src="../java_Daten/wz_tooltip.js" type="text/javascript">
Diese in den <head> oder in den <body>(musst du gucken, wie es funktioniert) einbinden. Den Pfad ggf. noch abändern.
RE: mouseover mit html und CSS - eret12 - 10.02.2013 21:06
@Fujikatoma:
mir gefällt es so wie in der alten Seite eben besser...
Daher benutzt ich jetzt doch java...
@myfarynet.eu:
Vielen Dank!
Ich wusste nicht dass ich die Datei in den <head> bereich einbinden muss...
bzw. dass die Datei benötigt wird...