Notifikationer

Markér alle som læst Log ud

encory Nybegynder

20. januar 2004 - 14:14 Der er 7 kommentarer og
1 løsning

Hint funktion med fade alá windows.

Hej Eksperter....
Er det muligt at lave en hintfunktion, der skaber en boks med en hinttekst alá windows indbyggede, når musen holdes over tekst, billeder eller inputfelter... Den skal kunne benytte css classes til at definere font og farve og border, og det ville være cool hvis den kunne fade op og ned.

fx:
function writeHint(itemIdName,hintText,styleClass){

}
writeHint(text,"Se dette hint","hints");
<div id="text">Se hint</div>

Synes godt om

mm12010 Nybegynder

20. januar 2004 - 14:28 #1

uden formatering:
<div id="text" title="dit hint">Se hint</div>

ellers kan du måske bruge overLib:
http://www.bosrup.com/web/overlib/

Synes godt om

encory Nybegynder

20. januar 2004 - 15:16 #2

Den første kender jeg men jeg ledte efter en javascript løsning.. Overlib så god ud men det er jo kæmpe stort.. kan det ikke klares med en enkelt "lille" funktion eller to

Synes godt om

mm12010 Nybegynder

20. januar 2004 - 16:35 #3

overLib er klart det bedste valg...

Synes godt om

grunken Nybegynder

20. januar 2004 - 17:12 #4

Et hurtigt forsøg :-), har ikke gjort det vilde ud af det da overlib styrer :-)

<html>
<head>
<style type="text/css">
.Standard
{
border:solid 1px #000000;
background:#FCFDC7;
position:absolute;
padding:2px;
width:100px;
}

.Blue
{
border:solid 1px #000000;
background:#6777B3;
position:absolute;
padding:2px;
width:100px;
}

.Green
{
border:solid 1px #000000;
background:#55BB88;
position:absolute;
padding:2px;
width:100px;
}

</style>

<script language="javascript" type="text/javascript">
ie = (document.all)?true:false;

function vislag(str,style,f)
{
e = document.getElementById('tip')
if(ie){
e.style.top = f.clientY + document.body.scrollTop + 20;
e.style.left = f.clientX + document.body.scrollLeft-2;}
else{
e.style.top = f.pageY+20;
e.style.left = f.pageX;
}
e.className = style;
e.innerHTML = str;
e.style.display = "inline";

}

function skjul()
{
e = document.getElementById('tip')
e.style.display = "none";
}
</script>
</head>

<body>
<div id="tip" style="display:none;"></div>
<a href="#" onmousemove="vislag('halleluja','Blue',event)" onmouseout="skjul('lag1');">Tester1</a><br/>
<a href="#" onmousemove="vislag('dette er en gnu','Standard',event);" onmouseout="skjul('lag2');">Tester2</a><br/>
<a href="#" onmousemove="vislag('dette er en anden gnu','Green',event);" onmouseout="skjul('lag2');">Tester3</a>
</body>
</html>

Synes godt om

encory Nybegynder

21. januar 2004 - 19:42 #5

Jo tak det var et godt forslag, og det virker... :o)
HVis du gider at smide et svar grunken....

Synes godt om

grunken Nybegynder

21. januar 2004 - 21:35 #6

okay, jeg havde faktisk osse helt overset at du gerne ville have lidt fade i den :o)

så her er der en lidt mere extended og fejlrettet version :-)

<html>
<head>
<script language="javascript" type="text/javascript">
var faderate = 5;
var fadetime = 30;

var ie = (document.all)?true:false;
var fadenum = 0;
var step = 0;
var hest

fades = new Array();
for (i=0;i<=100;i+=faderate){
if(ie){fades[fadenum] = i;}
else{fades[fadenum] = i/100;}
fadenum++
}

function fade(elm) {
clearTimeout(hest);
if(ie){document.getElementById(elm).filters.alpha.opacity = fades[step];}
else{document.getElementById(elm).style.MozOpacity = fades[step];}
if(++step < fades.length)
hest=setTimeout("fade('" + elm + "');", fadetime);
else
step=0;
}

function vislag(str,style,f){
e = document.getElementById('tip')
if(ie){
e.style.top = f.clientY + document.body.scrollTop + 20;
e.style.left = f.clientX + document.body.scrollLeft-2;}
else{
e.style.top = f.pageY+20;
e.style.left = f.pageX;}
vis = (e.style.display=='none')?true:false
if(vis){
e.className = style;
e.innerHTML = str;
e.style.display = "inline";
fade(e.id);}
}

function skjul()
{
document.getElementById('tip').style.display = "none";
}
</script>

<style type="text/css">
.Standard
{
border:solid 1px #000000;
background:#FCFDC7;
position:absolute;
padding:2px;
width:100px;
}

.Blue
{
border:solid 1px #000000;
background:#6777B3;
position:absolute;
padding:2px;
width:100px;
}

.Green
{
border:solid 1px #000000;
background:#55BB88;
position:absolute;
padding:2px;
width:100px;
}
</style>
</head>

<body>
<div id="tip" style="display:none;filter:alpha(opacity=0);-moz-opacity:0;"></div>
<a href="#" onmousemove="vislag('halleluja','Blue',event)" onmouseout="skjul();">Tester1</a><br/>
<a href="#" onmousemove="vislag('dette er en gnu','Standard',event);" onmouseout="skjul();">Tester2</a><br/>
<a href="#" onmousemove="vislag('dette er en anden gnu','Green',event);" onmouseout="skjul();">Tester3</a>
</body>
</html>

og et svar smidt!

Synes godt om

encory Nybegynder

21. januar 2004 - 22:05 #7

Den er i vinkel.. tak

Synes godt om

grunken Nybegynder

22. januar 2004 - 00:55 #8

velbekomme :o)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS