PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)
Beitrag
<blockquote data-quote="buyas" data-source="post: 1937611" data-attributes="member: 568841"><p><strong>AW: html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)</strong></p><p></p><p>da haste grundsätzlich recht davi, ich möchte es ja auch von der pike auf lernen, wäre aber schön, wenn ich parallel an meiner website arbeiten kann und vorankomme. by the way haste tips für mich für gute und ausführliche seiten oder gerne auch gute bücher ? wäre dir dankbar dafür.</p><p>ich hab mal etwas ausprobiert, wobei sich mir eine konkrete fragestellung aufgetan hat.</p><p>ich hab statt nen videoinhalt ein bild benutzt und folgenden code angewendet:</p><p></p><p>CSS</p><p>a .screenzoom {</p><p>position:relative;</p><p>top:199px;</p><p>left:357px;</p><p>width:78;</p><p>height:74;</p><p>z-index:3;</p><p>}</p><p></p><p>a:link .screenzoom {</p><p>position:relative;</p><p>top:199px;</p><p>left:357px;</p><p>width:78;</p><p>height:74;</p><p>z-index:3;</p><p>}</p><p></p><p>a:hover .screenzoom {</p><p>position: absolute;</p><p>display:block;</p><p>top:199px;</p><p>left:357px;</p><p>width: 180px;</p><p>height: 180px;</p><p>z-index:4;</p><p>}</p><p>a:active .screenzoom {</p><p>position: absolute;</p><p>display: block;</p><p>top: 199px;</p><p>left:201px;</p><p>width: 621px;</p><p>height: 369px;</p><p>z-index:5;</p><p>}</p><p></p><p>HTML</p><p></p><p><a href="#"><img src="test.jpg" class="screenzoom"></a></p><p></p><p>das funktioniert prima, zumindest was das a:active angeht, man muss allerdings außerhalb des vergrößerten bildes klicken um aus dem active rauszugehen, würde es aber lieber so haben, dass man durch klicken auf das bild da raus kommt, könnte mir da vllt jemand nen tip geben ?</p><p>es stellt sich mir dabei die frage: mit bildern geht's, aber beim video ( bzw object ) funktionert das a:active nicht. weißt vllt jemand, womit das zusammenhängt ? das wär super !!!</p><p></p><p>ps nach dem div-container und box model werd ich bei google ausschau halten <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /></p></blockquote><p></p>
[QUOTE="buyas, post: 1937611, member: 568841"] [b]AW: html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)[/b] da haste grundsätzlich recht davi, ich möchte es ja auch von der pike auf lernen, wäre aber schön, wenn ich parallel an meiner website arbeiten kann und vorankomme. by the way haste tips für mich für gute und ausführliche seiten oder gerne auch gute bücher ? wäre dir dankbar dafür. ich hab mal etwas ausprobiert, wobei sich mir eine konkrete fragestellung aufgetan hat. ich hab statt nen videoinhalt ein bild benutzt und folgenden code angewendet: CSS a .screenzoom { position:relative; top:199px; left:357px; width:78; height:74; z-index:3; } a:link .screenzoom { position:relative; top:199px; left:357px; width:78; height:74; z-index:3; } a:hover .screenzoom { position: absolute; display:block; top:199px; left:357px; width: 180px; height: 180px; z-index:4; } a:active .screenzoom { position: absolute; display: block; top: 199px; left:201px; width: 621px; height: 369px; z-index:5; } HTML <a href="#"><img src="test.jpg" class="screenzoom"></a> das funktioniert prima, zumindest was das a:active angeht, man muss allerdings außerhalb des vergrößerten bildes klicken um aus dem active rauszugehen, würde es aber lieber so haben, dass man durch klicken auf das bild da raus kommt, könnte mir da vllt jemand nen tip geben ? es stellt sich mir dabei die frage: mit bildern geht's, aber beim video ( bzw object ) funktionert das a:active nicht. weißt vllt jemand, womit das zusammenhängt ? das wär super !!! ps nach dem div-container und box model werd ich bei google ausschau halten :) [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)
Oben