• Hallo

    Wenn ich bei folgendem script möchte, dass die onmouseover-url nicht auf left 420 liegt sondern bsw. auf 620 ... versprutzt es mir immer den ganzen code.... - wie kann ich das lösen, dass Bild 1 jeweils auf der 420er Position bleibt und nur Bild 2 sich weiter nach rechts versetzt !??


    <div style="position: fixed; top: 0; left: 420px;">
    <a href="http://Link"><img src="Bild-URL 1" onmouseover="this.src='Bild-URL 2'" onmouseout="this.src='Bild-URL 1'" alt="" /></a>
    </div>


    Gruß El-Faro

  • Servus synaptic,

    danke für die schnelle Antwort ....

    doch leider ist mir nach wie vor nicht so ganz klar wo und vor allen dingen wie ich die Position des 2. Bildes neu bestimmen kann ... habe schon std.-lang versucht die img position für das mouseover-Bild extra im code einzufügen doch irgendwie funzt dann als gar nichts mehr. Auch meine Suche auf div. Seiten nach einem Lösungsbeispiel war ergebnislos - wenn ich nur mal ein Bsp. hätte, so könnte ich mir den Weg dann selbst zusammen paldovern ^^

    Lg El-Faro

  • ungetestet:

    Code
    function setNewPic(objID, newSrc, newLeftPos, newTopPos){
    var target = document.getElementById(objID);
    target.src = newSrc;
    taregt.style.left = newLeftPos;
    target.style.top = newTopPos;
    }

    kannste dann so aufrufen:

    HTML
    <img style="position:relative" id="swap-img" src="Bild-URL1" onmouseover=" setNewPic('swap-img', 'Bild-URL2', 100, 0)" onmouseout=" setNewPic('swap-img', 'Bild-URL1', 0, 0)" alt="" />

    alternativ ginge es evtl auch mit padding oder margin, aber ich bevorzuge für positionierungen lieber position:relative oder position:absolute.
    man muss sich damit nur auskennen ;)
    denn es gibt diverse dinge, die man dabei einfach beachten muss für volle funktion und browser-kompatibilität.

  • Das mit dem auskennen ist ja gerade die Sache .... wenn mich meine Eltern anstatt mit Französisch gleich mit solch einer Sprache aufgezogen hätten, wäre ich jetzt wohl kaum als unwissender oder sich dämlicher anstellender User hier im Forum ;)

    Leider komme ich jetzt mit dem von dir geposteten Code nicht so wirklich zurecht...

    Wenn ich nur den html-code her nehme - und ich die Bild-urls einbaue sowie die position 100, 0 an meine Bedürfnisse anpasse tut sich leider gar nichts.

    Woher nimmt der Code denn die Informationen welche Zahl für Höhe bzw. für die Breite zuständig ist ... muss ich da noch irgendwas erweitern ?

    Oder muss ich evtl. deinen ersten Code im Head der Seite einfügen !?

    Hilf mir mal bitte nach dem Handbuch html für Dummies auf die Sprünge :idea:

  • oh ok ich wusste nicht, dass deine kenntnisse "rudimentär" unterschreiten.
    is aber kein problem.

    also die function muss in script-tags...
    also so:

    HTML
    <script type="text/javascript">
    function setNewPic(objID, newSrc, newLeftPos, newTopPos){
    var target = document.getElementById(objID);
    target.src = newSrc;
    taregt.style.left = newLeftPos;
    target.style.top = newTopPos;
    }
    </script>

    wo das script-tag hinkommt ist der seite egal, eigentlich kenn ich es so, dass man sowas in den head schreibt.
    doch aus performance-gründen heisst es seit einiger zeit, dass man javascripte als letztes in den body schreiben soll.


    zur reihenfolge:
    setNewPic(objID, newSrc, newLeftPos, newTopPos) als funktionsaufruf mit parametern
    setNewPic('swap-img', 'Bild-URL2', 100, 0) als funktionsaufruf mit parametern die werte enthalten

    objID ist die id vom img-tag
    newSrc ist der pfad zur neuen bildquelle
    newLeftpos ist die position für links und newTopPos die position für oben

    durch position:relative im bild können die left- und top-werte greifen 

  • Oh man =(

    Ich begreif es immernoch nicht.... wo genau geb ich denn jetzt die genaue Top bzw. left position in px an ? - wenn ich einfach nur die Zahlen im setNewPic verändere tut sich leider gar nichts .... muss ich das vielelicht schon ind en scvript tags angeben ?

  • ach jau die px..
    sry ich steh unter schmerzmedis.. hatte gestern früh nen unfall..
    schreib des mal in den funktionsaufruf beim ersten wert is die position links und beim zwerten die position top
    schreibs so

    HTML
    <img style="position:relative" id="swap-img" src="Bild-URL1" onmouseover=" setNewPic('swap-img', 'Bild-URL2', '100px', '0px')" onmouseout=" setNewPic('swap-img', 'Bild-URL1', '0px', '0px')" alt="" />
  • Na für das, dass du erst einen Unfall hattest bist trotzdem ganz schön fix unterwegs ^^ .... dann werd ich gleich mal weiter testen ob ich einem unter Schmerzmedis stehenden so einigermaßen folgen kann =)

  • bin halt nicht aufm kopf gelandet.. war nen 1.5-facher salto übern lenker und hab mit der rechten seite gebremst.
    schreiben geht halt nur mit einer hand und mit der muss ich auch die maus bedienen.
    deswegen hab ich auch keinen getesteten code geliefert/liefern können.

    meine tel-nr haste ja per mail. morgen früh bin ich nochma beim doc, diesmal nen chirurg, damit ich weiß obs ellenbogengelenk gebrochen ist und was mit den beiden handgelenken ist.
    du kanst hier mal deinen kompletten code posten, dann kann ich das script testen.
    die urls bitte mit kompletter url zum bild, damit dir bilder auch lokal bei mir vorhanden sind

  • Servus....

    kam leider nicht eher dazu mich zu melden.... hoffe dein Arztbesuch ist einigermaßen positiv verlaufen und es ist nicht ganz so schlimm wie es sich angehört hat ^^

    Hab jetzt einfach mal ein Beispiel auf die Testseite geknallt - dabei handelt es sich um ein Baukasten von Jimdo .... oben in dem Header sind die 7 Buttons (jetzt nur als als gif abgelegt) neben an soll quasi auf der restlichen Breite jeweils das verschiedene Bild nach dem jeweiligen mouseover. Also Maus über button 1 - rechts bild a .... maus über Button 2 - rechts bild b ..... so das man oben quasi eine neue Navigation erreicht die man so durchblättern kann - und dann über das jeweilige Bild oder Button auch zur verlinkten Unterseite gelangt.

    Hoffe das ist jetzt einigermaßen verständlich beschrieben :shock::D

    Unter Ablage hab ich auch mal zwei Bilder gesetzt.

    Mit deinem code hab ich es auch halbwegs hinbekommen .... da war ein Schreibfehler bei target drin - deswegen hat es wohl so lange nicht hingehauen ^^

    Das Problem welches ich dabei allerdings nach wie vor hatte ..... der Übergang von Bild 1 auf das versetzte zweier ging nicht flüssig. Und ich hab es auch nicht ausserhalb des Contents unten bekommen ... also nicht oben rein wo der header sitz - kein Plan warum...

    Hoffe doch das wir das irgendwie lösen können ^^

    Hier jetzt erstmal der Link zur Testseite:

    http://www.socialnomix.jimdo.com

    Grüße El-Faro

  • hab nu ne schiene am rechten arm, totaler abfuck, radiusköpfchen gebrochen und 2 rippen angebrochen.
    ruf am besten ma an, das mitm tippen wird zu krass für mich.
    nur musste am ende mal die lösung hier posten, damit alle was davon haben...

    für den schreibfehler:sorry :)

    der nicht flüssige übergang kann dadurch zustande kommen, dass die benötigten bilder nicht vorgeladen wurden.
    mach ne klasse im css die hidden heist und wo nen display:none; werkelt.
    dann binde alle bilder die beim wechseln kommen sollen mit dieser klasse im dokument ein. so is alles da un nix ruckelt

    Einmal editiert, zuletzt von synaptic (24. März 2011 um 08:14)

  • Oh man .... das nächste mal solltest du wohl eher auf der guten, alten herkömmlichen Art und Weise bremsen =)

    Momentan muss ich leider wieder einmal die Nachtschichten schieben und tagsüber pennen - daher werd ich wohl erst am Samstag tagsüber bei Dir durchklingeln ...
    Bis dahin mal gute Besserung und schöne Grüße aus München.

    Mfg El-Faro