Objekt vergrößern und Position verändern bei "hover"
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausprobieren
code
datei
ergebnis
korrektheit
kreisen
objekt
pack
position
problematik
sperren
standardwert
tag
trick
versuch
versuchen
verwenden
verzichten
video
wende
-
Also folgendes:
Ich möchte, sobald ich mit der Maus über ein ein tag/objekt">Objekt gehe, dass dieses vergrößert wird und auch die Position verändert wird. In dem Objekt- Tag (übrigens ein Youtube- Video) ist die Größe (des Videos) festgelegt. Am Liebsten wäre mir, das mit "hover" hinzukriegen, ich habe noch kein JavaScript implementiert und habe das auch nicht vor, da ja nicht jeder JS aktiviert hat...
Wie realisiere ich das? Bitte nur mit Code antworten.
Beitrag zuletzt geändert: 9.5.2009 19:17:50 von toolz -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi,
versuchs doch mal mit CSS:
<div class="video"> bla bla bla </div>
und in der css datei:
.video:hover { position: absolute; left:25%; top:50%; width: 400px; }
usw...
also ich kann nicht garantieren das es tut aber du kannst es ja mal ausprobieren
Beitrag zuletzt geändert: 10.5.2009 10:15:56 von lassidaassi -
lassidaassi schrieb: Hi,
versuchs doch mal mit CSS:
<div class="video"> bla bla bla </div>
und in der css datei:
.video:hover { position: absolute; left:25%; top:50%; width: 400px; }
usw...
also ich kann nicht garantieren das es tut aber du kannst es ja mal ausprobieren
Nein so funktioniert das nicht!
Das geht höchstens mit PHP
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/abcdehjgdhjsgd"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/abcdehjgdhjsgd" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
Die fettgedruckten müssen irgendwie verändert werden - Wie und ob das geht weiß ich nicht!
Frag doch mal im PHP Forum
Beitrag zuletzt geändert: 11.5.2009 16:27:50 von fabian-riedel -
Zb. mit Javascript ;)
Über das CSS könnte man es versuchen, aber da Videos selten immer die gleiche Größe haben ist es über Javascript eleganter.
Ansonsten würde ich es über div.video a object { standardwerte } und div.video a:hover object { hoverwerte } versuchen.
Ich bin mir allerdings nicht sicher ob das Object Tag innerhalb eines a Tags stehen darf und überhaupt auf den Hover reagiert. Bei anderen Elementen geht dieser Trick ganz gut, nur mit Object hab ich es noch nicht probiert.
Beitrag zuletzt geändert: 11.5.2009 16:58:27 von evil-devil -
Hallo,
JavaScript ist inzwischen bei fast allen aktiviert.
Ich würde zur Lösung deines Problems mal jQuery verwenden (www.jquery.com).
Sowas, was du suchst, ist da auch als Beispiel in der Dokumentation!
Ist sehr einfach!
-
Habs mittlerweile auch mit CSS gelöst. Das ist eleganter und außerdem lässt sich das mit jedem Browser anzeigen. Das Video befindet sich in einem div namens "video".
Der Code sieht dann letztendlich so aus:
.video:hover{ left: -180px; width: 350px; height: 350px; border-width: medium; border-color: #999999; border-style: solid; padding: 0px; } .video:hover object{ width: 350px; height: 350px; } .video:hover embed{ width: 350px; height: 350px; } -
Noch zwei Dinge muss ich hier aus Korrektheit richtigstellen:
1.Nein so funktioniert das nicht!
Das geht höchstens mit PHP\n by fabian-riedel
Nein, soweit ich das weiß geht es gerade mit PHP nicht. PHP ist ein Hypertext Preprocessor, also, wenn die Seite einmal "erstellt" ist, lässt sich da nichts mehr ändern.
2.JavaScript ist inzwischen bei fast allen aktiviert.\n by nico-stuhlfauth
Das ist eben auch falsch. Was ich so mitbekomme - und besonders in diesen Kreisen der "aufgeklärten" User - ist es üblich eben Java-Script zu sperren. (NoScript) Deswegen hatte toolz vollkommen Recht, auf JavaScript zu verzichten. Hat ja auch so geklappt. CSS ist eine Wunderkiste. :-)
mfg
s1m13 -
s1m13 schrieb:
Noch zwei Dinge muss ich hier aus Korrektheit richtigstellen:
1.Nein so funktioniert das nicht!
Das geht höchstens mit PHP\n by fabian-riedel
Nein, soweit ich das weiß geht es gerade mit PHP nicht. PHP ist ein Hypertext Preprocessor, also, wenn die Seite einmal "erstellt" ist, lässt sich da nichts mehr ändern.
2.JavaScript ist inzwischen bei fast allen aktiviert.\n by nico-stuhlfauth
Das ist eben auch falsch. Was ich so mitbekomme - und besonders in diesen Kreisen der "aufgeklärten" User - ist es üblich eben Java-Script zu sperren. (NoScript) Deswegen hatte toolz vollkommen Recht, auf JavaScript zu verzichten. Hat ja auch so geklappt. CSS ist eine Wunderkiste. :-)
mfg
s1m13
Natürlich ist es nicht möglich das ergebnis mit PHP zu erzielen, wenn man kein AJAX verwenden möchte. Es is natürlch weitaus besser, wenn man diese Sache mit JS umsetzt. auch ich würde jquery empfehlen. pack doch einfach diese css- anweisung, die du zur zeit hast in einen noscript- tag. damit hättest du einmal die schön methode mit Javascript und andererseits die paar leute abgedeckt, die mit NoScript surfen. Wenn du dich an den normalen internetnutzer wenden möchtest (also ca. 80% aller nutzer) wird dann natürlich die gut aussehende variante gezeigt....
-
Hi,
zu deiner Problematik gabs bei Alistapart mal vor kurzem einen Artikel:
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
Hier gehts auch um Videogrößen. Du musst dann nur noch einbauen, dass es bei :hover größer wird
ps3web -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
