Info-Zettel !?


  • yannikst
  • 990 Aufrufe 6 Antworten

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

  • Info-Zettel !?

    Hallo Leute !

    Ich möchte auf meiner Website eine Art "Bekanntmachung" machen. Dazu möchte ich gerne eine Art Notizzettel mit Pinnadel verwenden, aber wie mache ich so etwas ? Geht es vielleicht auch ohne JS... falls nein, dann wenigstens mit...

    Möglichst soll dieser Zettel "schließbar" sein und mit wandern, wenn man nach unten scrollt !?

    Würde mich sehr über Tips und Möglichkeiten freuen - vielen Dank !
  • Den Notitzblock würde ich als Grafik machen.
    Durch die Variable x kannst du das Bild ausrichten!


    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title> [COLOR='SeaGreen']BANNER RECHTS OBEN [/COLOR]</title>
    4. <script type="text/javascript">
    5. <!--
    6. function setze_x(id, wert)
    7. {
    8. if (document.all)
    9. {
    10. document.all(id).style.posLeft = wert;
    11. }
    12. else if (document.layers)
    13. {
    14. document.layers[id].left = wert;
    15. }
    16. else if (document.getElementById)
    17. {
    18. document.getElementById(id).style.left = wert + "px";
    19. }
    20. }
    21. function setze_y(id, wert)
    22. {
    23. if (document.all)
    24. {
    25. document.all(id).style.posTop = wert;
    26. }
    27. else if (document.layers)
    28. {
    29. document.layers[id].top = wert;
    30. }
    31. else if (document.getElementById)
    32. {
    33. document.getElementById(id).style.top = wert + "px";
    34. }
    35. }
    36. function unsichtbar(id)
    37. {
    38. if (document.all)
    39. {
    40. document.all(id).style.visibility = "hidden";
    41. }
    42. else if (document.layers)
    43. {
    44. document.layers[id].visibility = "hidden";
    45. }
    46. else if (document.getElementById)
    47. {
    48. document.getElementById(id).style.visibility = "hidden";
    49. }
    50. clearInterval(ID);
    51. }
    52. var ID;
    53. window.onload = init;
    54. function init()
    55. {
    56. ID = setInterval("animate();", 100);
    57. }
    58. function animate()
    59. {
    60. if (document.layers)
    61. {
    62. var x = window.innerWidth+window.pageXOffset-700;
    63. var y = window.pageYOffset;
    64. }
    65. else if (document.all)
    66. {
    67. var x = document.body.clientWidth+document.body.scrollLeft-705;
    68. var y = document.body.scrollTop;
    69. }
    70. else if (document.getElementById)
    71. {
    72. var x = window.innerWidth+window.pageXOffset-700;
    73. var y = window.pageYOffset;
    74. }
    75. setze_x("banner", x);
    76. setze_y("banner", y);
    77. }
    78. //-->
    79. </script>
    80. </head>
    81. <body>
    82. <div id="banner" style="position:absolute">
    83. <a href="[COLOR='Red']http://www.xxx.de/[/COLOR]"
    84. target="_blank"
    85. onclick="unsichtbar('banner');"
    86. ><img src="[COLOR='Red']./notepad.gif[/COLOR]" border="0" /></a>
    87. </div>
    88. <table width="1500" height="1500">
    89. <tr><td>[COLOR='SeaGreen']...Platzhalter...[/COLOR]</td></tr>
    90. </table>
    91. </body>
    92. </html>
    Alles anzeigen


    Statt "BANNER RECHTS OBEN" (grün) kannst du einen anderen Titel einfügen.
    Wenn du den Notizblock nicht als Link haben möchtest lösche den Tag

    Quellcode

    1. <a href="http://www.xxx.de/"
    2. target="_blank"
    3. onclick="unsichtbar('banner');"
    4. >
    und nach

    Quellcode

    1. <img src="./notepad.gif" border="0" />
    das

    Quellcode

    1. </a>
    .
    Der grüne "...Platzhalter..." steht für deinen Text und die notepad.gif für deine Grafik.


    MfG

    floh2
  • Floh2 schrieb:

    Den Notitzblock würde ich als Grafik machen.
    Durch die Variable x kannst du das Bild ausrichten!....



    Cool, vielen Dank. Werde es heute Abend ausprobieren, muss jetzt leider weg !

    EDIT:

    Also entweder mache ich was falsch, oder es ist hier völlig unnötig, JS zu verwenden. Denn das Ding lässt sich weder verschieben noch schließen !?? Was mache ich falsch? Ist jetzt einfach nur ne Grafik.... als Link !?
  • yannikst schrieb:


    Möglichst soll dieser Zettel "schließbar" sein und mit wandern, wenn man nach unten scrollt !?


    Für das Schließbare ist mir keine richtige Lösung eingefallen (vielleicht könnte man das auch in einem iframe realisieren).


    Das Bild wandert auch mit wenn du nach unten scrollst...bei mir zumindest (hatte heute noch nicht so viel Zeit um es auch auf IE, Opera und Safari zu testen).

    Die einfachste Lösung glaube ich wäre ein "Mouseover". Wenn man also über die Grafik fährt, "offnet" sich der Zettel, wenn man wieder weg geht, "schließt" er sich wieder.

    Wie gesagt, der Link muss nicht sein - nur wenn du z.B. auf eine Seite, auf der du die Bekanntmachung näher beschreibst...

    floh2
  • Ich habe deine Lösung jetzt kombiniert. Ein Skript fürs Schließen habe ich gefunden. Leider funzt das Verschieben nicht.... Aber vielleicht finde ich das noch.... Blöd ist halt nur, wenn einer JS DEaktiviert hat, kann er das Ding net schließen...
  • Mein Skript funktioniert bei mir auf

    Firefox 3 Beta 5
    Internet Explorer 8 Beta1
    Internet Explorer 7 emulated
    Opera 9
    Safari 3

    Ka warum das nicht funzt...mach mal einen neue HTML Datei und füge das Scipt oben ein.
    In das selbe Verzeichnis legst du das Bild (vom Notizblock:D ) mit dem Namen notepad.gif (oder ändere das beim Code).
    Öffne die HTML Datei (am besten nicht mit dem IE) und scrolle nach unten.
    Und - tattaaa das Bild scrollt mit.

    yannikst schrieb:

    Blöd ist halt nur, wenn einer JS DEaktiviert hat, kann er das Ding net schließen...
    Kommt das ding überhaupst wenn man JS deaktiviert??
  • Also ich habs jetzt wie folgt realisiert. Aber eines ist komisch. Im IE 7 kommt Script Fehler unten in der Leiste und man kann nicht mit der Scrollleiste scrollen !? Außer, wenn man den Zettel "schließt" !??

    Was stimmt in dem Code nicht, bzw. wie kann man wieder scrollen?

    Quellcode

    1. <script language="JavaScript1.2">
    2. var ns4=document.layers
    3. var ie4=document.all
    4. var ns6=document.getElementById&&!document.all
    5. //drag drop function for NS 4////
    6. /////////////////////////////////
    7. var dragswitch=0
    8. var nsx
    9. var nsy
    10. var nstemp
    11. function drag_dropns(name){
    12. if (!ns4)
    13. return
    14. temp=eval(name)
    15. temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
    16. temp.onmousedown=gons
    17. temp.onmousemove=dragns
    18. temp.onmouseup=stopns
    19. }
    20. function gons(e){
    21. temp.captureEvents(Event.MOUSEMOVE)
    22. nsx=e.x
    23. nsy=e.y
    24. }
    25. function dragns(e){
    26. if (dragswitch==1){
    27. temp.moveBy(e.x-nsx,e.y-nsy)
    28. return false
    29. }
    30. }
    31. function stopns(){
    32. temp.releaseEvents(Event.MOUSEMOVE)
    33. }
    34. //drag drop function for ie4+ and NS6////
    35. /////////////////////////////////
    36. function drag_drop(e){
    37. if (ie4&&dragapproved){
    38. crossobj.style.left=tempx+event.clientX-offsetx
    39. crossobj.style.top=tempy+event.clientY-offsety
    40. return false
    41. }
    42. else if (ns6&&dragapproved){
    43. crossobj.style.left=tempx+e.clientX-offsetx
    44. crossobj.style.top=tempy+e.clientY-offsety
    45. return false
    46. }
    47. }
    48. function initializedrag(e){
    49. crossobj=ns6? document.getElementById("showimage") : document.all.showimage
    50. var firedobj=ns6? e.target : event.srcElement
    51. var topelement=ns6? "HTML" : "BODY"
    52. while (firedobj.tagName!=topelement&&firedobj.id!="dragbar"){
    53. firedobj=ns6? firedobj.parentNode : firedobj.parentElement
    54. }
    55. if (firedobj.id=="dragbar"){
    56. offsetx=ie4? event.clientX : e.clientX
    57. offsety=ie4? event.clientY : e.clientY
    58. tempx=parseInt(crossobj.style.left)
    59. tempy=parseInt(crossobj.style.top)
    60. dragapproved=true
    61. document.onmousemove=drag_drop
    62. }
    63. }
    64. document.onmousedown=initializedrag
    65. document.onmouseup=new Function("dragapproved=false")
    66. ////drag drop functions end here//////
    67. function hidebox(){
    68. if (ie4||ns6)
    69. crossobj.style.visibility="hidden"
    70. else if (ns4)
    71. document.showimage.visibility="hide"
    72. }
    73. </script>
    74. <div id="showimage" style="position:absolute; left: 705px; top: 3px;"><img src="zettel.gif" width="220" height="237" border="0" usemap="#Map" />
    75. <map name="Map" id="Map"><area shape="rect" coords="177,35,200,55" href="#" onClick="hidebox();return false" alt="Schließen" />
    76. <area shape="rect" coords="9,58,201,196" href="XXX.html" alt="Klicken Sie hier für alles Infos!" /></map></a></div>
    Alles anzeigen