ilch Forum » Allgemein » HTML, PHP, SQL,... » Bild Mouseover innerhalb einer Tabelle

Geschlossen
  1. Mo. 10.03.2014 11:38 Uhr #1
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    Hi Leute, ich hoffe mir kann jemand helfen. Ich versuche gerade krampfhaft mit Null Fortschritt innerhalb einer von mir angelegten Tabelle hinteren einen Text ein Mouseover-Bild anzuzeigen.

    Ich habe mich jetzt schon durch zisch seiten im Web gewühlt um herauszufinden wie ich ein Bild reinbekomme. Leider findet man im Web nur Javascripte die ein Wechsel von Bild zu Bild machen oder nur einzelne Bilder anzeigen lassen ohne Positionsangabe.

    Ich weiß das sowas geht, nur WIE?

    Folgendes habe ich vor:

    Ich habe eine Tabelle erstellt in der alle Waffen meines Games sind. Nun möchte ich, wenn man auf den Namen der Waffe zeigt das sich ein Bild der Waffe öffnet bis ich die Maus wieder vom Bild nehme.

    Das Problem:

    Ich habe versucht den Waffen innerhalb der Tabelle eine ID zu geben, aber sobald ich das tue verschiebt sich meine Tabelle. Was mache ich falsch? Ist das erste mal das ich sowas versuche, daher bin ich da völlig ungeübt darin. Wäre super wenn mir jemand sowas erstellen kan und mir erklärt wie es funktioniert.:(

    Hier ein Teil der Tabelle:



    Versucht habe ich es mit diesem Script:

    Head Bereich:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <script type="text/javascript">
    function showPic(id)
    {
        document.getElementById('pic-'+id).style.display='block';
    }
     
    function closePic(id)
    {
        document.getElementById('pic-'+id).style.display='none';
    }
    </script>


    Body Bereich:
    ?
    1
    2
    <img src="m4A1.jpg" id="M4A1" style="display: none;" /><span onmousover="showPic('M4A1');" onmouseout="closePic('M4A1');"></span>
    <img src="MP5K.jpg" id="MP5K" style="display: none;" /><span onmousover="showPic('MP5K');" onmouseout="closePic('MP5K');"></span>


    Nur geht eben nicht!


    verwendete ilch Version: 1.1 P
    0 Mitglieder finden den Beitrag gut.
  2. Mo. 10.03.2014 12:44 Uhr #2
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    Also zunächst mal des fehlende "e" in
    ZitatZitat
    onmouseover

    ergänzen, vielleicht reicht das ja schon.
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  3. Mo. 10.03.2014 19:22 Uhr #3
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    Hmm, Davon weiß ich aber immernoch nicht wie es funktioniert^^


    Zuletzt modifiziert von deejay2302 am 10.03.2014 - 19:24:05
    0 Mitglieder finden den Beitrag gut.
  4. Mo. 10.03.2014 20:33 Uhr #4
    User Pic
    Saarlonz Hall Of Fame
    Registriert seit
    07.08.2008
    Beiträge
    3.003
    Beitragswertungen
    235 Beitragspunkte
    Outi77 hat dich ja auch nur darauf hingewiesen mit dem Gedanken dass das schon der Fehler hätte sein können.
    0 Mitglieder finden den Beitrag gut.
  5. Mo. 10.03.2014 21:42 Uhr #5
    User Pic
    FightClub Mitglied
    Registriert seit
    02.06.2013
    Beiträge
    198
    Beitragswertungen
    1 Beitragspunkte
    Mach mal aus onmousover das onmouseover. lachen


    Zuletzt modifiziert von FightClub am 10.03.2014 - 21:43:04
    0 Mitglieder finden den Beitrag gut.
  6. Mo. 10.03.2014 21:48 Uhr #6
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    ZitatZitat geschrieben von FightClub
    Mach mal aus onmousover das onmouseover. lachen

    Du kleiner Klugscheißer lachen
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  7. Mo. 10.03.2014 22:00 Uhr #7
    User Pic
    Saarlonz Hall Of Fame
    Registriert seit
    07.08.2008
    Beiträge
    3.003
    Beitragswertungen
    235 Beitragspunkte
    ZitatZitat geschrieben von Outi77
    ZitatZitat geschrieben von FightClub
    Mach mal aus onmousover das onmouseover. lachen

    Du kleiner Klugscheißer lachen


    looooooooooool
    0 Mitglieder finden den Beitrag gut.
  8. Mo. 10.03.2014 22:13 Uhr #8
    User Pic
    FightClub Mitglied
    Registriert seit
    02.06.2013
    Beiträge
    198
    Beitragswertungen
    1 Beitragspunkte
    ZitatZitat geschrieben von -saarlonz-
    ZitatZitat geschrieben von Outi77
    ZitatZitat geschrieben von FightClub
    Mach mal aus onmousover das onmouseover. lachen

    Du kleiner Klugscheißer lachen


    looooooooooool
    0 Mitglieder finden den Beitrag gut.
  9. Mi. 12.03.2014 05:51 Uhr #9
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    ZitatZitat geschrieben von -saarlonz-
    Outi77 hat dich ja auch nur darauf hingewiesen mit dem Gedanken dass das schon der Fehler hätte sein können.


    Ja aber muss ich aus einer Tabelle den Wert der ausgelesen wird nicht mit einer ID versehen?
    0 Mitglieder finden den Beitrag gut.
  10. Mi. 12.03.2014 06:24 Uhr #10
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Das Bild selbst muss die id bekommen, hat es ja schon, allerdings ohne Prefix.

    Entweder das Prefix bei der Id beachten, also z.B. id="pic-M4A1" oder in den Funktionen entfernen.
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  11. So. 16.03.2014 03:33 Uhr #11
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    Also ich hab jetzt schon alles mögliche probiert. In erster Linie mal mit Text statt Bildänderungen. Trotzdem geht es nicht.

    In Dreamweaver sehe ich den onmouseover und den onmouseout Wert immer oben statt dort wo er hin soll. Er will permamenent nicht den Namen der Waffe aus der Tabelle auslesen dahin positionieren wie er soll.

    Hab es jetzt so probiert:

    <div id="Famas"
    onmouseover="this.innerHTML = 'Famas 123'"
    onmouseout="this.innerHTML = 'Famas'">Famas</div>

    Und wieder ist der Text oben. Hab jetzt schon alles mögliche was mir in den Sinn kam durchprobiert.


    Was ich mir eigentlich gedacht hatte war es wie eine Tabelle die Waffen aus der Tabelle auszulesen. Also so

    Waffe 1 = Bild 1
    Waffe 2 = Bild 2

    Waffe 1 = onmouseover="this.innerHTML = 'Bild 1'"
    Waffe 2 = onmouseover="this.innerHTML = 'Bild 2'"

    Mit den oben genannten Code (Im letzten Theadbeitrag) habe ich es auch schon versucht. Es geht nicht. Auch mit dem fehlenden e im mouseover nicht.

    Heißt für mich ja, das Script kann keine Textelemente aus der Tabelle auslesen. Deswegen sehe ich da auch nix.

    Ich fummel seit Stunden an dem Teil rum, und wühle mich weiter im Netz durch irgendwelche HTML Seiten und so langsam krieg ich die Krise mit dem Teil traurig


    Zuletzt modifiziert von deejay2302 am 16.03.2014 - 03:34:06
    0 Mitglieder finden den Beitrag gut.
  12. Mo. 17.03.2014 18:40 Uhr #12
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    Mairu? Hast du eine Idee?
    0 Mitglieder finden den Beitrag gut.
  13. Mo. 17.03.2014 20:24 Uhr #13
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Das wäre jetzt mit dem Code, den du geschrieben hast.

    jsfiddle.net/TS76J/

    Allerdings ist das meiner Meinung nach nicht wirklich brauchbar (würde es eher werden, wenn man die Bilder in einem Container mit fester Größe hat, damit sich die Tabelle nicht verschiebt).
    Meinst du mit über der Tabelle darüber in diesem Sinne oder eigentlich als Tooltip sozusagen davor, wie z.B. qtip2.com/demos oder jqueryui.com/tooltip/#custom-content.

    Dann würde ich empfehlen auch auf so eine Bibliothek zurückzugreifen.


    Zuletzt modifiziert von Mairu am 17.03.2014 - 20:25:29
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  14. So. 23.03.2014 19:11 Uhr #14
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    Der erste Link kommt schon in etwa hin wie es sein soll. Allerdings das Bild nicht über der Tabelle, da man man nicht so weit hochscrollen kann.

    An eine Verbindung mit JQery hatte ich auch erst gedacht, allerdings kenn ich mich dem Teil überhaupt nicht aus.

    Ich hätte funktionsmäßig eher an eine Verbindung mit der Greybox gedacht. Also das Bild immer zentriert beim aufpoppen, und vorallem sanft.

    Die Bilder haben alle eine feste Größe, daher wäre das nicht das Problem.

    Das obige Beispiel ist ja das was ich meine, mso einer Art von Tabelle.

    <table>
    Bild 1 width= 300 height= 300 position=center
    Bild 2 width= 300 height= 300 position=center
    Bild 3 width= 300 height= 300 position=center
    </table>

    Nur da komme ich nicht weiter. Ich hatte es vor ein paar Jahren gesehen wie es aussehen könnte, aber habe es mir nicht einprägen können da ich es nie genutzt hatte. Ich lerne so etwas aus der Routine heraus. Bin ja auch schon alter Mann lachen

    Deswegen bin ich hier lächeln
    0 Mitglieder finden den Beitrag gut.
  15. So. 23.03.2014 20:35 Uhr #15
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Meinst du mit dem ersten Link das Qtip2 oder das bei Jsfiddle?
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  16. Mo. 24.03.2014 21:04 Uhr #16
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    Genau. Also einfach eine Liste der Waffen als Zugriff. Und den Scriptcode innerhalb der Tabelle als Abfrage der Liste.

    Quasi so:

    <script>Lies mir MP5k aus und gibt es als Mouseover aus<script>
    <script>Lies mir M4A1 aus und gibt es als Mouseover aus<script>

    <liste>
    mP5k
    M4A1
    <liste>

    Ich hoff du verstehst was ich meine?!

    Ich vermute das es nicht so einfach ist, bzw. das ich um, den Code jedesmal innerhalb der Tabelle bei jeder Waffen einzeln reinmachen vermutlich nicht drumrum komme.


    Zuletzt modifiziert von deejay2302 am 24.03.2014 - 21:07:08
    0 Mitglieder finden den Beitrag gut.
  17. Di. 25.03.2014 08:58 Uhr #17
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    So jsfiddle.net/TS76J/1/ ?
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  18. Sa. 29.03.2014 18:37 Uhr #18
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    Jaaa genau, so meine ich das lächeln Du bist n Schatz lächeln

    Jetzt nur noch eine Frage...Wo schmeiß ich den Javascript Code am besten hin?

    EDIT:

    Ich habe das hier irgendwo in die style.css gehauen:

    ?
    1
    .qtip{ max-width: 800px }



    So habe ich den Grafiklink angepasst.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    </thead>
      <tbody>
      <tr data-tooltip-img-src="/include/images/waffen/KRISS Vector.PNG">
        <th align="left" scope="row">KRISS Vector</th>
        <td bgcolor="#F8080C">44</td>
        <td>54</td>
        <td bgcolor="#DCB902">99</td>
        <td>76</td>
        <td bgcolor="#F8080C">20 / 10</td>
        <td>14.000</td>
        <td bgcolor="#9E8507">143</td>
        <td>22</td>
      </tr>


    Natürlich habe ich das tbody unten auch vor dem Table wieder geclosed.
    Trotzdem tut sich nix grumml


    Zuletzt modifiziert von deejay2302 am 29.03.2014 - 19:33:45
    0 Mitglieder finden den Beitrag gut.
  19. Sa. 29.03.2014 18:46 Uhr #19
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.680
    Beitragswertungen
    1217 Beitragspunkte
    In die index.htm zwischen <head> und </head> aber nach dem JQuery Link.

    ?
    1
    2
    3
    4
    5
    <script type="text/javascript">
    <!--
     Hier kommt der Code rein
    //-->
    </script>


    oder

    in eine JS Datei und Einbindung per Link zur Quelle unter der JQuery Einbindung.

    Beispiel:
    ?
    1
    <script type="text/javascript" src="ordner/beispiel.js"></script>
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  20. Sa. 29.03.2014 19:33 Uhr #20
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    Geht trotzdem nicht.

    Mein Index.htm



    Schau mal im vorigen Beitrag der Edit. Hab es jetzt in die index.htm verfrachtet.
    0 Mitglieder finden den Beitrag gut.
  21. Sa. 29.03.2014 23:05 Uhr #21
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.680
    Beitragswertungen
    1217 Beitragspunkte
    • Du hast JQuery 2mal eingebunden.
    • Du musst jquery.qtip.min.js und jquery.qtip.min.css mit einbinden.
    • Gib den Grafiken keine Namen die Leerzeichen enthalten.
    • Du solltest bei der Menge an JS in den index.htm, um den Überblick zu behalten, eine externe Datei mit Beschriftungen einsetzen (nur als Tip)
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  22. So. 30.03.2014 01:43 Uhr #22
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    Das JQuery 2 mal eingebunden ist, ist mir bewusst. Nur sind beide Funktionen von vorn herein drin gewesen. Nehme ich etwas davon raus, dann fehlt wieder irgendwo eine Funktion.

    Du meinst sicherlich diese Zeilen hier:

    ?
    1
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>


    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <script type="text/javascript">
    $(document).ready(function(){
    //Full Caption Sliding (Hidden to Visible)
    $(".cover").css("top", "160px");
    $('.boxgrid.captionfull').hover(function(){
    $(".cover", this).stop(true, true).animate({top:'70px'},160);
    }, function() {
    $(".cover", this).stop(true, true).animate({top:'160px'},160);
    });
    });
    </script></code>
     
    [code]<!--JQuery Modul-->
        <script charset="utf-8" type="text/javascript" src="include/includes/jquery/jquery-1.4.4.min.js"></script>
        <script charset="utf-8" type="text/javascript" src="include/includes/jquery/jquery-ui-1.8.6.custom.min.js"></script>
        <link charset="utf-8" media="screen" type="text/css" href="include/includes/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />


    Nur welches davon nehme ich raus ohne Funktionenen des Templates einzuschränken?

    ZitatZitat
    Du musst jquery.qtip.min.js und jquery.qtip.min.css mit einbinden.


    Hä? Bahnhof?

    ZitatZitat
    Gib den Grafiken keine Namen die Leerzeichen enthalten.


    Das hatte ich bereits geändert und getestet. Ändert trotzdem nichts.

    ZitatZitat
    Du solltest bei der Menge an JS in den index.htm, um den Überblick zu behalten, eine externe Datei mit Beschriftungen einsetzen


    Wenn ich wüsste was du meinst und wie das gehen soll, dann würde ich das sicherlich tun.
    In der Regel klatsch ich aber immer alles in die index.thm. Das erspart mir das rumgesuche in anderen Files. lachen
    0 Mitglieder finden den Beitrag gut.
  23. So. 30.03.2014 08:59 Uhr #23
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Wichtig ist halt, dass die Einbindung vor der ersten Benutzung erfolgt. Von der Sache her sollte natürlich die aktuellste Version benutzt werden, wenn damit noch alles geht. Wenn nicht ggf. Anpassungen vornehmen, damit es geht oder verschiedene Versionen aber "bewusst" parallel nutzen.

    Ich hatte bei dem jsfiddle die qtip Dateien eingebunden, das kann man links in dem Menü sehen.

    Dafür habe ich die Dateien von dem CDN verwenden, da muss man nichts bei sich hochladen und der Zugriff darauf sollte auch sehr schnell sein.

    qtip2.com/download

    qtip2.com/guides

    jQuery selbst muss natürlich kein weiteres mal eingebunden werden zunge
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  24. So. 30.03.2014 09:20 Uhr #24
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.680
    Beitragswertungen
    1217 Beitragspunkte
    Wenn Du den Link zum jquery-latest.pack.js drin lässt sollte es reichen. Natürlich kann man diese Datei auch auf den eigenen Server legen.

    Im Codebeispiel von Mairu wurde QTIP für die Tooltip-Anzeige verwendet. Dieses sieht man auf der linken Seite unter External Resources und dem CSS Eintrag qtip{}. Ohne die Einbindung der beiden Dateien wird nie ein Tooltip erscheinen. (wie schon erwähnt)

    So würde alles zusammengefasst aussehen:

    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  25. So. 30.03.2014 15:56 Uhr #25
    User Pic
    deejay2302 Mitglied
    Registriert seit
    29.01.2008
    Beiträge
    205
    Beitragswertungen
    0 Beitragspunkte
    Hmm ok. Ich glaube so langsam verstehe ich es...hoffe ich lächeln

    Ich hatte schonmal versucht jQuery direkt auf meinem Server zu betreiben. Hatte es also hochgeladen und versucht einzubinden. Nur leider hatte es nicht funktioniert. Daher habe ich die Linkversion genommen, welche ja am einfachsten ist.
    Das Qtip ist mir aber gänzlich unbekannt, und ich sehe es gerade zum ersten mal. Daher verwirrt es mich gerade etwas^^

    Aber ich werde es mal versuchen mit euren Tips. Auf das ich mir komplett mein Template zerschiesse lachen

    Das Problem mit doppelten jQuery Einträgen hatte ich vor ein paar Jahren schonmal und mir bekannt. Nur gab es auf der jetzigen Seite irgendwie bisher kein Problem damit, daher nahm ich an, das es mittlerweile irrelevant sei wie oft es im Quelltext steht. lächeln

    Aber Danke erstmal euch beiden. Ich melde mich wieder, falls es nicht funktioniert zwinker
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten