Aki Shiroiyama: footer face

SELF-Forum

footer face

Aki Shiroiyama
– Informationen zu den Bewertungsregeln

Liebe Self-HTML-Community,

derzeit experimentiere ich an einer Website und bin auf einen interessanten Effekt gestoßen, nämlich der, dass trotz des Scrollens in der unteren linken Ecke permanent ein Bild eingeblendet ist, eingebettet durch javascript. Um sich eine Vorstellung daraus zu machen bitte ich darum die Seite zu besuchen: http://www.anime-manga-project.de/index.php?module=anime
Nun meine Frage, trotz Analyse des Quelltextes war ich nicht in der Lage dieses Effekt bei meinem Experiment zu erzielen, deshalb, wie programmiere ich das? Gibt es dafür einen bestimmten Befehl im HTML z.B.

unction RefreshOnlineList()

function CE() {  
	document.getElementById("footer\_face").src = "vincent.png";  
	document.getElementById("footer\_face").style.display="inline";  
	window.setTimeout("EC()",100);  
}  

function EC() {  
	document.getElementById("footer\_face").src = "vincent.png";  
	window.setTimeout("OE()",100);  
}  

function OE() {  
	document.getElementById("footer\_face").style.display="none";  
	window.setTimeout("CE()",10000);  
}

</script>

Und wie müsste die dazugehörige Jscript File aussehen? Kann mir jemand helfen?

Vielen Dank, in Hoffnung

Aki Shiroiyama

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. footer face

    fer
    – Informationen zu den Bewertungsregeln

    dafuer brauch man nix schreiben kannst du doch ueber css machen

    <img src="test.jpg" style="position:absolute;bottom:0px;right:0px;z-index:50;" alt="bild" />

    schoenen abend noch.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. footer face

      Aki Shiroiyama
      – Informationen zu den Bewertungsregeln

      Ist das Testbild dann auch allen anderen Ebenen übergeordnet? So wie in dem Beispiel?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. footer face

        fer
        – Informationen zu den Bewertungsregeln

        Du musst das bild direkt nach dem "<body>" reinpacken
        am besten kein uebergeordnetes element dann sollte es eig unten bleiben.

        .

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. footer face

          Aki Shiroiyama
          – Informationen zu den Bewertungsregeln

          Ich fände es schön, wenn das Bild Ebnentechnisch betrachtet über allem anderen liegen würde, ergo auch, wenn ich in den BODY eine *.swf integriere und nach wie vor bewegt sich das Bild mit dem Scrollen mit. Ich habe gehofft, dass mir jemand aus dem QUelltext der Seite zeigen könnte, welche stellen prägnant für diesen Effekt sind und welche jscript-Datei sich dahinter mit welchem Befehl verbirgt.

          Auszug aus dem Original Quelltext:

          <html>
          <head>

          <meta http-equiv="content-style-type" content="text/css" />

          <meta http-equiv="imagetoolbar" content="no" />

          <meta name="gg.pagerank" content="7" />
          <meta name="gg.position" content="first-page" />
          <meta name="gg.show-translate" content="yes" />
          <meta name="gg.show-similar" content="yes" />
          <meta name="gg.show-url" content="yes" />
          <meta name="pagerank" content="7" />

          <title>TEST</title>

          <style type="text/css">
          #footer {
          height:160px;
          width:114px;
          position:fixed;
          bottom:0px;
          right:0px;
          z-index:10; /* Prevent certain problems with form controls */
          }

          #footer_face {
          height:45px;
          width:70px;
          position:fixed;
          bottom:85px;
          right:29px;
          z-index:11; /* Prevent certain problems with form controls */
          }

          #footer_bubble {
          height:117px;
          width:195px;
          position:fixed;
          bottom:45px;
          right:100px;
          z-index:12; /* Prevent certain problems with form controls */
          }
          </style>

          <script type="text/javascript" src="./styles/prosilver/theme/jquery-1.3.2.js"></script>
          <script type="text/javascript">
          $j = jQuery.noConflict();

          $j(document).ready(function(){
          $j("#status").click(function () {
          $j("#hide_status").toggle("slow");
          });
          });

          $j(document).ready(function(){
          $j("#newstatus").submit(function() {
          var status_text    = $j('#status_text').attr('value');
          $j("#newstatus").empty().html('<img src="./styles/prosilver/theme/images/loader.gif" alt="loading" />');
          $j.ajax({
          type: "POST",
          url: "./status.php?user=1",
          data: "status_text="+ status_text,
          success: function(del){
          $j('#newstatus').hide();
          $j('div.success').fadeIn();

          		}  
	});  
return false;  
});

          });
          </script>
          <script type="text/javascript" src="/js/prototype.js"></script>
          <script type="text/javascript" src="/js/effects.js"></script>
          <script type="text/javascript" src="/js/builder.js"></script>
          <script type="text/javascript" src="/js/dragdrop.js"></script>
          <script type="text/javascript" src="/js/portal.js"></script>
          <script type="text/javascript" src="/js/gallery_lytebox.js"></script>

          <script type="text/javascript">
          // <![CDATA[
          var jump_page = 'Gib die Nummer der Seite an, zu der du gehen möchtest.:';
          var on_page = '1';
          var per_page = '';
          var base_url = '';
          var style_cookie = 'phpBBstyle';
          var style_cookie_settings = '; path=/; domain=.anime-manga-project.de';
          var onload_functions = new Array();
          var onunload_functions = new Array();

          		if (0)  
	{  
		//var url = './ucp.php?i=pm&amp;mode=popup';  
		//window.open(url.replace(/&amp;/g, '&'), '\_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');  
		var answer = confirm("")  
		if (answer)  
		{  
			window.location = "./ucp.php?i=pm&amp;folder=inbox";  
		}  
	}  
  
