Das is doch irgend WIie ? Wasn sollnn das ?
- Themenstarter Cyph3r
- Beginndatum
tip
kommt natürlich auch darauf welches prog du zur erstellung der hp hast. htm-editoren oder wysiwyg-prog wie z.b. Ultra Dev 4 von Macromedia---da ist dieser mouse-oer effekt schon dabei. unter:
einfügen===>interaktive bilder===>Roolover Bild
kannst es aber auch wie sovok sagte: selbst die tags schreiben!
mit imagereadey hab ichs eigentlich noch ni probiert===>yeah jetzt hab ich wieder was zu tun!!*gg*
mfg Hochi
kommt natürlich auch darauf welches prog du zur erstellung der hp hast. htm-editoren oder wysiwyg-prog wie z.b. Ultra Dev 4 von Macromedia---da ist dieser mouse-oer effekt schon dabei. unter:
einfügen===>interaktive bilder===>Roolover Bild
kannst es aber auch wie sovok sagte: selbst die tags schreiben!
mit imagereadey hab ichs eigentlich noch ni probiert===>yeah jetzt hab ich wieder was zu tun!!*gg*
mfg Hochi
cocoon
Erfahrenes Mitglied
Preload
In dem Post, das den Rollover beschreibt, wird ja richtigerweise daraufhingewiesen, dass man nicht zu grosse Bilder nehmen bzw. einen Preloader verwenden sollte. Ich würde generell dazu raten, die Rollover-Bilder zumindest vorzuladen, egal ob man den Vorgang jetzt in irgendeiner Weise visualisiert (mit Preloader meint man ja eigentlich so etwas wie einen Ladebalken o.ä.).
Das Vorladen der Bilder kann man per JavaScript arrangieren, was ich mal kurz probier zu erläutern (nehmt's mir nicht übel, aber JS hab' ich schon lange nicht mehr gemacht, weshalb das Script u.U. nicht ganz fehlerfrei sein wird
):
1.) Für jeden Menüpunkt ein Bild als Ausgangsbild und eins als Rolloverbild, also z.B.:
about_a.jpg
about_b.jpg
portf_a.jpg
portf_b.jpg usw.
2.) Ein JavaScript läd die Bilder vor, indem ein Image-Objekt zu jedem Bild (Normal und Over) angelegt wird. Ich glaube das Skript ist am besten im head-Teil unterzubringen:
3.) Der Html-Teil im body:
Wie gesagt - keine Ahnung ob's einwandfrei klappt, aber so aus dem Stehgreif heraus fiel mir das so ein.
Gruss
Nachtrag:
zu 2.) Am Ende muss natürlich noch ein /script"-Tag hin, das das Skript im Html-Code ausleitet.
zu 3.) Bei den onMouseEvents muss "javascript: ..." zusammengeschrieben werden
(Hab's richtig gepostet, erscheint aber fehlerhaft beim Lesen des Threads)
Hab's jetzt auch getestet - müsste funktionieren.
In dem Post, das den Rollover beschreibt, wird ja richtigerweise daraufhingewiesen, dass man nicht zu grosse Bilder nehmen bzw. einen Preloader verwenden sollte. Ich würde generell dazu raten, die Rollover-Bilder zumindest vorzuladen, egal ob man den Vorgang jetzt in irgendeiner Weise visualisiert (mit Preloader meint man ja eigentlich so etwas wie einen Ladebalken o.ä.).
Das Vorladen der Bilder kann man per JavaScript arrangieren, was ich mal kurz probier zu erläutern (nehmt's mir nicht übel, aber JS hab' ich schon lange nicht mehr gemacht, weshalb das Script u.U. nicht ganz fehlerfrei sein wird
):1.) Für jeden Menüpunkt ein Bild als Ausgangsbild und eins als Rolloverbild, also z.B.:
about_a.jpg
about_b.jpg
portf_a.jpg
portf_b.jpg usw.
2.) Ein JavaScript läd die Bilder vor, indem ein Image-Objekt zu jedem Bild (Normal und Over) angelegt wird. Ich glaube das Skript ist am besten im head-Teil unterzubringen:
PHP:
<head>
...
<script language="JavaScript">
<!--
imgAboutOn = new Image();
// Neues Image-Objekt wird für erstellt
imgAboutOn.src = "http://www.seite.de/img/about_b.jpg";
// Dem Image-Objekt wird die URL (src=source) zugewiesen
imgAboutOff = new Image();
imgAboutOff.src = "http://www.seite.de/img/about_a.jpg";
imgPortfOn = new Image();
imgPortfOn.src = "http://www.seite.de/img/portf_b.jpg";
imgAboutOff = new Image();
imgAboutOff.src = "http://www.seite.de/img/portf_a.jpg";
usw.
-->
</script>3.) Der Html-Teil im body:
PHP:
<a href="http://www.seite.de/html/about/index.html">
<img src="http://www.seite.de/img/about_a.jpg" border="0" name="imgAbout" onMouseOver="javascript:document.imgAbout.src=imgAboutOn.src;" onMouseOut="javascript:document.imgAbout.src=imgAboutOff.src;">
</a>
<a href="http://www.seite.de/html/portf/index.html">
<img src="http://www.seite.de/img/portf_a.jpg" border="0" name="imgPortf" onMouseOver="javascript:document.imgPortf.src=imgPortfOn.src;" onMouseOut="javascript:document.imgPortf.src=imgPortfOff.src;">
</a>
usw.Wie gesagt - keine Ahnung ob's einwandfrei klappt, aber so aus dem Stehgreif heraus fiel mir das so ein.
Gruss
Nachtrag:
zu 2.) Am Ende muss natürlich noch ein /script"-Tag hin, das das Skript im Html-Code ausleitet.
zu 3.) Bei den onMouseEvents muss "javascript: ..." zusammengeschrieben werden
(Hab's richtig gepostet, erscheint aber fehlerhaft beim Lesen des Threads)
Hab's jetzt auch getestet - müsste funktionieren.
Zuletzt bearbeitet:
D
dozi
moin,
kann man auch so was machen, das wenn man auf den button klickt, sich wieder die grafik ändert, also:#
1.Änderung: Wenn man mit der Maus drüberfährt (OnMouseOver)
2.Änderung: Wenn man auf den Button klickt (???)
3.Änderung: Wenn man wieder von der Maus runtergeht (OnMouseOut)
thx mal jetzt schon
kann man auch so was machen, das wenn man auf den button klickt, sich wieder die grafik ändert, also:#
1.Änderung: Wenn man mit der Maus drüberfährt (OnMouseOver)
2.Änderung: Wenn man auf den Button klickt (???)
3.Änderung: Wenn man wieder von der Maus runtergeht (OnMouseOut)
thx mal jetzt schon
style sheet
hallo erstmal!
so wie es aussieht,hat deine frage nix mit photoshop zu tun!wenn ich es recht verstehe,willst du z.B. das sich die farbe von der schrift änderst,wenn du mit der maus drüber gehst,in diesem fall handelt es sich um einen einfachen style sheet,den du einfach in deinen quelltext einfügen musst!
hier ist er [die farben kannste selber bestimmen] ::>>
<style type="text/css">
<!--
a:active, a:link, a:visited { color: #00000; font-size: 8pt; font-family: Helvetica, Tahoma, Verdana, Arial; text-decoration: none }
a:bb:hover, a:visited:hover { color: #8B8484; font-size: 8pt; font-family: Helvetica, Tahoma, Verdana, Arial; text-decoration: none }
div,p,td,th,body { color: silver; font-size: 8pt; font-family: Helvetica, Tahoma, Verdana, Arial; text-decoration: none }
-->
</STYLE>
hallo erstmal!
so wie es aussieht,hat deine frage nix mit photoshop zu tun!wenn ich es recht verstehe,willst du z.B. das sich die farbe von der schrift änderst,wenn du mit der maus drüber gehst,in diesem fall handelt es sich um einen einfachen style sheet,den du einfach in deinen quelltext einfügen musst!
hier ist er [die farben kannste selber bestimmen] ::>>
<style type="text/css">
<!--
a:active, a:link, a:visited { color: #00000; font-size: 8pt; font-family: Helvetica, Tahoma, Verdana, Arial; text-decoration: none }
a:bb:hover, a:visited:hover { color: #8B8484; font-size: 8pt; font-family: Helvetica, Tahoma, Verdana, Arial; text-decoration: none }
div,p,td,th,body { color: silver; font-size: 8pt; font-family: Helvetica, Tahoma, Verdana, Arial; text-decoration: none }
-->
</STYLE>
