Hinweis anzeigen bei Text

**wahsaga** · 07.02.2003, 13:58

Re: Hinweis anzeigen bei Text

warum nicht einfach mit dem title-attribut? damit hast du exakt den selben effekt wie im internet explorer mit dem alt für bilder.

<span title="erklärung">text</span>

**TBT** · 07.02.2003, 14:19

passiert nichts, leider

**wahsaga** · 07.02.2003, 14:27

Original geschrieben von TBT
passiert nichts, leider

in welchem browser hast du das getestet?

ich hab gerade nur den ie5.0 zur hand, aber der macht es so wie gewünscht...

**TBT** · 07.02.2003, 14:34

IE6 mit Crazy Browser 1.0.5 drüber

**MoRtAlAn** · 07.02.2003, 14:40

Das hier packst du alles in eine JS-Datei

PHP-Code:


<?php

<!--

titel1="Hier der Titel";

text1="Hier dein Text";



Xoffset= -10;                    /* Entfernung vom Mauszeiger auf der X Achse */ 

Yoffset= 20;                /* Entfernung vom Mauszeiger auf der Y Achse */ 

var pnew,tool,

iex=(document.all),popup=-1000;                

if(navigator.appName=="Netscape") {        /* check Browser */ 

    (document.layers)?pnew=true:tool=true;

}



if (!tool) {                /* bei Mousberührung Style aufnehmen */ 

    var kh=(pnew)?document.css:css.style;

if (pnew)document.captureEvents(Event.MOUSEMOVE);

    document.onmousemove=mouse;

}

function zeige(titel,text){            /* Tooltipp Style */ 

    /*var content="<table bgcolor=#426399 width=200 border=1 cellpadding=2 cellspacing=2><td><img src=tooltipplogo.gif border=0><font face='Arial' size=2 color=white><b> Hinweis</b><br>"+tooltipp+"</font></td></table>";

*/

content = "<TABLE WIDTH=400 BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\"#c0c0c0\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0><TR><TD><B><FONT face=\"Verdana, Arial, Helvetica\" size=-1 color=\"#cc3300\">"+titel+"</FONT></B></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=5 CELLSPACING=0 BGCOLOR=\"#fef9e2\"><TR><TD><FONT face=\"Verdana, Arial, Helvetica\" COLOR=\"#000000\" size=-2>"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"



if(tool){

    return;

    }else{

    popup=Yoffset;

if(pnew){                /* zeige/verberge Tooltip */ 

    kh.document.write(content);

    kh.document.close();

    kh.visibility="visible"}

if(iex){                        

    document.all("css").innerHTML=content;

    kh.visibility="visible"

    }

    }

}

function mouse(e){            /* überwachen der Mouse auf den Achsen*/ 

    var x=(pnew)?e.pageX:event.x+document.body.scrollLeft;

    kh.left=x+Xoffset;

    var y=(pnew)?e.pageY:event.y+document.body.scrollTop;

    kh.top=y+popup;

}

function verberge(){            /* Schliessfunktion */ 

if(!tool){

    popup=-1000;

    kh.visibility="hidden";

    }

}

// -->

?>

der Aufruf erfolgt so:
<a href="#" onmouseover="zeige(titel1,text1)" onmouseout="verberge()">Dein Text</a>

Ist nur noch ein Fehler drin, den ich noch beseitigen muß bei Gelegenheit!
Fehler: wenn du einen Text hast anzeigenlassen (mouseover) geh mal mit deinem zeiger auf die Rechte seite, dann erscheint unten der Scrollbalken.

gruss

**wahsaga** · 07.02.2003, 14:40

na der ie6 sollte es erst recht beherrschen...
hast du denn auch lange genug gewartet, du weist ja, das der alt-text bei bildern auch erst mit ein paar sekunden verzögerung erscheint...

**TBT** · 07.02.2003, 14:58

@Mortalan:

ich glaub ich raff das nicht.

habe jetzt deinen Code so eingebunden, und bekomme beim aufruf der Seite ein

Zeile 14: css ist undefiniert

wenn ich dann den mouseover auslöse ein

Zeile 31: document.all(...) ist NULL oder kein Objekt
Zeile 45: kh ist NULL oder kein Objekt

PS: ich habe keine Ahnung von JS, bekomme gerade mal ein window.status hin

**MoRtAlAn** · 07.02.2003, 15:04

sorry, hab was vergessen

das hier noch rein (head):
<STYLE>
.css { position: absolute; visibility: hidden; z-index: 100 }
</STYLE>

und das in den body:
<DIV ID="css" CLASS="css"></DIV>

wenns jetzt immer noch nicht geht, sag nochmal bescheid, dann bau ich ein beispielskript

gruss

**TBT** · 07.02.2003, 15:13

habs jetzt so

Code:

<head>
	<title>[boardname] - [sitetitle]</title>
	<meta http-equiv="content-type" content="[lang.site_code]">
	<meta name="robots" CONTENT="index,follow">
	<meta name="Author" CONTENT="TBT">
	<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)"> 
	<meta http-equiv="cache-control" content="no-cache">
	<link rel="SHORTCUT ICON" href="favicon.ico">
	<link rel="stylesheet" href="[css].css">
	<STYLE>
		.css { position: absolute; visibility: hidden; z-index: 100 }
	</STYLE>
	<script language="JavaScript" src="script.js" type="text/javascript"></script>			
	<script language="JavaScript" src="script2.js" type="text/javascript"></script>	
</head>

das script2.js ist der Code von dir.

bekomme beim öffnen der Seite immernoch

Zeile 14: css ist undefiniert

und beim mouseover jetzt

Zeile 32: kh ist NULL oder kein Objekt
Zeile 45: kh ist NULL oder kein Objekt

**MoRtAlAn** · 07.02.2003, 15:20

das Skript darf erst nach dem div includet werden, also so:

<body>
<DIV ID="css" CLASS="css"></DIV>
<script language="JavaScript" src="script2.js" type="text/javascript"></script>

dann sollte es gehen

gruss

**TBT** · 07.02.2003, 15:27

1A - danke so funktionierts, sieht gut aus

**MoRtAlAn** · 07.02.2003, 15:28

mußt du halt nur noch farblich anpassen... und sobald ich den Fehler noch weghab, poste ichs nochmal hier rein...

**TBT** · 07.02.2003, 15:39

du ermittelst doch die Mauspostition, also wenn die Maus an den rechten Bildschirmrand kommen die Tablle immer schmaler machen ?

Könnte das gehen?

**TBT** · 07.02.2003, 15:43

so, hab zwar keine Ahnung von JS, kann aber Codeschnipsel verwenden

bau mal die verberge Function so um, dann kommt der Scrollbalken nicht mehr

PHP-Code:


function verberge(){                        /* Schliessfunktion */ 

    if(!tool){

        popup=-1000;

        kh.visibility="hidden";

        if(pnew){                            /* zeige/verberge Tooltip */ 

            kh.document.write("");

            kh.document.close();

        }

        if(iex){                        

            document.all("css").innerHTML="";

        }

    }

}

Hinweis anzeigen bei Text