/\*\*  
\* Find a member  
\*/  
function find\_username(url)  
{  
	popup(url, 760, 570, '\_usersearch');  
	return false;  
}  

/\*\*  
\* New function for handling multiple calls to window.onload and window.unload by pentapenguin  
\*/  
window.onload = function()  
{  
	for (var i = 0; i < onload\_functions.length; i++)  
	{  
		eval(onload\_functions[i]);  
	}  
}  

window.onunload = function()  
{  
	for (var i = 0; i < onunload\_functions.length; i++)  
	{  
		eval(onunload\_functions[i]);  
	}  
}  

function function\_exists(function\_name)  
{  
	if (typeof function\_name == 'string')  
	{  
		return (typeof window[function\_name] == 'function');  
	}  
	else  
	{  
		return (function\_name instanceof Function);  
	}  
}

          // ]]>
          </script>
          <script type="text/javascript" src="./styles/prosilver/template/styleswitcher.js"></script>
          <script type="text/javascript" src="./styles/prosilver/template/forum_fn.js"></script>
          <script type="text/javascript" src="/js/YT_aprilfool.js"></script>

          <link href="./styles/prosilver/theme/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
          <link href="./style.php?sid=660f2953b481549eca5c0b5b462d603f&id=1&lang=de" rel="stylesheet" type="text/css" media="screen, projection" />

          <link href="./styles/prosilver/theme/normal.css" rel="stylesheet" type="text/css" title="A" />
          <link href="./styles/prosilver/theme/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
          <link href="./styles/prosilver/theme/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

          <script type="text/javascript" >
          if (window.addEventListener) {
          window.addEventListener("load",initLytebox,false);
          } else if (window.attachEvent) {
          window.attachEvent("onload",initLytebox);
          } else {
          window.onload = function() {initLytebox();}
          }
          function initLytebox() {
          var imgMaxWidth = 1280;
          var imgWarning = '';
          myLytebox = new LyteBox(imgMaxWidth, imgWarning);
          }
          </script>

          <script type="text/javascript" charset="UTF-8">
          /* <![CDATA[ */
          try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };
          xajax.config.requestURI = "index.server.php";
          xajax.config.statusMessages = false;
          xajax.config.waitCursor = true;
          xajax.config.version = "xajax 0.5";
          xajax.config.legacy = false;
          xajax.config.defaultMode = "asynchronous";
          xajax.config.defaultMethod = "POST";
          /* ]]> */
          </script>
          <script type="text/javascript" src="./js/xajax_core.js" charset="UTF-8"></script>
          <script type="text/javascript" charset="UTF-8">
          /* <![CDATA[ */
          window.setTimeout(
           function() {
            var scriptExists = false;
            try { if (xajax.isLoaded) scriptExists = true; }
            catch (e) {}
            if (!scriptExists) {
             alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: ./js/xajax_core.js");
            }
           }, 2000);
          /* ]]> */
          </script>

          <script type='text/javascript' charset='UTF-8'>
          /* <![CDATA[ */
          xajax_ViewOnline = function() { return xajax.request( { xjxfun: 'ViewOnline' }, { parameters: arguments } ); };
          /* ]]> */
          </script>

          <script type="text/javascript">
          function RefreshOnlineList()
          {
          xajax_ViewOnline();
          window.setTimeout("RefreshOnlineList()", 20000);
          }

          if(function\_exists('xajax\_ViewOnline'))  
{  
	window.setTimeout("RefreshOnlineList()", 20000);  
}  

function RefreshSBox()  
{  
	xajax\_ShoutBox();  
	window.setTimeout("RefreshSBox()", 5000);  
}  

function RefreshNSW()  
{  
	xajax\_NSWAnime();  
	window.setTimeout("RefreshNSW()", 5000);  
}  

