5 svar · 345 visningar · startad av Gabbe
Tjenare!
Jag har ett stort (!) problem. :r
Jag håller på att pilla lite med overLIB,
och behöver hjälp med att istället för att det ska vara text i rutan så vill jag att det ska vara en bild.
Hoppas du förstår vad jag menar?
Kan du det, eller vet något annat script så svara gärna.
Tacksam för svar! :)
Nu vet jag inte om du vill ha horizontell eller vertikal meny, men här är ett förslag!
<html>
<head>
<style type="text/css">
p {cursor:hand;}
</style>
</head>
<body bgcolor=lightblue>
<DIV ID="lanktexten" STYLE="position: absolute;
border:1px solid black; color:blue; visibility: hidden ;">
</DIV>
<script language="javascript">
html_fore=""
html_efter=""
Xled=30
Yled=-20
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 onMouseOver="visa('<img src=bild1.jpg width=50 height=50>');" onMouseOut="visa();">Länk ett</p>
<p onMouseOver="visa('<img src=bild2.jpg width=50 height=50>');" onMouseOut="visa();">Länk två</p>
<p onMouseOver="visa('<img src=bild3.jpg width=50 height=50><br> lite text kanske');" onMouseOut="visa();">Länk tre</p>
</body>
</html>
Perfekt, tack ska du ha!
Tjenare igen...
Jo jag har ett litet problem med ditt script.
När man drar över musen på texten så kommer det som sagt upp
den bilden man vill, men om man drar den bredvid texten cirka
5cm så kommer bilden upp igen, fast man inte har musen på texten.
Som sagt vill bara att bilden ska dyka upp när man håller musen på själva texten. :)
Ok, det kan man t.ex. fixa med lite css.
Finns säkert andra sätt också!
<html>
<head>
<style type="text/css">
p {cursor:hand;}
body {background-color:green; margin:0}
.tabellen {width:100%; height:200%; border:1px solid black; position:absolute; left:10%; top:0%; z-index: -1;}
.td2 { background-color:green; color:white; vertical-align:top; padding:10px;}
</style>
</head>
<body>
<DIV ID="lanktexten" STYLE="position: absolute;
border:1px solid black; color:blue; visibility: hidden ;">
</DIV>
<script language="javascript">
html_fore=""
html_efter=""
Xled=30
Yled=-20
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>
<table class=tabellen>
<tr>
<td class=td2>
Övrigt innehåll här.
</td>
</tr>
</table>
<p class="box" style="position: absolute; top: 20; left: 5;">
<table width=8% >
<tr>
<td>
<p onMouseOver="visa('<img src=bild1.jpg width=50 height=50>');" onMouseOut="visa();">Länk ett</p>
</td>
</tr>
<tr>
<td>
<p onMouseOver="visa('<img src=bild2.jpg width=50 height=50>');" onMouseOut="visa();">Länk två</p>
</td>
</tr>
<tr>
<td>
<p onMouseOver="visa('<img src=bild3.jpg width=50 height=50><br> lite text kanske');" onMouseOut="visa();">Länk tre</p>
</td>
</tr>
</table>
</body>
</html>
Använd denna kod om du ska få fram en bild med hjälp av overLIB
<script language="JavaScript" type="text/JavaScript" src="overlib.js"></script>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<div onmouseover="return overlib('<IMG SRC=MIN_BILD.jpg BORDER=1 WIDTH=90 HEIGHT=110>',FULLHTML);" onmouseout="return nd();">MIN LÄNK / BILD</div>