Javascript: Bereich verschwinden lassen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Javascript: Bereich verschwinden lassen

    Hallo Leute,

    Ich habe ein Problem mit Javascript, da ich damit nochnie richtig gearbeitet habe, aber vielleicht ist das was ich suche ja nur ein klein bisschen was für einen erfahrenen JSler kein Problem sein wird.

    Ich habe also mein Bannerklicksystem fertig gestellt und möchte nun ein klein bisschen die Optik und die Erscheinung verbessern. Wenn jemand einen Banner geklickt hat dann soll dieser verschwinden, man kann sich das ganze so vorstellen:

    Quellcode

    1. Banner 1: Banner, Bannerinformationen
    2. Banner 2: Banner, Bannerinformationen
    3. Banner 3: Banner, Bannerinformationen


    Wenn jetzt also zum Beispiel Banner 2 geklickt wird, so soll (ohne dass sich die Seite neu laden muss, denn wenn die Seite neu geladen wird, dann wird er sowieso nicht mehr angezeigt) er inklusive der Bannerinformationen verschwinden. Vielleicht lässt sich das ja irgendwie per Div + Javascript lösen.

    Ich danke euch für eure Tips und Hilfen

    Euer Mossi

  • Hi,

    bin nun auch nicht der vollprofi in JS aber ich versuchs mal.

    Also du gibts deinem banner, div, waht ever ne eindeutige id. id="banner1". Zusätzlich stattest du ihn mit dem attribut style="display:inline" aus.

    Zusätzlich bekommt der Banner von dir noch ein "onklick" verpasst, das dann deine eigentliche JS fuktion aufruft.
    Sieht dann z.b so aus:

    Quellcode

    1. <img src="bild.png" alt="banner1" id="banner1" style="display:inline" onClick="function(1);" />
    2. <img src="bild2.png" alt="banner2" id="banner2" style="display:inline" onClick="function(2);" />
    3. <img src="bild3.png" alt="banner3" id="banner3" style="display:inline" onClick="function(3);" />


    So "dein" JS-code wird dann ausgeführt, sobald das Pic angeklickt wird, onClick halt ;).

    der macht dann nix anderes als, je nachdem was du ihm im eventhandler (onClick) für eine nummer übergeben hast, das attribut style="display:inline" in style="display:none" zu ändern. Somit wird das bild nimmer angezeigt.

    Sieht dann ca so aus (fehler musst du selber ausmerzen :P):

    Quellcode

    1. <script tyspe="text/javascript">
    2. <!--
    3. function function(nr)
    4. {
    5. //du deklariert die variable element
    6. var element;
    8. //du weist der variable element was zu, und zwar das jeweilige bild
    9. element=document.getElementById('banner'+nr);
    11. //mit der kleinen abfrage werden die bilder ausgeblendet
    12. if(element.style.display=='inline')
    13. {
    14. element.style.display=='none';
    15. }
    16. else
    17. {
    18. }
    19. }
    20. //-->
    21. </script>
    Alles anzeigen
    ----[Blockierte Grafik: http://www.smilie-harvester.de/smilies/Alltag/putzen.gif] Nein ich bin nicht die Signatur, ich Putz hier nur ---

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von eseL ()

  • hallo esel,
    danke erstmal für deine hilfe. rein von de logik her habe ich deinen ansatz verstanden, allerdings funktioniert der code leider nicht, ich werde mal alles poste, wie ich es jetzt stehen habe und vielleicht findet jemand den fehler den ich übersehe. der javascriptteil sieht so aus ->

    Quellcode

    1. <script type="text/javascript">
    2. <!--
    3. function ausblenden(nr)
    4. {
    5. var element;
    6. element=document.getElementById('banner'+nr);
    7. if(element.style.display=='inline')
    8. {
    9. element.style.display=='none';
    10. }
    11. else
    12. {
    13. }
    14. }
    15. //-->
    16. </script>
    Alles anzeigen


    und der teil in php der die ganzen divs ausgibt sieht so aus:

    Quellcode

    1. echo "<div id=\"banner$banner[bannerid]\" style=\"display:inline\" onClick=\"ausblenden($banner[bannerid])\";>
    2. <a href=\"module/paidbanner/paidbanner.php?userid=$_SESSION[userid]&bannerid=$banner[bannerid]\" target=\"_blank\">
    3. <img src=\"$banner[banneradresse]\" width=\"468\" height=\"60\" border=\"0\" alt=\"Banner $banner[bannerid]\" /></a><br />
    4. </div>";


    $banner[bannerid] ist immer eine nummer, jeweils die der bannerid...

    ich danke für jede hilfe
    euer mossi

  • Also der Javascript teil weißt ein paar kleine Fehler auf. ich würde die Abfrage in JS auch ein bisschen umstellen, da der display Type nicht immer inline sein muss. Da ist es einfacher das ganze so zu machen:

    Quellcode

    1. <script type="text/javascript">
    2. function ausblenden(nr) {
    4. element=document.getElementById('banner'+nr);
    6. if(element.style.display!='none'){
    7. element.style.display='none';
    8. }
    9. }
    10. </script>


    Funktioniert auch, habe es getestet. Wenn es bei dir nicht funktioniert, solltest du mal diese geparste Zeile im Quelltext anschaun:

    Quellcode

    1. echo "<div id=\"banner$banner[bannerid]\" style=\"display:inline\" onClick=\"ausblenden($banner[bannerid])\";>

    Und gucken ob die ID des DIV Element korrekt ist und die onClick funktion auch.

    Dann sollte auch alles gehen.