if(function\_exists('xajax\_ShoutBox'))  
{  
	window.setTimeout("RefreshSBox()", 5000);  
}  

if(function\_exists('xajax\_NSWAnime'))  
{  
	window.setTimeout("RefreshNSW()", 5000);  
}  


function CE() {  
	document.getElementById("footer\_face").src = "/images/luka\_ehc.png";  
	document.getElementById("footer\_face").style.display="inline";  
	window.setTimeout("EC()",100);  
}  

function EC() {  
	document.getElementById("footer\_face").src = "/images/luka\_ec.png";  
	window.setTimeout("OE()",100);  
}  

function OE() {  
	document.getElementById("footer\_face").style.display="none";  
	window.setTimeout("CE()",10000);  
}

          </script>

          </head>

          <body id="phpbb" class="section-index ltr">
          <img src="/images/luka.png" id="footer">
          <img src="/images/luka_ehc.png" id="footer_face" style="display:none">
          <img src="/images/luka_ec.png" style="display:none">

          <div id="page-footer">

          <div class="navbar">  
	<div class="inner"><span class="corners-top"><span></span></span>  
	<br />

          </body>
          </html>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. footer face

            fer
            – Informationen zu den Bewertungsregeln

            Soweit ich weiss sind flashs immer oberste ebene da geht nix drueber.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. footer face

              Aki Shiroiyama
              – Informationen zu den Bewertungsregeln

              Danke für eure Mühe, habe mir den Quelltext noch einmal durchgelesen und es jetzt hinbekommen, es war nicht javascript sondern css, nun habe ich denn Footer in der unteren rechten Ecke, die nicht mitscrollt und allen Ebenen überlegen ist. Ich wünsche einen schönen Abend. Ach so...hier jetzt der Quelltext:

              <HTML>
              <HEAD>
              <script type="text/javascript">
              function RefreshOnlineList()

              function CE() {  
	document.getElementById("footer\_face").src = "vincent.png";  
	document.getElementById("footer\_face").style.display="inline";  
	window.setTimeout("EC()",100);  
}  

function EC() {  
	document.getElementById("footer\_face").src = "vincent.png";  
	window.setTimeout("OE()",100);  
}  

function OE() {  
	document.getElementById("footer\_face").style.display="none";  
	window.setTimeout("CE()",10000);  
}

              </script>
              <TITLE>Björn Daniel Weissbergs "VINCENT"
              </TITLE>
              <style type="text/css">
              #footer {
              height:160px;
              width:114px;
              position:fixed;
              bottom:0px;
              right:0px;
              z-index:10; /* Prevent certain problems with form controls */
              }
              </style>
              </HEAD>
              <BODY bgcolor="#000000">
              <img src="vincent.png" id="footer">
              <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
               codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
               ID=konzept WIDTH=1024 HEIGHT=768>
               <PARAM NAME=movie VALUE="vincent.swf"><PARAM NAME=wmode VALUE=opaque><PARAM NAME=align VALUE=default><PARAM NAME=menu VALUE=false><PARAM NAME=quality VALUE=best><PARAM NAME=scale VALUE=noborder>
              <EMBED src= "vincent.swf"   menu=false quality=best wmode=opaque align=default scale=noborder WIDTH=1024 HEIGHT=768
               TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
              </OBJECT>

              </BODY>
              </HTML>

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

      2. footer face

        fer
        – Informationen zu den Bewertungsregeln

        Stimmt gerade mal getestet das bild scrollt mit seltsam..

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      3. footer face

        fer
        – Informationen zu den Bewertungsregeln

        so jetzt hab ich es

        du musst das bild nicht position:absolute;
        setzten sondern position:fixed;

        dann geht es also:

        <img src="sss.jpg" alt="" style="position:fixed;right:0px;bottom:0px;z-index:9999;" />

        Schoenen abend noch.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. footer face

      Aki Shiroiyama Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Das Problem ist, dass bei diesem Code:
      <img src="test.jpg" style="position:absolute;bottom:0px;right:0px;z-index:50;" alt="bild" />
      , dass Bild nicht in der unteren linken Ecke bleit, es wäre schön, wenn egal, was der User tut, das Testbild definitiv unten rechts bleibt und beim Scrollen auch genau unten rechts bleibt wie im Beispiel:
      http://www.anime-manga-project.de/index.php?module=anime

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. footer face

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Gibt es dafür einen bestimmten Befehl im HTML z.B.

    HTML hat keine Befehle. Auch CSS nicht.

    Fixierung am unteren Bildschirmrand ist jedoch möglich bei:
    selector { position:fixed; bottom:0px; }

    bottom bezieht sich in dem Falle auf den unteren Rand der content box des nächsten Parent, welches nicht vom typ position:static ist.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln