Anzeige

Schieberegler mit iframe content

Schieberegler mit iframe content | PSD-Tutorials.de

Erstellt von Ammersee, 03.08.2007.

  1. Ammersee

    Ammersee Laborant

    Dabei seit:
    21.01.2007
    Beiträge:
    130
    Geschlecht:
    männlich
    Ort:
    am Ammersee (Obay)
    Software:
    Adobe Familie
    Schieberegler mit iframe content
    Guten Tag zusammen,

    stehe hier vor einem Problem und zwar hatte ich vor eine Zeitachse zu machen, die aus einem schieberegler besteht da ich mich nicht so mit javascript auskenne und flash nicht verwenden will hab ich es mit css gemacht und ajax.
    Hier das Ergebniss ( das Aussehen ändert sich natürlich noch)

    Code (Text):
    1.  
    2. <code>
    3. <style>
    4. #heureka2 a {height:50px}
    5. #heureka2 a:hover {border-right:50px solid #FFCC00; background-color:#009999}
    6. #heureka2 a span{display:none; margin-left:-50px; }
    7. #heureka2 a:hover span {display:inline; position:absolute; left:-30px;}
    8. </style>
    9.  
    10.  
    11. <div id="heureka2" style="margin-left:140px; position:relative; border:1px solid #FFCC00; font-size:20px; width:550px; height:51px">
    12.  
    13. <a style='position:absolute; left:0px; top:0px; width:500px' href='http://'><span>1925<iframe src="http://www.aol.de" style="margin-top:200px; border:5px #009999 ridge;" name="myiframe" scrolling="auto" frameborder="1" align=aus marginheight="5px" marginwidth="5px" height="480" width="640"></iframe></span></a>
    14. <a style='position:absolute; left:0px; top:0px; width:480px' href='index.php?heureka2_zahl=24'><span>1924</span></a>
    15. <a style='position:absolute; left:0px; top:0px; width:460px' href='http://google.de'><span><iframe src="http://www.google.de" style="margin-top:200px; border:5px #009999 ridge;" name="myiframe" scrolling="auto" frameborder="1" align=aus marginheight="5px" marginwidth="5px" height="480" width="640"></iframe>1923</span></a>
    16. <a style='position:absolute; left:0px; top:0px; width:440px' href='http://www.zvab.com'><span><iframe src="http://www.zvab.de" style="margin-top:200px; border:5px #009999 ridge;" name="myiframe" scrolling="auto" frameborder="1" align=aus marginheight="5px" marginwidth="5px" height="480" width="640"></iframe>1922</span></a>
    17. <a style='position:absolute; left:0px; top:0px; width:420px' href='index.php?heureka2_zahl=21'><span>1921</span></a>
    18. <a style='position:absolute; left:0px; top:0px; width:400px' href='index.php?heureka2_zahl=20'><span>1920</span></a>
    19. <a style='position:absolute; left:0px; top:0px; width:380px' href='index.php?heureka2_zahl=19'><span>1919</span></a>
    20. <a style='position:absolute; left:0px; top:0px; width:360px' href='index.php?heureka2_zahl=18'><span>1918</span></a>
    21. <a style='position:absolute; left:0px; top:0px; width:340px' href='index.php?heureka2_zahl=17'><span>1917</span></a>
    22. <a style='position:absolute; left:0px; top:0px; width:320px' href='index.php?heureka2_zahl=16'><span>1916</span></a>
    23. <a style='position:absolute; left:0px; top:0px; width:300px' href='index.php?heureka2_zahl=15'><span>1915</span></a>
    24. <a style='position:absolute; left:0px; top:0px; width:280px' href='index.php?heureka2_zahl=14'><span>1914</span></a>
    25. <a style='position:absolute; left:0px; top:0px; width:260px' href='index.php?heureka2_zahl=13'><span>1913</span></a>
    26. <a style='position:absolute; left:0px; top:0px; width:240px' href='index.php?heureka2_zahl=12'><span>1912</span></a>
    27. <a style='position:absolute; left:0px; top:0px; width:220px' href='index.php?heureka2_zahl=11'><span>1911</span></a>
    28. <a style='position:absolute; left:0px; top:0px; width:200px' href='index.php?heureka2_zahl=10'><span>1910</span></a>
    29. <a style='position:absolute; left:0px; top:0px; width:180px' href='http://www.zvab.com'><span><iframe src="http://www.zvab.com" style="margin-top:200px; border:5px #009999 ridge;" name="myiframe" scrolling="auto" frameborder="1" align=aus marginheight="5px" marginwidth="5px" height="480" width="640"></iframe>1929</span></a>
    30. <a style='position:absolute; left:0px; top:0px; width:160px' href='index.php?heureka2_zahl=8'><span>1928</span></a>
    31. <a style='position:absolute; left:0px; top:0px; width:140px' href='index.php?heureka2_zahl=7'><span>1927</span></a>
    32. <a style='position:absolute; left:0px; top:0px; width:120px' href='index.php?heureka2_zahl=6'><span>1926</span></a>
    33. <a style='position:absolute; left:0px; top:0px; width:100px' href='index.php?heureka2_zahl=5'><span>1925</span></a>
    34. <a style='position:absolute; left:0px; top:0px; width:80px' href='index.php?heureka2_zahl=4'><span>1924</span></a>
    35. <a style='position:absolute; left:0px; top:0px; width:60px' href='http://www.zvab.com'><span><iframe src="http://www.zvab.de" style="margin-top:200px; border:5px #009999 ridge;" name="myiframe" scrolling="auto" frameborder="1" align=aus marginheight="5px" marginwidth="5px" height="480" width="640"></iframe>1923</span></a>
    36. <a style='position:absolute; left:0px; top:0px; width:40px' href='index.php?heureka2_zahl=2'><span>1922</span></a>
    37. <a style='position:absolute; left:0px; top:0px; width:20px' href='index.php?heureka2_zahl=1'><span>1920</span></a>
    38. </div>
    39. </code>
    40.  
    Nun, wie Ihr sehen könnt hängt das ganze ein bisschen. Weiss jemand wie ich das anders machen kann oder hat jemand vielleicht eine komplett andere Idee.
    Also das was ich will ist eben ein Schieberegler und wenn man den bewegt, ändert sich eben der Content darunter.

    Mit freundlichsten Grüßen Andi


    Edit by Bahamut: Code Tags eingefügt.
     
    Zuletzt von einem Moderator bearbeitet: 03.08.2007
    #1      
  2. PitBull0993

    PitBull0993 Noch nicht viel geschrieben

    Dabei seit:
    01.05.2006
    Beiträge:
    46
    Geschlecht:
    männlich
    Software:
    Photoshop CS2, Notepad++
    Schieberegler mit iframe content
    AW: Schieberegler mit iframe content

    Hi Ammersee!

    Als erstes: AJAX ist/basiert auf JavaScript.

    Zum Thema,
    ich kann nichts hängen sehen...ich kann gar nichts sehen!
    Die Code-Funktion des Forums stellt den Quelltext nur leserlicher dar und gibt kein Wirkliches HTML aus, welches durch maskieren der HTML-Tags erreicht wird. Also musst du uns eine Beispielseite zeigen!
    Trotzdem habe ich den Quellcode einmal ausprobiert und habe den Content sehen können.

    Außerdem verstehe ich nicht, weswegen du beim öffnen des div-Tags Styleinformationen mit gibst. Du könntest es eleganter lösen wenn du in den Style-Bereich einfach diese Zeile
    Code (Text):
    1. #heureka2 {margin-left:140px; position:relative; border:1px solid #FFCC00; font-size:20px; width:550px; height:51px;}
    einfügst?

    MfG, PitBull
     
    #2      
x
×
×