Antworten auf deine Fragen:
Neues Thema erstellen

html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)

buyas

Nicht mehr ganz neu hier

hey ihr lieben !

zu allererst, ich bin neu im forum, hallo an alle :) ! desweiteren bin ich newbie und versuche mir grad selbst html, css beizubringen als " basis ".
ich bin grad dabei bzw versuche nen code zu erstellen anhand dessen eingebundene ( flash ) videos vergrößert werden und automatisch abgespielt werden, wenn man drüber fährt mit der maus.
wobei bei " mouseover " auf ne mittlere größe und bei klick auf die " volle " größe, jedoch nicht full screen, vergrößert wird.
allerdings habe ich mir zum autoplay beim drüberfahren mit der maus noch keine gedanken gemacht, sollte da aber jemand was zu wissen, wäre ich auch dafür dankbar :) !
bei meinem bisherigen code, funktioniert a:active also "klick" nicht beim video selbst, sondern nur in der ebene, was bezüglich des vergrößerns mein derzeitiges problem, welches ich leider nicht in den griff bekomme.
am liebsten wäre es mir, wenn ich es irgendwie hinbekommen könnte, dass das letzendlich auch ohne ebene nur bei anwendung auf das video selbst funktionieren würde.

hier der code, den ich bisher geschrieben habe ( achja wahrscheinlich sind die ganzen z-indices durcheinander, habe bissl rumprobiert ) :

CSS:

#bigger a {

}
#bigger a {
display: block; background: #257; width:78px; height: 74px; z-

index:5}

}
#bigger a:link {position:relative; width:78px; height: 74px; z-

index:5}





#bigger a:active {position:absolute; width:6px; height: 3px; z-

index:7}

#bigger a .screenzoom {

}

a:hover .screenzoom {
position: absolute;
display:block;
width: 180px;
height: 180px;

}
a:active .screenzoom {
position: absolute;
display: block;
width: 621px;
height: 369px;
}

HTML:

<div id="bigger">
<a href="#"><object type="application/x-shockwave-flash"

style="position: absolute; top:199px; left:357px" class="screenzoom"

width="78" height="74">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="testflash.swf" />
<param name="play" value="false" />
<param name="quality" value="best" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="config={videoFile: 'testflash.swf'}"

/>
</object></a>

<!--bigger--></div>

ps. ich versuche, wenn möglich, kein javascript zu verwenden !
 
Zuletzt bearbeitet:

mindraper

me[code].Java(Script)

AW: html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)

hi

simplest solution:
pack' um deine <object>-tags ein div. den <object>-tags selbst verpasst du eine weite und höhe von 100%, sofern du das wirklich via html-attributen lösen musst. normalerweise kannst du die width- und height-angaben auch weglassen, bin mir aber grad nicht sicher wie das bei <object>-tags ausschaut.

jedenfalls regelst du die breite / höhe dann über die umliegenden div-container und nicht mehr über das <object> selbst.
ich muss allerdings zugeben, dass ich dieses vorgehen des verkleinerns/vergrößerns von flashinhalten noch nie via css geregelt habe. es war nur ein gedanke von mir, falls du es nicht anders machen kannst/willst – ich sage jetzt nur: try & error-prinzip :)

andere lösung wäre, einen eventlistener im flashfilm selbst zu registrieren, über den die größe des films geregelt wird. dazu musst du dich aber in actionscript einarbeiten.

hoffe das hilft ( zumindest als ideenanstoß )

POST SCRIPTUM:
du hast da mitten in deinem html-code übrigens ein <span> stehen, das nirgends geschlossen ist. oder, falls es an späterer stelle geschlossen wird, ist deine syntax fehlerhaft.

z-index zu nutzen macht auch nur sinn, wenn es sich um positionierte elemente handelt ( also position: absolute; oder position: fixed; – bei position:relative; bin ich mir grad nicht sicher aber ich meine nicht ), weil z-index auf nicht-positionierte elemente keinen einfluss hat. z-index definiert das stacking ( auf der z-ebene, daher der name ) von positionierten elementen.

zu guter letzt muss ich feststellen, dass das post scriptum jetzt ca. so lang ist wie mein eigentlicher beitrag :)
 
Zuletzt bearbeitet:

buyas

Nicht mehr ganz neu hier

AW: html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)

danke für die schnelle antwort mindraper ! das <span> hab ich vergessen wegzumachen :s, entstammt einer verworfenen idee ..
naja es geht ja nicht um den " flashinhalt " an sich, sondern ums element eines " videos " .. inhaltlich wird das video ja automatisch " dem rahmen " des video-elements ( / objects ) an sich angepasst.
muss übrigens nicht unbedingt ein flashfilm sein, können auch andere formate sein, es geht mir ums eingebundene video an sich.
div ums object herum ? is doch grad schon oder ? steh grad bissl aufm schlauch .. div - container ? damit kenn ich mich noch nicht aus .. muss ich mir mal genauer anschauen ..
 

Davi2000

Nicht mehr ganz neu hier

AW: html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)

danke für die schnelle antwort mindraper ! das <span> hab ich vergessen wegzumachen :s, entstammt einer verworfenen idee ..
naja es geht ja nicht um den " flashinhalt " an sich, sondern ums element eines " videos " .. inhaltlich wird das video ja automatisch " dem rahmen " des video-elements ( / objects ) an sich angepasst.
muss übrigens nicht unbedingt ein flashfilm sein, können auch andere formate sein, es geht mir ums eingebundene video an sich.
div ums object herum ? is doch grad schon oder ? steh grad bissl aufm schlauch .. div - container ? damit kenn ich mich noch nicht aus .. muss ich mir mal genauer anschauen ..

Wie wäre es wenn du erstmal einen Schritt nach dem anderen machst? Bevor du irgendwelche Flashfilme versuchst einzubinden und zu animieren, lern doch erstmal die Basis von HTML und CSS.

Ein Div Container kannst du dir als Box vorstellen. Google einfach mal nach Box Model und du wirst fündig.
 
Zuletzt bearbeitet:

buyas

Nicht mehr ganz neu hier

AW: html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)

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 :)
 

Waldfee_81

Noch nicht viel geschrieben

AW: html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)

Wenn googeln gehst dann such doch mal nach little-boxes.de.
Auf dieser Seite ist für Anfänger sehr einfach und verständlich das Boxen System erklärt und liefert dir auch noch weitere gute Info's.
 

mindraper

me[code].Java(Script)

AW: html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)

hi.

so, bevor du jetzt 10000x gesagt bekommst, du sollst den großen G befragen:
eine erklärung zum box model findest du einmal hier:
( ganz ausführlich )
oder hier:
( einfacher gehalten )

im zuge dessen wirst du irgendwann auf ein fehlerhaftes verhalten des msie ( microsafts internet eskapade ähhh explorer ) stoßen, der das box model bis v8 ( bitte korrigieren falls falsch ) anders rendert als der rest der welt.

ein div-container ist das hier:
<div></div>

dass es dir um das video geht und nicht um das <object>-tag war mir schon klar :) der inhalt des <object>-tags ( also das video ) orientiert sich in seiner größe aber logischerweise an den dimensionen des <object>-tags. d. h., du kannst eine videodatei mit einer kantenlänge von 6400px X 4800px in ein <object>-tag mit einer kantenlänge von 320px X 240px stecken, dem video ist das egal.
es wird aber immer nur mit 320px X 240px angezeigt werden, weil das umgebende <object>-tag ja nunmal diese größe hat. sinnbildlich gesprochen wird das video innerhalb des <object>-tags "zusammen gepresst" wenn es größer, bzw. "aufgeblasen" wenn es kleiner als dieses ist.

ein beispiel, um dir meinen theoretischen aufbau des letzten posts mal "vor augen zu führen":

