4 svar · 297 visningar · startad av badmongo
hej jag skulle behöva hjälp med en sak...
vill att när man drar musen över en bild .. så ska det komma uppp ett lager några pixlar över muspekaren... som en hemmagjord alt-tag.. som det tex står info om om bilden..
tack på förhand / ERIK
Menar du så här?:
http://www.jojoxx.net/dhtml/examples/tooltip.html
Ett litet exempel jag skapat för en tid sedan.
<html>
<head>
<title>LänkBeskrivning</title>
<style type="text/css">
<!--
.box1 {
z-index: 1;
padding: 5px;
height: 460px;
width: 350px;
}
.box {
z-index: -1;
padding: 5px;
height: 100px;
width: 200px;
background-color: lightgreen;
border: 3px dotted green;
}
-->
</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;">
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Menade du så här kanske ? </FONT> ');" onMouseOut="visa();">Länk 1</A>
<BR>
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Jag tror nästan det va</FONT> ');" onMouseOut="visa();">Länk 2</A>
<BR>
<A HREF="#" 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>
<BR>
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Radbrytning går också bra <BR> Va tycker du, Inte så illa va ?</FONT> ');" onMouseOut="visa();">Länk 4</A>
</body>
</html>
tack så jättemycke. bossse ett problem bara att länken man håller över hoppar till när man drar musen över..
Ändra position: relative till position: absolute för div-taggen i början.
Sen skulle jag vilja plocka bort z-index-egenskapen för .box eftersom den är onödig då "muslagret" är absolutepositionerat, och dessutom gör att länkarna inte syns i Mozilla. Ett negativt z-index gör ju att elementet hamnar bakom bodyn.
