Image Swap mit div / span

  • Hallo,
    ich möchte das bei einem mouseover sich ein bild auf der webseite jedesmal ändert (an der selben position).
    Also zB man hat eine Liste an Wörtern mit Tieren, und je nachdem über welches man fährt ändert sich rechts an der webseite das Bild an der selben position.

    OK, mit HTML habe ich das alles schonmal hinbekommen, aber jetzt wird es super kompliziert. Auf der Seite wo ich das verwenden möchte kann man kein css normal verwenden, auch kein HTML mouseover.

    Mouseover zB sieht so aus: (geht auch nur so)

    <ul class="multi_select"><li class="selector">
    <a rel="nofollow" href="#" target="_blank">
    <span class="ms-int" style="width:186px;height:276px;background-image:url(pic01a.gif);border:0;margin:0;padding:0;">

    <span class="button" style="width:186px;height:276px;background-image:url(pic01b.gif);border:0;margin:0;padding:0;"></span>
    </span>
    </a></li></ul>

    Und ich habe keine Ahnung warum das so wie oben beschrieben funktioniert... ich kenne die ganzen span class dinge nicht, ich kenn nur das standart css oder html mouseovers...

    Weiß jemand wie auf dem selben Prinzip wie oben so ein image swap funktionieren könnte? Wo sich dann wie ganz oben beschrieben das Bild an einer Position immer austauscht gegen zb "pic01c.gif" "pic01d.gif" "pic01d.gif" etc.?

    Ich weiß die Infos sind nicht gerade viel, vielleicht hat ja wer eine idee was klappen könnte? danke

  • bahnhof berlin...

    also sowas geht über ein bild mit zwei zuständen (mouseover und mouseout in einer datei) und dann css-background-position ändern

    bei dem was du da oben hast wird beim hover der eine teil ausgeblendet und der andere ein, ohne hover isses umgekehrt

    und dann würde noch javascript ne gängige methode darstellen.

    nur wie soll dir jemand helfen wenn man css nich normal (was heisst das in deinen ohren??) eingebunden werden kann

  • das is dort mit javascript gelöst und nicht mit css
    stell hier mal dein codegerüst ein, dann setz ich mich heut abend oder morgen früh hin und bau dir dein javascript dafür

  • Danke... kann man das irgendwie ohne java script machen? weil das wird nicht supportet auf der seite... geht es vielleicht mit diesen < div & < span befhelen? ich weiß nicht wieso justin.tv das so unglaublich kompliziert macht :/ kein javascript, keine externe css, meisten css dinge funktionieren auch nicht... total doof. Aber Mouseove rgeht eben wie oben beschrieben mit < span und < div dingen...

    3 Mal editiert, zuletzt von ot4ku (2. Juni 2012 um 19:12)

  • Eigentlich geht es nur mit JS ^^
    Die Spans bekommen nämlich immer andere Positionen, da man diese nur mit top,left etc. vom Word aus steuern kann.
    Heißt das Bild unter dem ersten Bild ist dann woanders oder wäre kleiner als das obere ^^

    Ansonsten würde man spans folgender Maßen realisieren:

    HTML

    HTML
    <div id="element"><span>Span</span></div>
  • Eigentlich geht es nur mit JS ^^ Die Spans bekommen nämlich immer andere Positionen, da man diese nur mit top,left etc. vom Word aus steuern kann. Heißt das Bild unter dem ersten Bild ist dann woanders oder wäre kleiner als das obere ^^ Ansonsten würde man spans folgender Maßen realisieren:

    Code
    #element { deine anweisungen; }  #element span { display: none; }  #element:hover span { display: block; wo, wie, etc.; }

    HTML

    HTML
    Span

    Kannst du mir DAS beispielt mit ner grafik machen? also grafik1 wird ausgetauscht mit grafik 2 bei mousove von nem text bei anderen text mit grafik3 bzw. wieder anderem wort, grafik4, geht das? aber erstmal teste ich dein erstes beispiel. Ach und wegen Flash... ich hab mal wieder keine Ahung, hab aber swish damit gehen einige sachen einfacher, aber glaub da scheiter ich auch dran. Also wenns anders geht wäre super.

  • verstehe ich auch nicht, aber das is nich mein kampf..^^
    die machen da restrictions lediglich für script und iframe, laut justin.tv sollte es sonst ja alles gehen, was an css funzt bei denen nich?
    bzw wofür machste dir noch nen kopp, wenns bei justin gut aussieht dann is doch alles paletti

  • Wenn du dich auf Deiner Webseite (ot4ku.net...) auf Formatklassen beziehst solltest du das entsprechende Stylesheet auch einbinden. Dafür gibt es einen HEAD-Tag! (Warum sollte bei Dir kein CSS möglich sein ???) Abgesehen davon ist ein Seitendesign mit Hilfe von Tabellen heute nicht mehr Zeitgemäß und wird ausdrücklich vom http://w3c.org als 'missbilligt' eingestuft. Vielleicht findest du auf dieser Seite etwas passendes... http://cssapps.de/foto-gal/fgal_slide01.html