Wie diesen Effekt erstellen

Unregistriert

Hallo ich habe eine Webseite entdeckt, wenn man mit der Maus über die Youtube/Facebook Logos fährt heben die sich hervor. Wie funktioniert das denn? Die haben irgendwie auch Ihren Quellcode versteckt so das er fast gar nicht mehr eingesehen werden kann. Das einzigste was i8ch sehe ist folgendes:

HTML

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>187ers!</title>
    <style type="text/css">
    body {
	background-color: #000;
}
    </style>
	</head>

<body leftmargin="no" topmargin="no" marginwidth="0" marginheight="0">
	  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="100%" id="menu" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
			<param name="movie" value="website.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#000000" />
			<embed src="website.swf" quality="high" bgcolor="#000000" width="100%" height="100%" name="menu" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
		</object>
	</body>
</html>

Alles anzeigen

Hat mir jemand so ein Script das diesen Effekt erzielt, oder gibts ein Tutorial zu. ich bin kein In4matiker sondern Quereinsteiger. herzlichen Dank im vorraus

Bandit

Das ist Flash, deswegen siehst du nicht mehr Quellcode

Tobse

Das kannst du mit JavaScript und jQuery ähnlich hinbekommen. Einfach einen <div>, darin ein img-tag auf das Bild. Bei mouseover verniedrigst du das padding des divs und erhöhst die größe des bildes, andersrum bei mouseleave.
Siehe dazu http://www.jquery.com, Stichwort effekte -> $.animate

Unregistriert

is des schwerer wie PHP(bin da auch erst Anfänger/Fortgeschritten), und ist dieses Tutorial empfehlenswert --> http://www.flashworker.de/tutorial/unser_tutorial.html

Würde das gerne auch erlenerne, funktioniert das immer in allen Browsern. hat das was mit Adobe Flash Player zu tun?

Dodo

Zitat von Tobse

Das kannst du mit JavaScript und jQuery ähnlich hinbekommen. Einfach einen <div>, darin ein img-tag auf das Bild. Bei mouseover verniedrigst du das padding des divs und erhöhst die größe des bildes, andersrum bei mouseleave.
Siehe dazu http://www.jquery.com, Stichwort effekte -> $.animate

Wenn der Themenersteller hier den Flash-Content nicht erkennt, denkst du echt, er kann das mit JavaScript hinbekommen, indem er "einfach" einen <div> erstellt ...?

Und an den Themenersteller:
Um solche Animationen zu erstellen, solltest du dich zuerst richtig mit HTML und CSS auseinandersetzen, um die Grundlagen zu beherrschen.
Anschließend kannst du JavaScript, Flash, JavaFX, oder eine andere Technik lernen, mit der du solche Animationen hinbekommst.

Unregistriert

XHTML(struktur) und Css(design, selbstverständlich ausgelagert) kann ich gut, Javascript(kann ich gar nicht) is net so meine Welt. Da mag ich PHP(auch OOP in Verbindung mit MySQL) lieber und finde es einfacher, aber damit geht das definitiv nicht. kannst mal ein ganz einfachen Flash Code für mich posten, vielleicht nur wie man damit ein satz ausgibt. Damit ich mal seh was da so auf mich zu kommt...

Tobse

Flash is dafür unsinnig. Hier ist das Javascript:

Code

window.onload=function() {
       $("#img_container").mouseover(function() {
        $("#img_container img").animate({width:501,height:407},50);
       });
       $("#img_container").mouseleave(function() {
        $("#img_container img").animate({width:491,height:397},100);
       });
    }

das "#img_container" und "#img_container img" einfach mit den entsprechenden CSS-Selektoren ersetzen. Dann klappts eig. schon, du musst aber noch das in deinen <head>:

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

-Bambino-

Für

Zitat

ich bin kein In4matiker

sollte eigentlich jede Aussage verweigert werden..

Aber wie schon gesagt wenn nur dieser Effekt, dann JS, ansonsten nutz ich immer gerne flash und kann das nur empfehlen!

Unregistriert

Zitat von -Bambino-

Für sollte eigentlich jede Aussage verweigert werden..

hehe recht haste..

Tags