✔ [Suche]Script um Seitenbereiche abzudunkeln

M

_mArc_

Grünschnabel
Hallo liebe tutorials.de User!

Die Überschrift erklärt eigentlich alles.
Ich suche ein Script um bestimmte Seitenbereiche abzudunkeln. Zudem sollen dann nur noch diese aktiv sein. Bei mir wäre das mein Headerbereich, der aktiv bleiben soll.
 
Ich verstehe nur Bahnhof.

Du willst einen bestimmten Bereich der Seite abdunkeln. Soll der dann schwarz eingefärbt/übermalt werden?

Was verstehst du unter "aktiv sein" und was ist bei dir der Headerbereich "< head > </ head >" oder einfach der "oberen Bereich" der Seite?

Also so erklärend finde ich die Überschrift nicht.
 
Er meint wohl eine Art Overlay wie bei z.B. Aeh... diesen ganzen "Öffne ein Bild mit einer nervtötend langen Animation in der Mitte des Browsers und dunkle den Rest drumherum ab"-Dingern (Mir fällt tatsächlich gerade kein einziger Name ein... Mach das meißt selbst.)

Eigentlich musst du hier nur für jedes abzudunkelnde Element einen Container erstellen, diesen über dem eigentlichen Element positionieren, Höhe und Breite anpassen und du bist fast fertig...

Liese sich ja in etwa so umsetzen:
Javascript: 
function dunkleAb(){
  for(var i = 0, n = arguments.length; i < n; i++){
    var arg = document.getElementById(arguments[i]);
    var container = document.createElement("div");
    container.style.position = "absolute";
    var size = getSize(arg);
    container.style.width = size.width;
    container.style.height = size.height;
    container.style.top = size.top;
    container.style.left = size.left;
    container.style.background = "#000";
    container.style.opacity = 0.5;
  	container.style.filter = 'alpha(opacity=50)';

    document.body.appendChild(container);
  }
}

function getSize(obj){  
  var x=0;
  var y=0;
  var width = obj.offsetWidth;
  var height = obj.offsetHeight;
    
  while(obj){
    x = x + obj.offsetLeft;
    y = y + obj.offsetTop;
    if(obj.tagName.toLowerCase() != 'html'){
      obj = obj.parentNode;
    } else {
      obj = false;
    }
  }
  return {height: height,  width: width, top: y, left: x};
}

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <script type="text/javascript" src="script.js"></script>
  <title></title>
  </head>
  <body>
    <div id='header' style="height: 200px; background: #f00">&nbsp;</div>
    <div id='body' style="height: 500px; background: #0f0"><a href='google.de'>Klick</a></div>
    <div id='footer' style="height: 100px; background: #00f">&nbsp;</div>
    <div onclick='dunkleAb("body","footer");'>Klick</div>
  </body>
</html>

Edit: nur sehr minimalistisch im IE getestet.
Edit2: Oh man, lass Hirn regnen... getSize() überarbeitet.
 
Zuletzt bearbeitet von einem Moderator:
Back2toxic hat gesagt.:
Er meint wohl eine Art Overlay wie bei z.B. Aeh... diesen ganzen "Öffne ein Bild mit einer nervtötend langen Animation in der Mitte des Browsers und dunkle den Rest drumherum ab"-Dingern (Mir fällt tatsächlich gerade kein einziger Name ein... Mach das meißt selbst.)

Eigentlich musst du hier nur für jedes abzudunkelnde Element einen Container erstellen, diesen über dem eigentlichen Element positionieren, Höhe und Breite anpassen und du bist fast fertig...

Liese sich ja in etwa so umsetzen:
Javascript: 
function dunkleAb(){
  for(var i = 0, n = arguments.length; i < n; i++){
    var arg = document.getElementById(arguments[i]);
    var container = document.createElement("div");
    container.style.position = "absolute";
    var size = getSize(arg);
    container.style.width = size.width;
    container.style.height = size.height;
    container.style.top = size.top;
    container.style.left = size.left;
    container.style.background = "#000";
    container.style.opacity = 0.5;
  	container.style.filter = 'alpha(opacity=50)';

    document.body.appendChild(container);
  }
}

function getSize(obj){  
  var x=0;
  var y=0;
  var width = obj.offsetWidth;
  var height = obj.offsetHeight;
    
  while(obj){
    x = x + obj.offsetLeft;
    y = y + obj.offsetTop;
    if(obj.tagName.toLowerCase() != 'html'){
      obj = obj.parentNode;
    } else {
      obj = false;
    }
  }
  return {height: height,  width: width, top: y, left: x};
}

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <script type="text/javascript" src="script.js"></script>
  <title></title>
  </head>
  <body>
    <div id='header' style="height: 200px; background: #f00">&nbsp;</div>
    <div id='body' style="height: 500px; background: #0f0"><a href='google.de'>Klick</a></div>
    <div id='footer' style="height: 100px; background: #00f">&nbsp;</div>
    <div onclick='dunkleAb("body","footer");'>Klick</div>
  </body>
</html>

Edit: nur sehr minimalistisch im IE getestet.
Edit2: Oh man, lass Hirn regnen... getSize() überarbeitet.
Zum Vergrößern anklicken....

Ja so in der art meinte ich das!
So wie eine jquery thickbox bloß halt in meinem Header Bereich (ich meint damit nicht den html <head> Bereich, sondern, dass ich alles außer einen kleinen Bereich oben auf meiner Seite abdunkeln und inaktiv, also nicht anklickbar machen mächte. Abdunkeln=leichte Transparenz oder einen transparenten schwarzen Bereich darüber^)

Vielen Dank Back2toxic für deine Idee =) Werde es gleich mal weiter ausbauen und verwenden =)
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück