Jag brukar säga tooltip.
Frågan#1
Vad kallas den ljusgulsaktiga rutan som kommer fram när man håller musen över länkar eller bilder?
Kallas rutan för något speciellt eller har den något vanligt förekommande slang?
"alt/title-ruta"
HTML & CSSur HTML, XHTML & CSS
9 svar · 492 visningar · startad av ampy
Japp, Tooltip brukar det kallas. Vissa intet ont anande personer kalalr det felaktigt för popup-rutor.
För att få denna tooltip använder du dig av title, inget annat...
Finns även ett alternativ till alt eller title, som inte släcks efter 5 sekunder.
Men det kanske du kände till sen tidigare.
<html>
<head>
<title>LänkBeskrivning</title>
<style type="text/css">
<!--
.box {
z-index: -1;
padding: 5px;
height: 100px;
width: 200px;
background-color: lightgreen;
border: 3px solid yellow;
}
-->
</style>
</head>
<BODY bgcolor=lightblue>
<DIV ID="lanktexten" STYLE="position: relative; visibility: hidden ;"></DIV>
<SCRIPT LANGUAGE="javascript">
html_fore="<TABLE CELLPADDING=3 BORDER=1 CELLSPACING=3><TR><TD STYLE='background-color: orange; font-family: arial, verdana; font-size:8pt; color:blue'>"
html_efter="</TD></TR></TABLE>"
Xled=20
Yled=-30
divnamn="lanktexten";
function visa(txt)
{
if (txt)
{
txt=html_fore+txt+html_efter
if (document.all)
{
document.all[divnamn].innerHTML=txt;
document.all[divnamn].style.visibility="visible";
}
else if (document.layers)
{
document[divnamn].document.open();
document[divnamn].document.write(txt);
document[divnamn].document.close();
document.layers[divnamn].visibility="visible";
} }
else
{
if (document.all)
{
document.all[divnamn].innerHTML="";
document.all[divnamn].style.visibility="hidden";
}
else if (document.layers)
{
document[divnamn].document.open();
document[divnamn].document.write("");
document[divnamn].document.close();
document.layers[divnamn].visibility="hidden";
} } }
if (document.all)
{
document.onmousemove = musen_flyttar;
}
else if (document.layers)
{
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove = musen_flyttar;
}
var Xmusposition, Ymusposition;
function musen_flyttar(ev)
{
if (document.all)
{
Xmusposition = window.event.x;
Ymusposition = window.event.y;
}
else if (document.layers)
{
Xmusposition = ev.pageX;
Ymusposition = ev.pageY;
}
flytta_lager(divnamn,Xmusposition+Xled,Ymusposition+Yled);
}
function flytta_lager(lagernamn,x,y)
{
if (document.all)
{
document.all[lagernamn].style.left = x+document.body.scrollLeft;
document.all[lagernamn].style.top = y+document.body.scrollTop;
}
else if (document.layers)
{
document.layers[lagernamn].left = x;
document.layers[lagernamn].top = y;
} }
//-->
</SCRIPT>
<p class="box" style="position: absolute; top: 20; left: 5;">
<table width=150 height=150>
<tr>
<td>
<A HREF="dinsida1.htm" onMouseOver="visa('<B><FONT SIZE=2>Menade du så här kanske ? </FONT> ');" onMouseOut "this.style.backgroundColor='green';="visa();">Länk 1</A>
</td>
</tr>
<tr>
<td>
<A HREF="dinsida2.htm" onMouseOver="visa('<B><FONT SIZE=2>Jag tror nästan det va</FONT> ');" onMouseOut="visa();">Länk 2</A>
</td>
</tr>
<tr>
<td>
<A HREF="dinsida3.htm" onMouseOver="visa('<B><FONT SIZE=2>Går även bra med en bild <img src=dinbild.gif width=50 height=50></FONT> ');" onMouseOut="visa();"> <img src=dinbild.gif width=30 height=30></A>
</td>
</tr>
<tr>
<td>
<A HREF="dinsida4.htm" onMouseOver="visa('<B><FONT SIZE=2>Radbrytning går också bra <BR> Va tycker du, Inte så illa va ? <BR> Rutan blir större, ju mer text den innehåller</FONT> ');" onMouseOut="visa();">Länk 4</A>
</td>
</tr>
</table>
</body>
</html>
Det här alternativet fungerar bara i IE och Netscape 4 (som ingen använder längre), sen kommer det också hamna under iframes eller dropdowns. Går att ändra dock så att det även fungerar i nyare browsers.
Ampy frågade visserligen bara vad rutan hette, men om ni känner att ni vill posta koder till diverse tooltip-rutor så go ahead :OO ;)
Tack för alla svar, kör på "tooltip" då. :)
Jojoxx har ett som funkar i de flesta webläsare:
http://www.jojoxx.net/dhtml/examples/tooltip.html
ampy »
Markera gärna tråden som löst.