Antworten zum Thema „Wie mach ich solche Rollover??“

[mEtHoD-22]

Hi jungs und mädels!

Ich bräuchte mal eurer Hilfe!
Ich will solche Rollover machen wie die also wenn man drauf geht mit der maus das drunter der rest kommt!! Hier ein Beispiel!

Es wär toll wenn mir jemand da weiter helfen könnte wär sehr dankbar!!


MfG
mEtHoD

 

[Crusher]

Also, erstmal kann man meines Wissens nach keine Rollovereffekte in Photoshop selbst machen. Sollte ich da falsch liegen, Schande über mich.
Ich mache solche Rollovers immer in Dreamweaver z.B. Und zwar gehe ich hin, slice meine Page, speicher sie fürs Web, änder die Page um, so dass der Rollovereffekt zum Vorschein kommt. In deinem Fall mache ich die Links in die schwarze Leiste und Speicher es erneut fürs Web.
Dann gehst du hin und fügst in Dreamweaver eine Tabelle ein. Dort machst du halt deine Navilinks und die schwarze Leiste rein. Jedoch fügst du die nicht als normales Bild ein, sondern als Rollover Bild.
So sollte es auf jeden Fall klappen. Sieh es nur als Vorschlag, es könnte anders natürlich leichter gehen.^^

MfG
Crusher

 

[mEtHoD-22]

jo das weiss ich auch ich mach mir immer zwei bilder ein orginal und das zweite als rollover ist klar aber wie mach ich solche rollover wie bei dennen auf der HP da die runter kommen

 

[Tim]

Muss das aufklappende Menü unbedingt horizontal sein oder geht auch vertikal?

 

[mEtHoD-22]

sollten schon horizontal sein, da ich das design schon fast fertig hab, fehlen nur die buttons

 

[Tim]

Dann kann ich dir so leider nicht helfen, ich behaupte spontan, dass das mit Javascript funktioniert, damit kenne ich mich nicht aus, kann man vermutlich auch mit CSS lösen, frag mich aber bitte nicht wie.

Vielleicht findest du da ja was.

Achso, und ich verschieb mal nach HTML+CSS, das hat mit Photoshop ja nun nichts zu tun.

 

[mEtHoD-22]

stimmt verdammt das hat damit nix zu tun sorry habs verpeilt

edit: naja die seite it auf englisch und ich habs net so mit englisch hilft mir net weiter

Bitte keine Doppelposts, du hast die Möglichkeit den Edit-Button zu benutzen! wAldii

sorry habs vergessen

 

[pitTti]

Also, erstmal kann man meines Wissens nach keine Rollovereffekte in Photoshop selbst machen. Sollte ich da falsch liegen, Schande über mich.

okay, schande über dein haupt
es geht zwar net direkt in ps aber in image ready..is ja dabei. da kannste solche roll over effekte machen..wie ich festgestellt habe, wurde hier schon des öfteren nach roll over effekten gefragt.. ich glaube ich schreibe mal nen tutorial dazu. dir das jetzt genau zu erklären würde sich als schwierig erweisen. als beispiel werde ich dann eine ähnliche navi wie die von der seite benutzen, damit auch ja nix schief läuft heute abend, morgen oder übermorgen is das tut dann da, ma schauen ob ich heute noch lust hab eins zu schreiben.

 

[shakor]

joa also kp aber wie weiss ich auch net

 

[NicoB]

Was ist denn daran so schwer??

Erstmal machst du ganz normale Mouseovers (der Button änder sich bein Drüberfahren). Das kannst du z.B. mit PS oder IR o.ä machen.

Nun erstellst du verschiedene Ebenen unter den Buttons und füllst sie mit Text (Eine Ebene mit dem Text, der bei Button 1 gezeigt werden soll, usw.).

Nun verschiebst du die Ebenen ein wenig, sodass sie sich unter den Button befinden (also, so wie in deinem Beispiel).

Nun einfach mit dem gewünschten Code, die einzelnen Ebenen ein- und ausblenden:

Wenn mouseover_button1, dann: blende ebene1 ein, blende alle anderen ebenen aus.

