Seite 1 von 5
Bildwechsel bei mousover
Verfasst: Do 14. Apr 2011, 00:19
von Patrick
huhu zusammen,
ich benötige einen html- code für einen mouover efekt.
Ich möchte gerne, dass wenn man mit der Maus über das schwarz/weis bild
fährt, das sich dann ein buntes öffnet. kann mir da einer eine code für geben?
Die Grafiken habe ich schon.
indras-w.jpg
indrabunt.jpg
vielen Dank im voraus!
lg
Re: Bildwechsel bei mousover
Verfasst: Do 14. Apr 2011, 05:38
von goefi-chiangmai
Hallo Patrik, eigentlich solltest Du das noch haben, habe ich mal für dich gemacht.
Diese Mousover efekt ist in Javascript gemacht,
könnte man natürlich auch als normales CSS menu machen, aber der Vorteil bei diesem Javascript ist, das sich beim aufruf deiner seite alle Bilder laden, was bei einem normalen CSS menu nicht der fall ist, also erst wenn Du auf das Bild hälst sich der Button ladet, und das dann ein momment dauert!
Also kommt da Javascript in frage.
Beispiel:
http://demo-seite.npage.de/java_bildhover_57748965.html
Und hier kannst dein eigenes Thema nachlesen:
http://www.npage-hilfe.de/viewtopic.php ... 8702#p8702
Wenn weitere fragen hast, rein damit
Re: Bildwechsel bei mousover
Verfasst: Do 14. Apr 2011, 12:27
von Patrick
Hallo Peter,
diesen Beitrag habe ich schon gesehen. Es ist sehr verwirrend, weil ich das ganze mit
6 Bildern machen möchte. Hatte vor, eine Tabelle zu erstellen, weil über jedem Bild
soll noch eine Rubrik/überschrift eingefügt werden. Was mich jetzt total iritiert, wa-
rum ist das so lang? Mit einem Bild komme ich ja noch zurecht, aber mit 6 :JJ
so will ich es haben (die striche dazwischen natürlich nicht.Die habe ich nur gemacht um es schöner aussehen zu lassen
):
Überschrift-----Überschrift-----Überschrift
----Bild------------- Bild--------------Bild
Überschrift-----Überschrift-----Überschrift
----Bild------------- Bild--------------Bild
Oder besser noch, schaut auf den link. ich denke die 2. tabelle ist besser, da ich da den abstand besser einstellen kann.
http://www.oyla.de/cgi-bin/eigenes.cgi? ... d=10883843
lg
Re: Bildwechsel bei mousover
Verfasst: Do 14. Apr 2011, 13:26
von Patrick
Tja, irgenwie bekomme ich es einfach nicht hin *grummel*.
Hat wer zeit und lust mir zu helfen?
LG
Patrick
Re: Bildwechsel bei mousover
Verfasst: Do 14. Apr 2011, 13:30
von goefi-chiangmai
Wenn Du es in eine Tabelle stecken willst dann geh doch unter den Toolshop --> Tabellen Generator.
Dann nimmste:z.B.
Code: Alles auswählen
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
und setzt dort deine Verlinkung ein.
Re: Bildwechsel bei mousover
Verfasst: Do 14. Apr 2011, 15:04
von Patrick
Die Tabelle habe ich ja bereits
Code: Alles auswählen
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p style="text-align: center;"> </p>
<table cellspacing="5" cellpadding="10" border="1" align="center" width="600">
<tbody>
<tr>
<td style="text-align: center;">Kategorie 1</td>
<td> </td>
<td style="text-align: center;">Kategorie 2</td>
<td> </td>
<td style="text-align: center;">Kategorie 3</td>
</tr>
<tr>
<td style="text-align: center;">Bild 1</td>
<td> </td>
<td style="text-align: center;">Bild 2</td>
<td> </td>
<td style="text-align: center;">Bild 3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="text-align: center;">Kategorie 4</td>
<td> </td>
<td style="text-align: center;">Kategorie 5</td>
<td> </td>
<td style="text-align: center;">Kategorie 6</td>
</tr>
<tr>
<td style="text-align: center;">Bild 4</td>
<td> </td>
<td style="text-align: center;">Bild 5</td>
<td> </td>
<td style="text-align: center;">Bild 6</td>
</tr>
</tbody>
</table>
Ich benötige einen html- code, der die bilder beim überfahren mit der maus ändert.
Und dann weiß ich nicht, was ich wo einsetzen muss.
lg
Re: Bildwechsel bei mousover
Verfasst: Do 14. Apr 2011, 15:15
von goefi-chiangmai
für das gibt es kein HTML code, nur CSS und Javascript. CSS hat den nachteil das du zuerst rüberfahren musst um das bild zu laden deswegen in Javascript.
hate auf meiner früheren goefi-chiangmai in frame, ganzes navi in dem Javascript gehabt. oben musst einfach alle Button eingeben, die es beim seitenaufruf startet. unten dan die links mit dem hover
Re: Bildwechsel bei mousover
Verfasst: Do 14. Apr 2011, 15:36
von Patrick
na dann meine ich halt ein script
Aber aus irgendeinen grund schnalle ich es überhaupt nicht. Wenn ich den code nehme, von dem
Thema von früher, wozu brauche ich dann eine Tabelle?
Was von dem code muss ich denn in dem Tabellenteil
Bild 1 ersetzen, dass ich da das Bild
mit dem mo- efekt habe?
Sorry, ich schnall es einfach nicht
Re: Bildwechsel bei mousover
Verfasst: Do 14. Apr 2011, 21:48
von goefi-chiangmai
Brauchst keine Tabelle, aber im tema von früher hast Du deine Button kreut und Quer angeordnet gehabt, so als Navi brauchst keine Tabelle
Wieviele Buton brauchst?
Wenn ich zeit habe am Wochenende fummle ich Dir das zusammen
Re: Bildwechsel bei mousover
Verfasst: Do 14. Apr 2011, 22:16
von Patrick
hmm, habs doch obden versucht zu zeigen.
Das Bropblem ist, es muss über den bildern etwas stehen.
Patrick hat geschrieben:
Überschrift-----Überschrift-----Überschrift
----Bild------------- Bild--------------Bild
Überschrift-----Überschrift-----Überschrift
----Bild------------- Bild--------------Bild
Oder besser noch, schaut auf den link. ich denke die 2. tabelle ist besser, da ich da den abstand besser einstellen kann.
http://www.oyla.de/cgi-bin/eigenes.cgi? ... d=10883843
lg