Div boxen wie mac iconmenü vergrößern und verklein

hallo an alle,

ich hatte vor einiger zeit eine Webseite gefunden mit der sich eine reihe von Bilder beim überfahren vergrößern und wieder verkleinerten ähnlich der Steuerung des Mac in der untern Mitte.

Ich hoffe jemand kann mir sagen wie sich so etwas nennt.

Cu und Danke

Stefan

Hallo Stefan,

Einen DIV zu vergrößern, wenn man „drüberfährt“ ist eigentlich ganz einfach.
Hast du dich schonmal mit CSS 3 beschäftigt?
Wenn nicht, dann wirds Zeit! :wink:

Ich nehme Beispielsweise einen DIV mit der „ID Test“:
Inhalt

Danach brauche ich eigentlich kein weiteres HTML mehr, sondern nur noch CSS.

CSS, kann man per externer Datei:

oder direkt in der HTML Datei definieren:

<!–Hier meine CSS Eigenschaften -->

So sieht dann die testdatei.css aus:
#test {
width:100px; /* gewünschte Breite des DIV */
height:70px; /* gewünschte Höhe des DIV */
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
}
#test:hover { /* :hover steht für die Eigenschaften beim „Drüberfahren“ */
width:120px; /* gewünschte Breite des DIV beim „Drüberfahren“ */
height:100px; /* gewünschte Höhe des DIV beim „Drüberfahren“ */
}

Erklärung von „transition“:
-webkit- für Safari und Chrome
-moz- für Mozilla Firefox
-o- für Opera
(Ja, jeder Browser eine eigene Eigenschaft. Ich hoffe auch, dass bald alle Browser „transition“ ohne Browserspezifischen-Prefix verstehen)

„all“ steht für alle, d.h. alle Eigenschaften werden „übergeblendet“
„1s“ ist die Zeit des Überblendens
„ease-in-out“ steht für Die Form des Überblendens. Weitere Infos hier:
http://www.the-art-of-web.com/css/timing-function/

das „all“ kann auch durch „width“ und „height“ ersetzt werden, dann sieht das aber so aus:

..transition:width 1s ease-in-out,height 1s ease-in-out;

Dadurch ist es natürlich unterschiedlichen Eigenschaften unterschiedliche „Überganszeigen“ zu geben. :wink:

Hoffe du verstehst alles!
Bei Fragen, einfach antworten!

LG Alexander

Naja, eigendlich ist das menu mouse position abhängig .

kann man auf einer funktion abbilden, wo der aktuelle wert das maximum ist und nach rechts und links wirds halt kleiner.