✔ Rollover oder Mouseover mit PS CS3

Status
Nicht offen für weitere Antworten.
G

gnumpf

Grünschnabel
Hallo zusammen.

Ich bin vor kurzem von PS 7 auf PS CS3 umgestiegen und hab da so meine Schwierigkeiten mit.
Ich versuche eine Web Seite zu erstellen und will die Rollover Effekte einbauen.
Mit ImageReady war das für mich kein Problem aber mit dem neuen CS3 ist IR mit PS zusammen geschmolzen und ich find nichts mehr wieder.

So, meine Frage: wie erstelle ich den besagten RollOver?
Dass ich ins Webdesign Modus umschalten muss hab ich herausgefunden. Wie es aber weiter gehen soll...kein Plan....

Gesucht hab ich hier im Forum aber nichts für CS3 gefunden und google hat mich da auch nicht weiter gebracht. Die Hilfe in PS ist auch nicht brauchbar und das Video2Brain...naja....nett aber nicht das was ich suche.
Vielleicht weißt jemand von euch weiter.

Danke im Voraus!
 
Nimm einfach einen Editor und trage das ein. schon hast du ein Rollover.

HTML: 
 <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','bild1.jpg',1)"><img src="bild2.jpg" name="Image1" border="0" id="Image1" /></a>

Wenn du es mit css machst ist viel besser.

Gruß Peter
 
Hmmm, wieso nähmen die so ein wichtiges Werkzeug raus?!
Wenn ich es mit HTML-Editor mache kostet mich eine aufwendige Seite 1 Stunde was vorher in 10min geschafft war.
Dass im Dreamweaver diese Aktion eingebaut wurde ist mir bekannt. Aber jetzt muss ich jedes Slices extra abspeichern was vorher automatisch ging. Da muss eine einfache Möglichkeit geben die Rollover Aktionen durchzuführen. Nicht um sonst haben die ein "Webdesigne" Arbeitsbereich eingerichtet.

Außer dem steht das in der Hilfe:
Slice-Ausgabeoptionen
Im Optionssatz „Slices“ können Sie die folgenden Optionen festlegen:
(…)
„Standardmäßige Slice-Benennung
Wählen Sie aus den Popup-Menüs die gewünschten Elemente aus oder geben Sie Text ein, um Vorgabenamen für die Slices zu definieren. Die Elemente umfassen den Dokumentnamen, das Wort Slice, Zahlen oder Buchstaben für Slices oder Rollover-Statuswerte, das Slice-Erstellungsdatum, Satzzeichen oder nichts.“
Erstellen von Rollovern
„Verwenden Sie die vorgegebenen Schaltflächenstile in der Stile-Palette, um auf schnelle Weise Rollover-Schaltflächen mit den Status ‚Normal’, ‚mouseover’ und ‚mousedown’ zu erstellen….“

Wo finde ich die den Optionssatz Slices?
Also die Hilfe von Adobe ist nicht wirklich hilfreich :/

PS: OK, den Optionsatz hab ich gefunden, der unterscheidet sich aber total von dem in der Hilfer angegeben Fäldern.
Laut Hilfe sollen da möglich sein die Punkte:
Tabelle erstellen
Leere Zellen
TD W&H
Abstandhalter-Zellen
CSS erstellen
Mit Verweis auf...
Standardmäßige Slice-Benennung
festzulegen. Leider sind die da nicht vorhanden. Oder ist das nur in der Extendet Version möglich?
 
Zuletzt bearbeitet:
Man könnte auch noch zusätzlich eine ältere PS-Version installiert haben, in deinem Fall PS7.
Dann hast du Image Ready und CS3.
 
Also ich habe ja auch noch die CS2 und die 5,5 Version PS zu laufen bei mir. aber nur wegen Roll over ist das nicht so der Bringer.
probier doch mal das.

im HTML Dokument machst du diesen Eintrag
HTML: 
<div>
            <a href="ambiente.php" target="_parent" class="roll10"></a>        
</div>
und dann in der CSS noch das.

HTML: 
a.roll10 {
   position:absolute;
    background-repeat:no-repeat;
    background-image: url(../static_img/dein_bild.jpg);
    left:62px;        /*dieses gibt die Position den Bildes an */
    top:251px;       /*dieses gibt die Position den Bildes an */
    width:263px;    /*dieses gibt die Größe den Bildes an */
    height:62px;    /*dieses gibt die Größe den Bildes an */
}
a.roll10:hover {
    background-position:0px -62px;
    left:62px;
    top:251px;
    width:263px;
    height:62px;
}
Dein bild macht man dann einfach (dieses Beispiel) 253 px breit, und 2mal 62px hoch.

das bild sollte dann so ausschauen wie das angehängte.
und schon ist das roll over fertig. ganz ohne JavaScript und der gleichen.
natürlich lassen sich noch mehr Zustände einbauen als nur Hover.

nun wünsche ich mal viel Spaß
Gruß Peter
 

Anhänge

  • kontakt.jpg
    kontakt.jpg
    16,4 KB · Aufrufe: 647
Hmmm.....die Lösung mit CSS ist interessant.
Aber es geht mir nicht um den HTML-, JAVAScript- oder CSS-Code. Einzig um die Speicherung der Bilder.
Wenn ich eine Seite erstelle ist die Grafik 1000px zu 600px groß.
Diese beinhaltet verschiedene bereiche unter anderen die Buttons die animiert werden sollen. Wenn ich die Grafik jetzt mit Slices zuschneide, will ich nicht jedes mal die einzelnen Ebenen extra abspeichern müssen sondern das PS es automatisch macht.
Das war mit ImageReady schön realisiert.
 
So ganz kann ich deinem Problem nicht folgen. wahrscheinlich mache ich zuwenig mit PS.
ich habe mir lieber mein Teplate in PS gebaut und dann schön in Slices zerlegt, und alles je nach bedarf in 2-3 Gängen gespeichert mit den einzelnen Ebnen die ich je nach Grafik brauche.

Im Anschluß wird alles schön W3C konform zusammengebaut, meist mit nem guten Editor (Ultra Edit 13) und TopStyle por3.1. Da dauert alles maximal 2 Stunden ohne Grafikarbeiten und schon hat man ein schönes Tabellen loses Layout.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück