Bei Mouse über Text soll anderes Bild angezeigt werden.

  • Moin moin liebe Forumsbesucher,

    wünsche ein schönes Pfingst-Wochenende gehabt zu haben.

    Aber nun zu meinem Problem. Ich versuche mich gerade daran ein onMouseover-Ereignis zu erstellen. Leider bisher erfolglos. :cry:
    Ich möchte, dass wenn ich mit der Maus über das "das" in dem Satz:
    "Probieren Sie mal das!" fahre, statt dem original angezeigtem Bild ein anderes Bild zu sehen ist.

    Kann mir da jemand ein Beispiel posten, wie man so etwas realisieren kann, dann versuche ich das mal auf meinen Code zu übertragen. (Ist besser für den Lerneffekt, als wenn es jemand von Euch für mich schreibt!)

    Vielen Dank für Eure Hilfe.

    Mit besten Grüßen,
    Valdyn

  • Habs mal ein bisschen angeschaut und bearbeitet:

    In den "<head>"-Bereich kommt das:

    Code
    <script language="JavaScript">
    function movepic(img_name,img_src) 
    {
    document[img_name].src=img_src;
    }
    </script>

    In den "<body>"-Bereich das:

    Code
    Probieren Sie mal <font onmouseover="movepic('button','pic-on.jpg')" onmouseout="movepic('button','pic-off.jpg')">das</font>!
    
    
    [img]pic-off.jpg[/img]

    Das ganze ist natürlich Javascript.

    Gruss Joel

    Gruss Joel

  • Hey Joel,

    hab da schon mal ein wenig rumgebastelt. Irgendwie scheint das mit dem HEAD noch nicht zu stimmen. Was ist denn da mit img_name und img_src zu machen. Hab da schon Sachen eingefügt, aber bisher ohne Wirkung.

    Leider verändert sich das Bild auch nicht.

    Hier der Code (den Head hab ich wieder zurückgesetzt!):

    <HEAD>
    <SCRIPT language="JavaScript">
    function movepicimg_name,img_src){document[img_name].src=img_src;}
    </SCRIPT>
    </HEAD>

    <BODY>
    <CENTER>Probieren Sie mal
    <Font onmouseover="movepic("button","C:\HTML Help Files\Pics\Suchmaske\Suchmaske_klein.bmp')"
    onmouseout="movepic("button","C:\HTML Help Files\Pics\Suchmaske\Suchmaske_Schnellsuche2_klein.bmp")">
    dies!</Font>
    </CENTER>
    </Body>

    Hast Du da vielleicht noch einen Tipp für mich?

    Danke schön.

    Gruß,
    Valdyn

  • Zitat von Valdyn


    <HEAD>
    <SCRIPT language="JavaScript">
    function movepicimg_name,img_src){document[img_name].src=img_src;}
    </SCRIPT>
    </HEAD>

    Dass müsste so sein:

    Code
    <script language="JavaScript"> 
    function movepic (img_name,img_src) 
    { 
    document[img_name].src=img_src; 
    } 
    </script>


    Also einfach "function movepic(..."

    Dann versuchs noch mit etwas anderem statt <font>

    Gruss Joel

  • Hey Joel,

    ich habs jetzt. Hätte nicht gedacht, dass es daran liegt.
    Ich habe sämtliche Verweise bisher so:

    C:\Pic1.jpg

    Da das neue Bild beim drüberfahren mit dem Mauszeiger nicht erscheinen wollte, habe ich mal die "Eigenschaften" geöffnet und da wurde mir da Pfad, wenn auch etwas kryptisch so angezeigt:

    C:/Pic1.jpg

    Und so funzt es jetzt einwandfrei.

    Dann hatte ich den Code die ganze Zeit über richtig, nur die Adressierung war fehlerhaft. Aber wie kann es sein, dass es auf allen anderen Seiten funzt, nur hier nicht? Hat das was mit dem Java Script zu tun?

    Ich danke Dir auf jeden Fall recht herzlich für Deine Hilfe und wünsche Dir noch einen schönen Tag.

    Machs gut,
    Valdyn

    P.S.: Ich liste hier nochmal meinen Test-Code auf:

    <HTML>
    <HEAD>
    <TITLE> Onmouseover </TITLE>
    <script language="JavaScript">
    function movepic (img_name,img_src)
    {
    document img_name].src=img_src;
    }
    </script>
    <BODY>
    <HEAD>
    <Font onmouseover="movepic('bild4','C:/Pic2.bmp')" onmouseout="movepic('bild4','C:/Pic1.bmp')">Test</Font>



    </BODY>
    </HTML>