Image wechsel / anzeigen bei onmouseover

  • Ich hab im netz ein script gefunden, mit dem man ein bild bei onmouseover anzeigen lassen kann.
    Allerdings beklomme ich den bildwechsel nicht hin.


    Ich möchte mit PHP die bilder, die gebraucht werden, mit einer foreach schleife schreiben lassen.
    Somit wären die bilder in den "<img src= ..." drin.
    Soweit funktioniert es. Aber wie bekomme ich hin, dass die 2 funktionen zeigeBild und versteckeBild die src übernehmen?
    Momentan wird ja immer das "bild1" angezeigt, da es in den funktionen so drin steht.


  • willst du so etwas das das so ausschaut wie ein button oder so und der halt 2 verschidene bilder hat einmal so und einmal wenn die Maus drauf ist?


    fals nein:
    also ein Lösungsansatz wäre wenn man nur eine imagebox hat und einfach nur src ändert
    so z.b.

    HTML
    <img id="bild" alt="bildinhalt" />
    
    
    
    
    <script type="text/javascript">
    document.getElementById("bild").setAttribute("src","bild1.png");
    </script>
  • Warum denn mit Javascript?


    Wie wäre es mit CSS? Dafür gibt es :hover und wenn man es nicht auf einmal haben möchte gibt es Animationen, die das ganze mit Übergang ablaufen lassen.

  • Das sieht gut aus, aber ich weiss noch nicht wie ich die src in the jeweilige zeile bekomme.


    Da ist ja die function zeigeBild() und function versteckeBild()
    und mit php (foreach $was_dynamisch_angezeigt_werden_soll ...) lasse ich alle div´s schreiben mit den triggern
    onmouseout="javascript:versteckeBild()" onmouseover="javascript:zeigeBild()"



    Bekommt man das setAttribute("src","bild1.png"); jetzt irgentwie in die trigger?


    ZB onmouseover="javascript:zeigeBild("src","bild1.png")" ?

  • erkläre bitte noch genauer was du haben willst :) (vll sind deine beiden functionen die du hast selbst wenn sie laufen würden nicht die beste idee)
    übrigens für onmouseout="javascript:versteckeBild()" reicht onmouseout="versteckeBild()".
    also immer das "javascript:" wech

  • hehe ;D naja, in JS bin ich momentan nur die copycat ;D
    Wenn ich über google code bsp finde versuche ich meistens nix daran zu ändern, da ich wohl eher fehler einbauen würde =)


    Also - was ich machen will:


    Ich habe ein array mit ~30 positionen.
    Nehmen wir mal an die heissen jetzt
    $array_XYZ[] = 'abc';
    $array_XYZ[] = 'def';
    $array_XYZ[] = 'ghi';
    ... usw


    Nun möchte ich eine liste anzeigen lassen "like"


    abc .... bla ..... bla ..
    def .... bla ..... bla ..
    ghi .... bla ..... bla ..
    ... usw


    Wenn user nun mit der maus über (zB) "abc" ist, sollte das bild abc angezeigt werden.
    Die namen wie zB "abc" nutze ich auch um das bild zu definieren, da die bilder auf dem server den gleichen namen haben (abc.png, ...).


    Also hab ich mir gedacht ich schreibe mit einer schleife:


    PHP
    foreach($array_XYZ as $name)
    {
     echo $name . '... und noch anderer inhalt ...';
     echo '<img src="'. $name .'".png />';
    }


    Soweit so einfach. Aber so würde das img logischer weise sofort angezeigt.
    Ich wollte aber das img erst bei "mouse over" anzeigen lassen - und das (wie oft auf webseiten zu sehen) in einem kleinen "fenster".


    Beisp wie es wohl richtig gemacht wurde: http://bf3stats.com/stats_pc/cottton < etwas weiter unten bei "Weapons" - sobald die mouse auf der jeweiligen zeile ist, wird rechts das jeweilige bild angezeigt.

  • ah habe es verstanden und sehe da hört mein wissen auf^^
    ist sozusagen soetwas wie

    HTML
    <div title="text der bei mouseover angezeigt wird">test</div>


    Er möchte halt nicht das ein text angezeigt wird sondern ein bild.
    ich würde das auch gerne wissen wie das geht.


    am besten würde es mir gefallen wenn man bei den titel einfach html tags verwenden kann.
    weiß jemand wie das geht?
    so würde ich mir das wünschen bsp von ner anderen seite


    HTML
    <img class="i2" onmouseout="i0(this);" onmouseover="i1(this);" title="" src="zensirt.png" name="icon2" html_title="<div id='n'>Adressbuch</div>">
  • Irgentwie bekomm ich das nicht hin =(


    onmouseover="i1(this);"


    Was macht das "this" ? soweit ich das verstehe wird bei mouse over die Funktion "i1" aufgerufen und das, was in den Klammern steht and diese Funktion übergeben?.


    EDIT:
    das ist die Website Tabelle für die ich das versuche zu verwenden: http://i-stats.net/index.php?action=pcheck&player=cottton&game=BF3&wpl=true

    Warum denn mit Javascript?


    Wie wäre es mit CSS? Dafür gibt es :hover und wenn man es nicht auf einmal haben möchte gibt es Animationen, die das ganze mit Übergang ablaufen lassen.


    Ok, jetz weiss ich was Du meintest =)


    Hab da was gefunden:
    http://www.homepage-faqs.de/in…er-groesser-bei-mouseover
    "C) Vergrössertes Bild im Infosfenster (ohne Javascript)"


    Soweit so gut, nur hakt es noch ein bischen.
    Style:


    und mit php lasse ich sämtliche .png ausgeben:

    PHP
    foreach(....
    {
    <div id="box">
    <a href="#"><?if(isset($name)){echo $name;}?></a>
    <div><img src="<? echo $WeaponPics[$name]; ?>" width="300" height="180" alt=""/></div></div>
    }


    Das Ergebnis sieht dann zB so aus:

    HTML
    <div id="box">
    <a href="#">QBB-95</a>
    <div><img src="stats_tool/Images/WeaponsBF3/xp1_qbb95.png" width="300" height="180" alt=""/></div>
    </div>


    Jetzt muss ich nur noch die "box" irgentwie bischen sinnvoller positionieren.
    Und der "Haken" an der Sache - bei mouse over wird das Bild nich timmer angezeigt. ZB wenn man mit dem Mauszeiger von oben nach unten über die Namen geht. Was kann das sein?

    ^- klar, kann ja nich gehn, wenn das .png darüber ist -.-


    Also bleibt nur noch die "Frage" des styles.

  • ich würde ja "box" nicht als id nehmen sondern als class.
    id nur verwenden wenn was einmalig ist auf der seite class bei sachen die mehrmals auf deiner seite sind.



    dein # musst du dann aber im css teil durch einen . ersetzen
    das die Zeile braun wird wenn die maus drüber fährt kannst du auch ohne javascript :)
    hier siest mein bsp
    http://test.ds-pro.de/tabelle.html

  • Oh, naja, ... ich bin ne echte copycat was HTML ect angeht ;D
    Kommt davon, wenn man PHP lernt, HTML aber nicht wirklich beachtet hat ;D
    Was ich ja ganz irre finde ist, dass HTML schweriger ist, als PHP. ... Also für mich =)


    Das mit dem # is weg.
    Alles funktioniert so, wie es soll.
    Außer, dass ich nicht weiß, wie ich die box anders platzieren kann (aber so gehts ja auch erstmal)
    und ein klitze kleines Problem mit der Ladezeit, da jetzt auf dieser Page ~ 7MB Images geladen werden müssen.
    Ich denke mal da müsste was mit JS gehn, um das Bild für die Box erst dann zu laden, wenn die Maus drauf zeigt.


    PS: seit dem ich ne neue Tastatur hab, bin ich nur noch am Posts Editieren ;D

  • bei mir ist das # immer noch da^^


    also bei mir ist die seite schnell geladen :)
    1 sec oder so am längsten brauchen die google tools^^



    und bei den Bildern ist das Problem er lädt nur eine bestimmte Anzahl an Bildern gleichzeitig. Ist so eine maximalbeschräkung beim browser. (lösungen sind glaub ich mehrere bilder in eins stecken und den bildern ne andre url geben da die maximalen downloads pro url beschränkt sind)


    aber mich stört das bei der seite nicht durch die bilder geht ja nichts anderes langsamer und so schnell bin ich mit der maus auch nicht da drauf so das die eingezeigt werden müsten :)

  • Ja, das mit dem # -> wenn ich das zum Punkt ändere, dann funktioniert es nicht =/
    Die Bilder werden dann sofort angezeigt.


    Und was meinst Du mit google tools oO?


    Was ich allerdings vergessen hab - was Du ja schon sagtest - die maximalen Verbindungen -.-
    ich nutze Opera und hab die bei mir immer auf Anschlag eingestellt. Daher lädt es bei mir länger, also alle Bilder.
    Dann muss ich wohl doch mal suchen, wie ich die Bilder nur dann lade, wenn die Maus darüber liegt.

  • wie gesagt die bilder läd er als letztes bei mir, da ist das scheiß egal eig.


    und wiso es nicht funst wenn du # zu . machtst liegt darann dass
    du noch die id zu class machen musst.
    id wie gesagt für einmalige sachen class für sachen die öfter vorkommen (id darfst du also nie doppelt auf einer Seite haben)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!