Das machst du dann für alle Ebenen.

Den JavaScript Code findest du bei Google. Alternativ dazhu darf auch ein vernünftiger WYSIWYG-Editor verwendet werden.

 

[Gegenton]

ähm. schließe mich voll waldiii an.

java script zu nehmen wäre dumm.
manche browser haben übelste probleme damit.

wurschtel doch ruhig mal durch cssplay durch. da sind wunderbare sachen drin.
und sie sind schnell, unkompliziert, leich editierbar, valid und lassen sich von jedem browser auslesen.

bessere möglichkeit gibts nicht, grade für die menuform.

 

[mEtHoD-22]

ich danke euch nur mit der seite cssplay komm ich net klar kann kaum englisch

 

[BeSt]

Hi.

Wenn es um das Thema dynamische Navigationsmenus geht, dann kann ich nur immer wieder die Seite http://dhtmlcentral.com/ empfehlen.

Hier gibt es jede Menge Menus (auch solche, wie du möchtest) komplett fertig und kostenlos (wenn der Copyright-Vermerk belassen wird). Diese Menus kann man dann nach seinen eigenen Vorstellungen anpassen und erweitern. Alle dort angebotenen Skripte laufen auf (so ziemlich) allen denkbaren (modernen) Browsern.

Ein Blick drauf lohnt sich auf jeden Fall.

Viel Erfolg.
Benni

 

[kleinerVampir]

Das ganze kannst du wie bei deiner "Demoseite" auch , mit Javascript erstellen

Hier nen Beispiel

<style type="text/css">
.bereich{
display: block;
color: #FFFFFF;
background-color: #000000;
text-align: center;
}

a.link{
display: block;
color: #FFD700;
font-family: Verdana, Arial;
font-size: 13px;
text-decoration: None;
border-bottom: solid 1px #FFFFFF;
}

a.link.bereich{
display: block;
background-color: #000000;
width: 100px;
height: 25px;

}

a.link:hover{
display: block;
color: #000000;
background-color: #FFD700;
}
</style>

<script type='text/javascript'>
 function anzeigen(das){
 if(document.getElementById(das).style.display=='none') 
 document.getElementById(das).style.display='block'; 
 else document.getElementById(das).style.display='none';}
 </script>

<table cellPadding=0 cellSpacing=0 style="position: absolute; top: 10px; left: 150px;">
<tr>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#1')" onMouseout="anzeigen('menue#1')">
Nummer 1
<span id="menue#1" style="display: none;">
[url=""]Demolink 1.1[/url]
</span>
</div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#2')" onMouseout="anzeigen('menue#2')">
Nummer 2
<span id="menue#2" style="display: none;">
[url=""]Demolink 2.1[/url]
</span>
</div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#3')" onMouseout="anzeigen('menue#3')">
Nummer 3
<span id="menue#3" style="display: none;">
[url=""]Demolink 3.1[/url]
</span>
</div>
</td>
</tr>
</table>

müsstest du allerdings in Form und Farbe anpassen bzw. erweitern

Hoffe das hilft dir

LG kleinerVampir

 

[emily12345]

RollOver mit Bildern und Layern

Die Menübilder haben das Namensformat: *_n.* bzw *_h.* (bild1_n.gif)
Die Layer sind Div-Container (<div id='menuLayer1'>...</div>)

Der Code Lautet:

[img]images/navipic1_n.jpg[/img]

<div id='menuLayer1' style='position:absolute; top:123; left:234; width:124; height:124;'>MenüPunkt1
MenüPunkt2
...</div>

Das tauscht das Bild bei Rollover:

this.src=this.src.replace('_n.','_h.');

Und das schaltet den Layer mit den Menüpunkten sichtbar/unsichtbar:
document.getElementById('menuLayer1').style.visibility=...

Dieses einfach im QuellCode ansehn

Das ganze ist auch kaskadierbar und kann auch in eine Komplexere Javascriptfunktionalität eingebaut werden. Der Divcontainer muss mit

style="position:absolute; top:; left:; width:; height:;"

genauer definiert werden.

 

[mEtHoD-22]

jungs ich habs geschnalt vielen dank