Jeg har lavet et eksempel, med noget mere kode..
* Position: Jeg har brugt style + position:absolute til at placere tekst på bestemte koordinater
Hvis du ikke vil placere flere tekster, på flere positioner:
- slet: style="..."
* Koden reducerer tekst-størrelsen, fra 50 og til start-størrelsen, ved onMouseOut.
Hvis du ikke vil have den handling:
- slet: function sizeDown()
- slet: onMouseOut="obj=this;sizeDown();"
Koden:
<!-- HUSK AT INDSÆTTE DOCTYPE! -->
<html>
<head>
<title>INDSÆT TITLEN HER</title>
<style type="text/css">
html,body
{
height:100%; /* sæt højden til 100% */
/* fjern "luften" rundt om elementerne: */
margin:0px;
padding:0px;
}
body
{
font-size:14px; /* font-størrelsen sættes i CSS */
}
</style>
<script type="text/javascript">
start_stoerrelse = 14; // skal være den samme som font-size i CSS
slut_stoerrelse = 50; // slut-størrelsen på fonten
s = 0; // tæller
obj = null; // objekt-pladsholder
old_obj = null;
function sizeUp()
{
/* find ud af hvor stor fonten er nu */
t = "" + obj.style.fontSize + start_stoerrelse + "px";
t = t.substring(0, t.indexOf("px"));
s = parseInt(t); // konverter strengen til et tal, så vi kan regne med værdien
if (s < slut_stoerrelse) // check om font-størrelsen er maximum = slut
{
// det er den ikke
s++; // sæt størrelsen op med 1
obj.style.fontSize = s + "px"; // skift størrelsen på teksten
setTimeout("sizeUp()", 10); // funktionen kalder sig selv hvert 10. ms
}
}
function sizeDown()
{
/* find ud af hvor stor fonten er nu */
t = "" + obj.style.fontSize + slut_stoerrelse + "px";
t = t.substring(0, t.indexOf("px"));
s = parseInt(t); // konverter strengen til et tal, så vi kan regne med værdien
if (s >= start_stoerrelse) // check om font-størrelsen er minimum = start
{
// det er den ikke
s--; // sæt størrelsen ned med 1
obj.style.fontSize = s + "px"; // skift størrelsen på teksten
setTimeout("sizeDown()", 10); // funktionen kalder sig selv hvert 10. milisekund
}
}
document.onmouseout=sizeDown; // reducer størrelse, så snart musen hover på dokumentet
</script>
</head>
<body>
<div onMouseOver="obj=this;sizeUp();" onMouseOut="obj=this;sizeDown();" style="position:absolute;top:10px;left:10px">test</div>
<div onMouseOver="obj=this;sizeUp();" onMouseOut="obj=this;sizeDown();" style="position:absolute;top:200px;left:200px">endnu en test</div>
</body>
</html>
- Svar.
Ny bruger
Nybegynder
Opret
Preview