HTML:
HTML:
<div class="container_for_video">
      <object class="video" type="application/x-shockwave-flash">
             <param name="movie" value="testflash.swf" />
             <param name="play" value="false" />
             <param name="quality" value="best" />
             ...
      </object>
</div>

CSS:
Code:
.container_for_video {
      width: 400px;
      height: 300px;
}

.container_for_video:hover {
      width: 800px;
      height: 600px;
}

.video {
      width: 100%;
      height: 100%;
}

das ist allerdings – wie gesagt – ein gedankliches experiment, das ich persönlich nicht ausgetestet habe. einen versuch ist es allemal wert.

was gute bücher/lehrvideos/etc. angeht:

INET:
- selfhtml – als kostenloses nachschlagewerk das A und O. für jeden.
- css4you – ähnlich selfhtml, speziell für css.
- Google – der große G weiss ALLES. wie chuck norris ;)

BÜCHER:
ich persönlich finde die sachen von O'Reilly super, das ist aber geschmackssache. i. d. r. sind die aber vom inhaltlichen absolut top. ansonsten gibt es auch extrem viel von GalileoComputing. die sind m. E. nach bei speziellen sachen nicht so gut wie O'Reilly, für HTML und CSS aber auch einwandfrei.
am besten ist, in eine buchhandlung gehen und reinschauen. wenn dir der stil gefällt, in dem die bücher geschrieben sind und du verstehst was dort passiert, dann ist es schonmal gut. für HTML und CSS sind die meisten qualitativ so gut wie gleichwertig – zumindest nach meinen erfahrungen.

ein weiterer großer vorteil von büchern ist, dass du ohne probleme schnell nochmal nachschlagen kannst, wenn du etwas nicht wissen solltest oder vergessen hast. das geht meist auch schneller als in selfhtml o. ä. suchen, wenn du nicht ungefähr weisst, wo du das thema findest.

ein nachteil ist natürlich der preis. der kann u. U. relativ hoch sein. die beiden genannten verlage sind aber ihren preis an und für sich wert.

VIDEOS:
Video2Brain und GalileoComputing. beides gut. das von Waldfee erwähnte little boxes ist z.B. auch als video von Video2Brain erhältlich und wirklich gut. gar keine frage.

nachteilig ist natürlich auch hier der preis.


hoffe das hilft
 

buyas

Nicht mehr ganz neu hier

AW: html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)

danke für den tip waldfee !!!
vielen dank für deine ausführungen mindraper !!! ich hoffe, ich kann euch auch mal tatkräftig zur seite stehen .. vllt ja mit meiner seite, wenn sie fertig ist :) ..
ich hab das problem an sich jetzt anders und designtechnisch wahrscheinlich sogar eleganter gelöst, allerdings hat sich mir eine neue, wahrscheinlich nur kleine problemstellung ergeben .. wenn sich dies lösen ließe, wärs perfekt :D !!
habe glaub ich das mit den div - containern grundsätzlich kapiert .. benutze jetzt 2 container, aber die sind leider nicht unabhängig voneinander, was heißt, dass das erste wenns durch hover größer wird hinter dem zweiten liegt ganz gleich wie die z-indices eingestellt sind .. hätte vllt jemand ne idee, wie ich das hinbekomme, sie unabhängig voneinander zu halten, sodass die gehoverten ebenen die normal großen überlagern können ? das wär meeeeega :) !! hab über google leider nichts verwertbares gefunden, da ich leider nich so recht weiß wie ich am effizientesten suche, was ja wie du schon schriebst das problem beim lernen durchs internet ist :s ..
 

buyas

Nicht mehr ganz neu hier

AW: html/css-Code: Videos(-elemente) vergrößern (bei "mouseover" und/oder klick)

habe inzwischen hilfe zu dem problem bekommen :) .. allen einen schönen tag noch !!!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.565
Beiträge
1.538.065
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben