kostenloser Webspace werbefrei: lima-city


Objekt vergrößern und Position verändern bei "hover"

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    toolz

    Kostenloser Webspace von toolz

    toolz hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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
  4. fabian-riedel

    Kostenloser Webspace von fabian-riedel

    fabian-riedel hat kostenlosen Webspace.

    lassidaassi schrieb: Hi,

    versuchs doch mal mit CSS:

    &lt;div class="video"&gt;
    bla bla bla
    &lt;/div&gt;


    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
  5. e********l

    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
  6. n*************h

    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! :wink:
  7. Autor dieses Themas

    toolz

    Kostenloser Webspace von toolz

    toolz hat kostenlosen Webspace.

    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;
    }
  8. 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
  9. 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....
  10. 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 :-D

    ps3web
  11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!