overLIB

5 svar · 347 visningar · startad av Gabbe 20 aug. 2004

GabbeMedlem sedan aug. 200143 inlägg

Frågan20 aug. 2004 11:21#1

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! :)

bossseMedlem sedan juni 2003771 inlägg

21 aug. 2004 17:04#2

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>

GabbeMedlem sedan aug. 200143 inlägg

21 aug. 2004 19:55#3

Perfekt, tack ska du ha!

GabbeMedlem sedan aug. 200143 inlägg

25 aug. 2004 12:00#4

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. :)

bossseMedlem sedan juni 2003771 inlägg

25 aug. 2004 16:23#5

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>

Bosse168Medlem sedan nov. 20031 018 inlägg

25 aug. 2004 20:28#6

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>