Linje som följer musen vertikalt

2 svar · 414 visningar · startad av TheMagnus 7 sep. 2006

TheMagnusMedlem sedan juli 2006461 inlägg

Frågan7 sep. 2006 14:18#1

Koden nedan fungerar kanon i IE, men eventen vill inte fungera så bra i Fx.
Går det att fixa så koden fungerar bra även i Fx?
Kan man göra så att linjen flyttas t.ex. 12px åt gången? Skulle vara snyggt att lägga linjen över en tabell, och då kunna läsa av raderna lite lättare. Ungefär som att använda sig av en linjal när man läser ett papper.

<html>
<head>
<script language="javascript" type="text/javascript">

function MouseMove(){
  what = document.getElementById('liner');
  what.style.top = event.y-10;
}

</script>
<style type="text/css">
.line {
  position: absolute;
  top: 0px;
  height: 1px;
  display: block;
  width: 95%;
}
</style>
</head>
<body onmousemove="MouseMove();">

<div id="liner" class="line">
  <hr size=1 width="65%" />
</div>

</body>
</html>

RamzeusMedlem sedan mars 200642 inlägg

11 sep. 2006 09:02#2

Prova detta:

<html>
<head>
<script language="javascript" type="text/javascript">

function MouseMove(event)
{
	if (!event)
		event = window.event; // Fixa eventet om det inte finns definerat
	var what = document.getElementById('liner'); // Hämta linjepekare
	var pos = parseInt(event.clientY); // Hämta musposition
	pos = parseInt(pos / 12) * 12; // Fixa så att linjen flyttas var 12:e pixel
	what.style.top = pos-10+'px'; // Sätt position
}
document.onmousemove = MouseMove;

</script>
<style type="text/css">
.line {
	position: absolute;
	top: 0px;
	height: 1px;
	display: block;
	width: 95%;
}
</style>
</head>
<body>

<div id="liner" class="line">
  <hr size="1" width="65%" />
</div>

</body>
</html>

Du kan också fundera på om du inte ska ha en onmouseover och onmouseout på tabellraden så att den byter bakgundsfärg istället för linjen.

TheMagnusMedlem sedan juli 2006461 inlägg

13 sep. 2006 08:33#3

Najs Ramzeus! :bire

Funderar på om man skulle försöka använda sig av detta på https://www.itmag.net/bevingat/ och https://www.itmag.net/latin/. Där har jag redan ändring av bakgrundsfärg också. Kan bli lite lurigt att räkna ut hur långt upp och hur långt ner linjen får visas, men det går kanske att begränsa så att linjen bara visas inom en viss div-tagg istället för att begränsa via javascriptet. Detta för att avståndet till botten är beroende på av hur många talesätt som listas upp.
Några idéer på hur man begränsar skriptet till en specifik div-tagg?