Bildwechsel bei mousover

[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

[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

[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

[Patrick]

Tja, irgenwie bekomme ich es einfach nicht hin *grummel*.

Hat wer zeit und lust mir zu helfen?

LG
Patrick

[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.

[Patrick]

http://www.oyla.de/cgi-bin/eigenes.cgi? ... d=10883843

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

[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

[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

[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

[Patrick]

hmm, habs doch obden versucht zu zeigen.
Das Bropblem ist, es muss über den bildern etwas stehen.

Ü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