Info-Ebene

R

Rohr

Grünschnabel
Hallo

Sorry, mit der Suche habe ich nur ähnliches gefunden, nicht das, was ich will.

Ganz kurz, ich will sowas wie hier. Wenn man z. B. auf Valvetronic oder Allradantrieb klickt, dass dann so eine Ebene eingeblendet wird.

Wie geht das? Ist da die Position der Ebene nicht festgelegt? Klickt man auf das 'c' bei Valvetronic, erscheint die Ebene rechts, bei "V" etwas weiter links.
Und der Alphawert?

Danke
 
Yeah, du hasts auch drauf!

Ein bisschen in den Quelltext geschaut und du kannst dir folgendes Beispiel zu-
sammen basteln:
PHP: 
<html>
<head>
<script type="text/javascript">
var agt = navigator.userAgent.toLowerCase();
var dom = (document.getElementById) ? true : false;
var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ns4 = (document.layers && !dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
var is_win  = ((agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1)) ? true : false;

// NS4 resize fix
var origWidth, origHeight;
if (ns4) {
	origWidth = window.innerWidth; origHeight = window.innerHeight;
	window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

if (nodyn) event = "";

// Einstellungen:
var tagFollowMouse	= false; 	// Soll der Tag den Mausbewegungen folgen?
var tagWidth 		= 240;
var offX			= 5;		// Distanz von Mausposition
var offY			= 5; 
var tagFontFamily 	= "Verdana, Arial, Helvetica, Sans-Serif";
var tagFontSize		= "11px";
var tagFontColor	= "#000000";
var tagBgColor 		= "#ddecff";
var tagBorderColor 	= "#000000";
var tagBorderWidth 	= 1;
var tagBorderStyle 	= "solid";
var tagPadding		= 4;

var infotag, tagcss;
function initTag() {
	if (nodyn) return;
	infotag = (ns4)? document.tagDiv.document: (ie4)? document.all['tagDiv']: (ie5||ns5)? document.getElementById('tagDiv'): null;
	tagcss = (ns4)? document.tagDiv: infotag.style;
	if (ie4||ie5||ns5) {
		tagcss.width = tagWidth+"px";
		tagcss.fontFamily = tagFontFamily;
		tagcss.fontSize = tagFontSize;
		tagcss.color = tagFontColor;
		tagcss.backgroundColor = tagBgColor;
		tagcss.borderColor = tagBorderColor;
		tagcss.borderWidth = tagBorderWidth;
		tagcss.padding = tagPadding;
		tagcss.borderStyle = tagBorderStyle;
	}
	if (infotag && tagFollowMouse) {
		if (ns4) document.captureEvents(Event.MOUSEMOVE);
		document.onmousemove = trackMouse;
	}
}
// window.onload = initTag;

var t1, t2;			// für die setTimeouts
var tipOn = false;	
function doInfotag(evt, txt) {
	if (!infotag) return;

	if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
	tipOn = true;
	if (ns4) {
		tip = '<table bgcolor="' + tagBorderColor + '" width="' + tagWidth + '" cellspacing="0" cellpadding="' + tagBorderWidth + '" border="0"><tr><td><table bgcolor="' + tagBgColor + '" width="100%" cellspacing="0" cellpadding="' + tagPadding + '" border="0"><tr><td><span style="font-family:' + tagFontFamily + '; font-size:' + tagFontSize + '; color:' + tagFontColor + ';">' + txt  + '</span></td></tr></table></td></tr></table>';
		infotag.write(tip);
		infotag.close();
	} else if (ie4||ie5||ns5) {
		tip = txt;
	 	infotag.innerHTML = tip;
	}
	if (!tagFollowMouse) positionTag(evt);
	else t1=setTimeout("tagcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
	mouseX = (ns4||ns5) ? evt.pageX: window.event.clientX + document.body.scrollLeft;
	mouseY = (ns4||ns5) ? evt.pageY: window.event.clientY + document.body.scrollTop;
	if (tipOn) positionTag(evt);
}

function positionTag(evt) {
	if (!tagFollowMouse) {
		mouseX = (ns4||ns5) ? evt.pageX: window.event.clientX + document.body.scrollLeft;
		mouseY = (ns4||ns5) ? evt.pageY: window.event.clientY + document.body.scrollTop;
	}
	// Infotag width and height
	var tpWd = (ns4) ? infotag.width: (ie4||ie5) ? infotag.clientWidth: infotag.offsetWidth;
	var tpHt = (ns4) ? infotag.height: (ie4||ie5) ? infotag.clientHeight: infotag.offsetHeight;
	
	// document area (scrollbar-breite abziehen für NS)
	var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft;
	var winHt = (ns4||ns5)? window.innerHeight+window.pageYOffset: document.body.clientHeight+document.body.scrollTop;
	
	// Mauspositionen...
	if ((mouseX+offX+tpWd) > winWd) 
		tagcss.left = (ns4) ? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
	else tagcss.left = (ns4) ? mouseX+offX: mouseX+offX+"px";
	if ((mouseY+offY+tpHt)>winHt) 
		tagcss.top = (ns4)? mouseY-(tpHt+offY): mouseY-(tpHt+offY)+"px";
	else tagcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
	if (!tagFollowMouse) t1=setTimeout("tagcss.visibility='visible'", 100);
}

function hideTip() {
	if (!infotag) return;
	t2=setTimeout("tagcss.visibility='hidden'", 100);
	tipOn = false;
}

msg1 = "<a href='javascript://' onClick='hideTip()'></a><b>Blubb</b><hr noshade size='1' />Bla bla blubb fsdgsdfgdf<br /><hr noshade size='1' /><div align='center'> &nbsp; <a href='javascript:hideTip()' class='blk02'><b>Schlie&szlig;en</b></a></div>";
msg2 = "<a href='javascript://' onClick='hideTip()'></a><b>Bla</b><hr noshade size='1' />Bla bla bla bla bla<hr noshade size='1' /><div align='center'> &nbsp; <a href='javascript:hideTip()' class='blk02'><b>Schlie&szlig;en</b></a></div>";
</script>
</head>
<body onLoad="initTag();">
<a class="smarttag" href="javascript://" onClick="doInfotag(event, msg1)">Blubb</a>
<br>
<br>
<a hidefocus class="smarttag" href="javascript://" onClick="doInfotag(event, msg2)">Bla</a>

<script type="text/javascript">
if (ie5) { filter = "; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=95)"; } else { filter = ""; }
document.write('<div id="tagDiv" style="position: absolute; visibility: hidden; z-index:100' + filter + '"></div>');
</script>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück