MouseOver

[dorftrottel]

Guten Tag zusammen :D
Mich würde mal interessieren, ob ich mit PSE einen Mouse-Over Effekt erzielen kann.
Muss nichts spezielles sein :D
Sonst ist es mit einem Freeware Programm möglich?
Oder gibt es ein Programm bei dem ich die .psd Datei mit 2 Ebenen einfügen kann
und diese macht dann einen CSS Code für mich? Hab keine Ahung von den ganzen Programmsprachen,
aber mich würde es trotzdem mal interessieren.
Liebe Grüsse
dorftrottel :emo_biggr

[kritzel]

Ich hab' damals den Mouseover-Effekt mittels zweier Bildchen gemacht (nicht mittels Ebenen). Einfach erst den Button ohne Mouse-Over erzeugen und speichern. Dann Effektebenen hinzufügen bzw. Ergänzungen machen und wieder abspeichern. Die Effekte/Ergänzungen habe ich auf weitere Ebenen gelegt, so dass ich diese nur unsichtbar schalten musste, um den Originalknopf wieder zu sehen.

[dorftrottel]

Vielen Dank!
Aber ich weiss leider immer noch nicht was ich jetzt genau machen muss damit ich eine Datei habe, die ich im Browser anzeigen kann und dann habe ich den Mouseover :D
Ich habe auch keine Ahnung welchen Editor ich für CSS brauch, bzw. wo man CSS schreiben kann. Habe mal im Internet ein paar Seiten gefunden, da wird zwar überall alles erklärt und man hat dann auch den Text, aber ich weiss nicht was mit wem zusammenhängt.
Liebe Grüsse dorftrottel

[Scubamarco]

du brauchts zwei gleich große Gifs.
Eine mit und eine ohne den Mouseovereffekt.
Dann im HTML-Programm zuweisen. Das Programm Nyu kann das
sehr einfach machen.

[gelöschter User]

Du meinst sicher NVU (http://www.chip.de/downloads/Nvu-HTML-Editor-1.0-Final_13014735.html) ;)

[dorftrottel]

Super auch euch zweien danke ich für die Antworten :D
Ich lade mir mal dieses Programm runter und schauen mal wies aussieht.
Du meinst mit:
Eine mit und eine ohne den Mouseovereffekt.
Dass heisst, wenn ich zB. will, dass der Button ohne Maus drauf rot ist, einfach mal ein rotes Feld machen und das als gif speichern.
Dann wenn ich mit der Maus rüberfahre, soll es gelb werden muss ich eine gif machen, die zuerst rot und dann gelb ist. (?)
LG dorftrottel

Sorry wegen den Fragen...

[Scubamarco]

Du meinst sicher NVU (http://www.chip.de/downloads/Nvu-HTML-Editor-1.0-Final_13014735.html) ;)
Uups :whistling


Dass heisst, wenn ich zB. will, dass der Button ohne Maus drauf rot ist, einfach mal ein rotes Feld machen und das als gif speichern.
Dann wenn ich mit der Maus rüberfahre, soll es gelb werden muss ich eine gif machen, die zuerst rot und dann gelb ist. (?)

Nein das zweite muß gelb sein.
Der Browser tauscht die Bilder dann bei der Darstellung aus.
Normal: rot.gif
wenn die Mouse drüber ist gelb.gif (z.B.)

[heikehk]

Im Prinzip hängt bei dieser Variante des Mouse-Over Effektes immer ein kleines Java-Script dahinter.
In GoLive kann man das sehr schön einbinden. Gibt da auch eine CSS-Variante. Hab ich mal gelesen, kann mich aber nicht mehr an die Details erinnern.
Hast Du mal bei SELFHTML gesucht?

Alles Liebe


Heike

PS: Falls ich es finde, dann geb ich Bescheid....

[dorftrottel]

Nee hab ich noch nicht.
Ich komme eben mit dem ganzen nicht draus. Ich weiss einfach was ich will, aber ich habe keine Ahnung vom Programmieren noch von den Programmen wie NVU.
Gruss
dorftrottel

[intelli]

Versuchs mal hiermit (http://www.htmlbasix.com/mouseoverimages.shtml).....

... oder hiermit (http://www.webmaster-world.com/generatoren/html-mouseover-bild.php)....

Gruß

intelli

[intelli]

... oder hier (http://www.creatingonline.com/webmaster/generators/rollovergen.htm)....

oder...
oder...
oder...

:) :) :)

intelli

[dorftrottel]

Hihi, danke für die Links, aber ich wollte eigentlich wissen wie man das selber macht? ^^
Muss ich da wirklich was von den verschiedene "Sprachen" kennen?

[intelli]

Ja, wenn du es "selbst" machen willst...

html, javascript und css.

Wenn Du es mit Elements genauso wie in der "großen" Photoshop-Version machen würdest, wäre es ja auch nicht "seöbst gemacht". Dann würde Photoshop ja den Code für Dich erstellen. :)

Gruß

intelli

[dorftrottel]

Okay nochmal von vorne, ich will schon, dass ich das bei Elements intern eingeben kann, was ich will und dann kommt der Mouse-Over Effekt raus. Ich will keine Codes verfassen oder ähnliches :D
Hoffe das ist jetzt verständlich ausgedrückt :D

[Scubamarco]

Das machts du im Nachhinein mit NVU.
Da lädst du die fertige Webseite, klickst das Mouseoverbild an und sagts ihm
welches Gif du als zweites, als Overbild willst und fertig.
Da muß man keine Codes kennen.

[kritzel]

Hallo Dorftrottel!
Versuche das mal mit diesem komprimierten Quelltext. Du musst den nur als Seite bei Dir abspeichern und die Dateinamen für die Bildchen anpassen. ;)

<html>
<head>
<title>Rechtliches</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('Images/Home_On.gif')">
<h1 align="center"><i><font color="#FFFFFF"><i><a href="http://www.doppelkopfclub.de/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','Images/Home_On.gif',1)" target="_parent"><img name="Home" border="0" src="Images/Home_Off.gif" width="60" height="60"></a></i></font></i></h1>
<h1 align="center"><i>Rechtliches</i></h1>
<p align="left">bla bla bla</p>
</body>
</html>