Linie zur Lesehilfe
Dieses kleine JavaScript erstellt eine horizontale Linie, welche den Cursor verfolgt, und soll zur Lesehilfe dienen.
function lineInit() {
var hr = document.createElement("hr");
document.getElementsByTagName("body")[0].appendChild(hr);
hr.style.height = "1px";
hr.style.border = "none";
hr.style.borderTop = "1px solid green"; // Dicke und Farbe der Linie kann man hier modifizieren
hr.style.position = (navigator.userAgent.indexOf("MSIE") > -1 && navigator.userAgent.indexOf("Opera") == -1) ? "absolute" : "fixed";
hr.style.zIndex = "99";
hr.style.margin = "0";
hr.style.width = "100%";
hr.style.top = "-1px";
hr.style.left = "0";
hr.id = "line";
document.onmousemove = lineMove;
}
function lineMove(e) {
var y = 0;
if(!e) e = window.event;
if(navigator.userAgent.indexOf("MSIE") == -1 || navigator.userAgent.indexOf("Opera") > -1)
y = (navigator.userAgent.indexOf("KHTML") > -1) ? e.clientY-window.pageYOffset : e.clientY;
else if(navigator.userAgent.indexOf("MSIE") > -1)
y = e.y+document.body.scrollTop;
y+=10;
document.getElementById("line").style.top = y+"px";
}
window.onload = lineInit;
Das Script erstellt beim Laden der Seite ein hr-Element diese in die Seite ein. Danach wird das Aussehen der Linie bestimmt. Grundlegend dabei ist hr.style.borderTop indem die Farbe, Dicke und der Typ der Linie definiert wird. Nun wird noch angegeben, dass bei einer Bewegung der Maus innerhalb des Dokumentes, die Funktion lineMove() aufgerufen wird. Diese lokalisiert die Y-Koordinate der Maus und positioniert die Linie entsprechend dieser Koordinate. Die Lokalisierung ist etwas kompliziert, da einige Browser andere Methoden dazu haben.
Hier kann man noch eine Demo sehen.
Koka
Könnte man so etwas auch noch vertikal machen? Wie eine Art Fadenkreuz?
pberndt
Für eine vertikale Linie gibt es in HTML kein Element. Allenfalls kannst du ein DIV erzeugen, das du fixed positionierst und dem du einen Border verpasst. Mehr fällt mir dazu momentan nicht ein :)
k0pFnuSs
Hallo.. ich habe eine frage kann man diese linie per mausklick ein und ausschalten also dass wenn ich klicke Lesehilfe ein/ausschalten das sie kommt und wieder geht wie geht das?
pberndt
Natürlich - z.B. über das onclick Ereignis. Näheres dazu findest du bei Google :) Einfach nach "onclick visibile" o.Ä. suchen.
Duke Nukem
Hi, super Script. Kannst du mir bitte den "onclick" befehl posten? Ich will das teil per hyperlink aktivieren bzw. deaktivieren können.
curi
<script type="text/javascript">
function showLine() {
_link = document.getElementById('linelink');
_line = document.getElementById('line');
_link.onclick = function() {
lineStyle = _line.style.display;
if(lineStyle == 'block')
lineStyle = 'none';
else if(lineStyle == 'none';
lineStyle = 'block';
else
lineStyle = 'block/none'; //Wenn du die Linie mit CSS gleich versteckst, dann trage hier block ein, ansonten none
}
}
window.onload = showLine;
</script>
<a href="#" id="linelink">Linie de/aktivieren</a>
<hr id="line" />
Achtung, nicht getestet