kostenloser Webspace werbefrei: lima-city


Mouseover effekt

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    trainercard-club

    Kostenloser Webspace von trainercard-club, auf Homepage erstellen warten

    trainercard-club hat kostenlosen Webspace.

    Hallo, ich hätte gerne einen Mouseover effekt.
    Die Seite lautet http://trainercard-club.12hp.de/vorlage_n.php
    Mein aktueller Code:
    <div align="left" width="100%">
    <img id="button1" src="Images/Trainercard-club-homepage-parts/button-1a.gif" width="15,8%" onmouseover="this.src = Images/Trainercard-club-homepage-parts/button-1b.gif" /><img id="button2" src="Images/Trainercard-club-homepage-parts/button-2a.gif" width="17%" onmouseover="this.src = Images/Trainercard-club-homepage-parts/button-2b.gif" /><img id="button3" src="Images/Trainercard-club-homepage-parts/button-3a.gif" width="28%" onmouseover="this.src = Images/Trainercard-club-homepage-parts/button-3b.gif" /><img id="button4" src="Images/Trainercard-club-homepage-parts/button-4a.gif" width="21%" onmouseover="this.src = Images/Trainercard-club-homepage-parts/button-4b.gif" /><img id="button5" src="Images/Trainercard-club-homepage-parts/button-5a.gif" width="18,5%" onmouseover="this.src = Images/Trainercard-club-homepage-parts/button-5b.gif" />
    
    <script type="text/javascript" language="JavaScript">
    <!--
    
    Bild01 = new Image();
    Bild01.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1b.gif";
    
    Bild02 = new Image();
    Bild02.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-2b.gif";
    
    Bild03 = new Image();
    Bild03.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-3b.gif";
    
    Bild04 = new Image();
    Bild04.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-4b.gif";
    
    Bild05 = new Image();
    Bild05.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-5b.gif";
    //-->
    </script>

    tut sich aber überhaupt nichts mouseover ähnliches :(

    Beitrag zuletzt geändert: 25.9.2011 5:42:11 von trainercard-club
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. trainercard-club schrieb:
    Hallo, ich hätte gerne einen Mouseover effekt.

    tut sich aber überhaupt nichts mouseover ähnliches :(


    Wo hast du denn den Teil, wo du die Grafiken als Link / Verweis deklarierst?
    Soweit ich das sehen kann hast du nur ein paar Bilder, nichts was einen onmouseover erzeugen könnte!

    //EDIT:

    <script
    language="JavaScript">
    <!--
    button1= new Image();
    button1.src = "knopf.jpg"
    button2= new Image();
    button2.src = "email.jpg"
    /* usw. für alle Grafiken,
    die am Mouse-Over-Effekt beteiligt sind */
    //-->
    </script>


    Nehmen wir mal an, wir haben einen Button, über den wir eine email Senden wollen. Die Bilder für den Austausch werden hier vorgeladen und abgelegt, damit diese sofort aus dem Cache geladen werden. Alle für den Mouse-Over-Effekt verwendeten Grafiken müssen hier definiert, d.h. mit der Eigenschaft "src" (source = Quelle) versehen werden.

    Das war unser JavaScript Teil.. Nun müssen wir noch das Bild und den Link erstellen:

    <a href="mailto:deine.mail@gmx.de"
    
    onmouseover="austausch1.src='email.jpg';"
    onmouseout="austausch1.src='knopf.jpg';">
    
    <img src="knopf.jpg"
    border="0" width="71"height="60"
    name="austausch1">
    </a>


    < a href> gibt den Link an und <img> das Bild..

    Beitrag zuletzt geändert: 25.9.2011 6:11:31 von kill-a-teddy
  4. Autor dieses Themas

    trainercard-club

    Kostenloser Webspace von trainercard-club, auf Homepage erstellen warten

    trainercard-club hat kostenlosen Webspace.

    kill-a-teddy schrieb:


    Wo hast du denn den Teil, wo du die Grafiken als Link / Verweis deklarierst?
    Soweit ich das sehen kann hast du nur ein paar Bilder, nichts was einen onmouseover erzeugen könnte!


    ähh... wie mache ich das denn?
    :scared:
  5. trainercard-club schrieb:
    kill-a-teddy schrieb:


    Wo hast du denn den Teil, wo du die Grafiken als Link / Verweis deklarierst?
    Soweit ich das sehen kann hast du nur ein paar Bilder, nichts was einen onmouseover erzeugen könnte!


    ähh... wie mache ich das denn?
    :scared:


    Bei dir würde des ungefähr so aussehen:

    <a href="Link1"
    onmouseover="austausch1.src='Images/Trainercard-club-homepage-parts/button-1a.gif';"
    onmouseout="austausch1.src='Images/Trainercard-club-homepage-parts/button-1b.gif';">
    <img id="button1" src="Images/Trainercard-club-homepage-parts/button-1a.gif" width="15,8%"></a>



    Btw:
    Selfhtml Thema: Verwaise

    Beitrag zuletzt geändert: 25.9.2011 6:16:16 von kill-a-teddy
  6. Autor dieses Themas

    trainercard-club

    Kostenloser Webspace von trainercard-club, auf Homepage erstellen warten

    trainercard-club hat kostenlosen Webspace.

    kill-a-teddy schrieb:
    trainercard-club schrieb:
    kill-a-teddy schrieb:


    Wo hast du denn den Teil, wo du die Grafiken als Link / Verweis deklarierst?
    Soweit ich das sehen kann hast du nur ein paar Bilder, nichts was einen onmouseover erzeugen könnte!


    ähh... wie mache ich das denn?
    :scared:


    Bei dir würde des ungefähr so aussehen:

    <a href="Link1"
    onmouseover="austausch1.src='Images/Trainercard-club-homepage-parts/button-1a.gif';"
    onmouseout="austausch1.src='Images/Trainercard-club-homepage-parts/button-1b.gif';">
    <img id="button1" src="Images/Trainercard-club-homepage-parts/button-1a.gif" width="15,8%"></a>



    Btw:
    Selfhtml Thema: Verwaise

    ok, das habe ich jetzt gemacht, passiert aber irgendwie trotzdem nichts mousover ähnliches :confused:
  7. trainercard-club schrieb:

    ok, das habe ich jetzt gemacht, passiert aber irgendwie trotzdem nichts mousover ähnliches :confused:


    Weil du es net angepasst hast. Du hast den Code nur im ersten Button (button1a und button1b) und nirgens sonst.. Alle anderen sind noch immer ganz normale Bilder, die müsstest du auch zu buttons machen!

    Noch dazu hast du button-1a gar nicht eingefügt, nur button-1b...


    Bild01 = new Image();
    Bild01.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1b.gif";

    Da fehlt


    Bild06 = new Image();
    Bild06.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1a.gif";
  8. m******e

    @trainercard-club

    Schaue Dir mal dieses Beispiel an, funzt garantiert. :wink:

    Quelltext:
    <html><head><title>OnMouseOver mit Bildern (Javascript)</title>
    </head>
    <body>
    
    <style type="text/css"><!--
    img:hover {cursor: pointer;}
    body {font-family: Verdana, Arial, sans-serif; font-size:1em; font-weight:bold;} -->
    </style>
    
    <script type="text/javascript">
    
    // Ordnerpfad der Bilder
    var f = "img/";
    
    // Ein Array, damit sich Bilder bequem mit Zahlen anprechen lassen
    var b = new Array();
    b[0] = new Image(); b[0].src = f+ "01.gif";
    b[1] = new Image(); b[1].src = f+ "02.gif";
    b[2] = new Image(); b[2].src = f+ "06.gif";
    b[3] = new Image(); b[3].src = f+ "07.gif";
    
    b[4] = new Image(); b[4].src = f+ "08.gif";
    b[5] = new Image(); b[5].src = f+ "09.gif";
    b[6] = new Image(); b[6].src = f+ "10.gif";
    b[7] = new Image(); b[7].src = f+ "11.gif";
    
    // Eine Funktion, damit der Quelltext der Seite kuerzer & ueberschaulicher wird, und
    // zwei Variablen innerhalb der Funktion, damit Zahlen der Funktion uebergeben werden koennen
    function zeige( variable1 , variable2 ) { document.images[variable1].src = b[variable2].src; }
    
    </script>
    
    <img name="button1" src="img/01.gif" onmouseover="zeige('button1','1')" onmouseout="zeige('button1','0')" />
    <img name="button2" src="img/06.gif" onmouseover="zeige('button2','3')" onmouseout="zeige('button2','2')" />
    <br />
    ^^ Zeige auf ein Bild, dann ändert es sich.
    <br /><br /><br />
    
    <img name="button3" src="img/10.gif" onmouseover="zeige('button4','5')" onmouseout="zeige('button4','4')" />
    <img name="button4" src="img/08.gif" onmouseover="zeige('button3','7')" onmouseout="zeige('button3','6')" />
    <br />
    ^^ Zeige auf ein Bild, dann ändert sich das andere.
    
    <noscript>
    <br /><br /><h2>Sorry, für das Beispiel muss Javascript aktiviert sein.<br /><img src="img/05.gif" /></h2>
    </noscript>
    
    </body></html>

    Vergiss allerdings nicht, dass OnMouseOver -Funktionen stets JavaScript -abhängig sind.
    Wer ohne JavaScript surft, bekommt die tollen Effekte dann nicht zu Gesicht.
    Tipp: Mit CSS gehts auch ohne JavaScript. :thumb:

    LG, Menschle
  9. Autor dieses Themas

    trainercard-club

    Kostenloser Webspace von trainercard-club, auf Homepage erstellen warten

    trainercard-club hat kostenlosen Webspace.

    menschle schrieb:
    @trainercard-club

    Schaue Dir mal dieses Beispiel an, funzt garantiert. :wink:

    Quelltext:
    <html><head><title>OnMouseOver mit Bildern (Javascript)</title>
    </head>
    <body>
    
    <style type="text/css"><!--
    img:hover {cursor: pointer;}
    body {font-family: Verdana, Arial, sans-serif; font-size:1em; font-weight:bold;} -->
    </style>
    
    <script type="text/javascript">
    
    // Ordnerpfad der Bilder
    var f = "img/";
    
    // Ein Array, damit sich Bilder bequem mit Zahlen anprechen lassen
    var b = new Array();
    b[0] = new Image(); b[0].src = f+ "01.gif";
    b[1] = new Image(); b[1].src = f+ "02.gif";
    b[2] = new Image(); b[2].src = f+ "06.gif";
    b[3] = new Image(); b[3].src = f+ "07.gif";
    
    b[4] = new Image(); b[4].src = f+ "08.gif";
    b[5] = new Image(); b[5].src = f+ "09.gif";
    b[6] = new Image(); b[6].src = f+ "10.gif";
    b[7] = new Image(); b[7].src = f+ "11.gif";
    
    // Eine Funktion, damit der Quelltext der Seite kuerzer & ueberschaulicher wird, und
    // zwei Variablen innerhalb der Funktion, damit Zahlen der Funktion uebergeben werden koennen
    function zeige( variable1 , variable2 ) { document.images[variable1].src = b[variable2].src; }
    
    </script>
    
    <img name="button1" src="img/01.gif" onmouseover="zeige('button1','1')" onmouseout="zeige('button1','0')" />
    <img name="button2" src="img/06.gif" onmouseover="zeige('button2','3')" onmouseout="zeige('button2','2')" />
    <br />
    ^^ Zeige auf ein Bild, dann ändert es sich.
    <br /><br /><br />
    
    <img name="button3" src="img/10.gif" onmouseover="zeige('button4','5')" onmouseout="zeige('button4','4')" />
    <img name="button4" src="img/08.gif" onmouseover="zeige('button3','7')" onmouseout="zeige('button3','6')" />
    <br />
    ^^ Zeige auf ein Bild, dann ändert sich das andere.
    
    <noscript>
    <br /><br /><h2>Sorry, für das Beispiel muss Javascript aktiviert sein.<br /><img src="img/05.gif" /></h2>
    </noscript>
    
    </body></html>

    Vergiss allerdings nicht, dass OnMouseOver -Funktionen stets JavaScript -abhängig sind.
    Wer ohne JavaScript surft, bekommt die tollen Effekte dann nicht zu Gesicht.
    Tipp: Mit CSS gehts auch ohne JavaScript. :thumb:

    LG, Menschle


    Entschuldige meine unwissenheit ^^
    Klappt super mit den ersten 2, nur sobald ich was dazu mache ( sollen insgesammt 5 sein ) kommt nichts gutes mehr bei raus :(
    könntest du mir vielleicht noch so ein Beispiel für 5 Stück zeigen?
    Wäre echt sehr nett :D
  10. m******e

    trainercard-club schrieb:
    ...
    könntest du mir vielleicht noch so ein Beispiel für 5 Stück zeigen?
    Wäre echt sehr nett :D

    Ich bin mal so frei.. :wink:
    Beispiel mit 5 Bildern

    Habe den Qelltext abgeändert, vielleicht ist es mit den jetzigen Zahlen etwas leichter zu verstehen.
    Brauchst jetzt nur noch die Bilder austauschen, und die <img> Tags um Höhe & Weite zu ergänzen.

    Qelltext
    <html><head><title>OnMouseOver mit 5 Bildern (Javascript)</title>
    
    <style type="text/css"><!--
    img:hover {cursor: pointer;}
    body {font-family: Verdana, Arial, sans-serif; font-size:1em; font-weight:bold;} -->
    </style>
    
    <script type="text/javascript">
    
    // Ordnerpfad der Bilder
    var f = "img/";
    
    // Ein Array, damit sich Bilder bequem mit Zahlen anprechen lassen
    var b = new Array();
    
    // Button 1
    b[1] = new Image(); b[1].src = f+ "01.gif"; //over
    b[2] = new Image(); b[2].src = f+ "02.gif"; //out
    
    // Button 2
    b[3] = new Image(); b[3].src = f+ "03.gif"; //over
    b[4] = new Image(); b[4].src = f+ "04.gif"; //out
    
    // Button 3
    b[5] = new Image(); b[5].src = f+ "05.gif"; //over
    b[6] = new Image(); b[6].src = f+ "06.gif"; //out
    
    // Button 4
    b[7] = new Image(); b[7].src = f+ "07.gif"; //over
    b[8] = new Image(); b[8].src = f+ "08.gif"; //out
    
    // Button 5
    b[9] = new Image(); b[9].src = f+ "09.gif";   //over
    b[10] = new Image(); b[10].src = f+ "10.gif"; //out
    
    // Eine Funktion, damit der Quelltext der Seite kuerzer & ueberschaulicher wird, und
    // zwei Variablen innerhalb der Funktion, damit Inhalte der Funktion uebergeben werden koennen
    function zeige( Button_ID , Zahl ) { document.images[Button_ID].src = b[Zahl].src; }
    
    </script>
    
    </head>
    <body>
    5 Bilder
    <br /><br />
    
    <img id="button1" src="img/02.gif" onmouseover="zeige('button1','1')" onmouseout="zeige('button1','2')" />
    <img id="button2" src="img/04.gif" onmouseover="zeige('button2','3')" onmouseout="zeige('button2','4')" />
    <img id="button3" src="img/06.gif" onmouseover="zeige('button3','5')" onmouseout="zeige('button3','6')" />
    <img id="button4" src="img/08.gif" onmouseover="zeige('button4','7')" onmouseout="zeige('button4','8')" />
    <img id="button5" src="img/10.gif" onmouseover="zeige('button5','9')" onmouseout="zeige('button5','10')" />
    
    <noscript>
    <br /><br /><h2>Sorry, für das Beispiel muss Javascript aktiviert sein.<br /><img src="img/05.gif" /></h2>
    </noscript>
    
    </body></html>


    Beitrag zuletzt geändert: 26.9.2011 19:58:33 von menschle
  11. Jetzt wurde schon so schön gesagt das da kein JS für gebraucht wird und keiner schreibt wie...

    Also mal ganz kurz.
    CSS bietet die möglichkeit mit der Pseudoklasse :hover auf alles einzugehen wo du mit der maus drüber gehst.

    So kann man zb auch bestimmte bereiche mit andern bildern versorgen.
    Angenommen du hast einen Link und den willst du mit css ein anderes bild zuweisen wenn du drüber fährst, dann könnte das auf die schnelle so aussehen:
    a { background: url(img/bild1.png) no-repeat top left;}
    a:hover { background: url(img/bild2.png) no-repeat top left;}


    Und fertig ist das ganze mit CSS. Prüfe ob es in allen browsern funktioniert und bastle im zweifel ein work-around für den win-IE

    Viel spass damit

    PS:
    den hover-effekt kann man auf alle erdenklichen html-elemente anwenden.
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!