SmaX
Jap, ich den Fehler mit Java und Javascript machen viele. Ich dachte schon "Cool ein Java Tutorial"
am 30.11.2009 um 16:06 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
4x bewertet
Bildwechsel mit Javascript
von
Maron |
29.11.2009 um 21:26 h
Typ: Javascript Anwendungen
Stufe:Einfach
Stufe:Einfach
ich erkläre euch heute, wie man mit Javascript ein Bild so verändern kann, dass man kleine Effekte rausbekommt.
Grafik Programm mit Slice Funktion, Editor
Was Du brauchst:
Hier seht ihr ein Beispiel (Fahrt mit der Maus über den großen Luftballon in der Mitte).
Beispiel Link
Als erstes braucht ihr ein Bild.
Wenn ihr eins ausgesucht habt, benutzt ein Grafik Programm (ich benutze Photoshop) und schneidet eurer Bild in Stücke.
Beachtet dabei, dass ihr die Bilder die ihr verändern wollt, als ein Bild lasst und speichert es als HTML und Bilder ab.
Ich habe mich entschieden, denn Ballon zu verändern.
und so bearbeite ich ihn
Wenn ihr das Bild verändert habt, speichert es ab und macht den Editor auf.
Nun habt ihr den HTML Code schon, der das Bild wieder zusammen setzt.
<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=3>
<IMG SRC="Bilder/index_01.jpg" WIDTH=356 HEIGHT=500 BORDER=0 ALT="" USEMAP="#index_01_Map"></TD>
<TD COLSPAN=2>
<IMG SRC="Bilder/index_02.jpg" WIDTH=344 HEIGHT=69 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/tutorials/866_1.jpg" width="122" height="137" ALT=""></td>
<TD ROWSPAN=2>
<IMG SRC="Bilder/index_04.jpg" WIDTH=222 HEIGHT=431 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/index_05.jpg" WIDTH=122 HEIGHT=294 ALT=""></TD>
</TR>
</TABLE> Sucht euch nun euer Bild raus. Bei mir ist es tutorials/866_1.jpg und verändert den Code.
<img src="Bilder/tutorials/866_1.jpg" width="122" height="137" alt="" onMouseover=′this.src="Bilder/tutorials/866_2.jpg"′ onMouseout=′this.src="Bilder/tutorials/866_1.jpg"′></td>Erklärung: mit onMouseover wird das bearbeitete Bild aufgerufen sobald man mit der Maus rüber fährt und mit onMouseout wird es wieder zum Anfangsbild geändert.
Ich hoffe es war verständlich :)
3 Kommentare
Aiko
danke sowas hab ich schon voll lange gesucht!!!
am 02.12.2009 um 20:48 Uhr
P@ck
Das Tutorial ist nicht schlecht gemacht, jedoch greift man heute weniger auf JavaScript zurück, sondern verwendet CSS. Das belatet den Browser weniger ;)Ausserdem solltest du Java und JavaScript unterscheiden, dies sind zwei völlig verschiedene Sprachen! (Änder das im Titel noch ;))