webForumDet fria alternativet
Logga in

Ett nytt lager ?

11 svar · 334 visningar · startad av MickeA.com

MickeA.comMedlem sedan feb. 20034 441 inlägg
#1

Hej

HAr en portfoliosida, där det jag gjort kommer som varsin bild. Nu vill jag att när man håller med musen _över_ vardera bild ska en liten ruta dyka upp bredvid eller under eller över eller whatever där en beskrivning för just det 'objektet'. När man sedan drar bort musen så ska den lilla rutan försvinna.

Nästan som här på wF, när man håller musen över en tråd, så kommer utdrag ut tråden upp i en 'alt'.

Kan tillägga att informationen, bilder, beskrivning mm. kommer hämtas från en db m.h.a ASP. Nu vet jag inte om jag är i rätt forum, men i viket fall som helst behöver jag hjälp med det här ;)

dectgapMedlem sedan sep. 20021 655 inlägg
#2

Du kan använda dig av title-attributet om du bara ska visa en enkel text:

<img src="img1.png" title="Titta så tjusigt!" alt="En liten bild" />
MickeA.comMedlem sedan feb. 20034 441 inlägg
#3

HeHe, jag kollade hur det var här på wF alldeles efter jag postade tråden, kör med precis det där, funkar ju kanon ;) Man kan inte ändra utseende på den rutan va? Det tror jag inte, men värt att fråga ;)

dectgapMedlem sedan sep. 20021 655 inlägg
#4

Nej.

Om du vill ha ett annat utseende kan du använda dig av t ex http://www.bosrup.com/web/overlib/

bossseMedlem sedan juni 2003772 inlägg
#5

Ett annorlunda utseende va de, som man kan ändra som man vill!

<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 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>
MickeA.comMedlem sedan feb. 20034 441 inlägg
#6

Hmm, ser intressant ut ;) Ska kolla mer på det imorrn.

Förresten, är det ngn som kan lite mer om den där 'overLib'?? Har lite problem nämligen. På tre av mina nio lankar jag använder det där på, så _måste_ jag istället ha rutan på vänster sida av musen, så tre av rutorna måste jag ha ngra spec. inställningar för, vilket jag inte är med på huyr jag ska göra. Har ngn JS-Guru här tid att kolla lite på dess kod och hjälpa mig med det här?

Min kod för alla länkar ser nu ut såhär:

<a href="javascript:void(0);" onmouseover="return overlib('<%=pordran%>', CAPTION, 'http://www.Pordran.se', FGCOLOR, '#CCCCFF', BGCOLOR, '#333399', BORDER, 2, CAPTIONFONT, 'Verdana', TEXTFONT, 'Verdana', TEXTSIZE, 1);" onmouseout="nd();" class='portfolio'><img src='../pics/portfolio/pordran.png' border='0'></a>

Tack !!!

[redigerat]Bossse => I Koden ovan dräller det av fel, får felmess efter felmess när jag kör den... ;)[/redigerat]

dectgapMedlem sedan sep. 20021 655 inlägg
#7

Hur blir det om du skriver

onmouseover="return overlib('<%=pordran%>', LEFT, CAPTION, 'http://www.Pordran.se', FGCOLOR, '#CCCCFF', BGCOLOR, '#333399', BORDER, 2, CAPTIONFONT, 'Verdana', TEXTFONT, 'Verdana', TEXTSIZE, 1);"
MickeA.comMedlem sedan feb. 20034 441 inlägg
#8

Hmm...?

Tjaba, där här verkar helt sinnesjukt. Jag satt o läste den manual som finns på overLib's sida, där stod det att man kunde kombinera hur som helst, så igår (innan jag skrev mitt förra svar) så provade jag att lägga till LEFT, ABOVE i koden för varje länk, jag la detta mitt i strängen som redan finns. Då blev det toksyntaxfel stod det på denna rad, varför har jag ingen aning om, men den här gången när jag _bara_ la dit LEFT så funkar det ju alldeles Ausgemärkt. Är det ngn som vet hur det här har stöd i andra webläsare än IE ?! Det är ju Javascript, så de flest som stöder Javascript borde det funka för, va?!

TackTack !!!

bossseMedlem sedan juni 2003772 inlägg
#9

Ok, jag gjorde en del radbrytningar så att det skulle passa detta forum bättre, bara för att slippa scrolla i sidled.
Troligen var de det som gjorde att det blev massa felmeddelanden.
Lägger nu ut koden rakt av.
Har naturligtvis först kollat på min burk att det funkar.

<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 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>
MickeA.comMedlem sedan feb. 20034 441 inlägg
#10

Det här ser jättebra ut, nu när det funkar ;) Ska glo igenom koden lite närmare när jag kommer hem från jobbet.

Ta´ck !!!

bossseMedlem sedan juni 2003772 inlägg
#11

När jag ändå är i farten så!
Här har du en horizontell variant.

<html> 
<head> 
<title>LänkBeskrivning</title> 
<style type="text/css"> 
<!-- 
.box 
{ 
z-index: -1;
padding: 5px; 
height: 5%; 
width: 75%; 
background-color: #99CC99; 
border: 3px solid #006633; 
} 
--> 
</style> 

</head>
<BODY bgcolor=blue> 
<DIV ID="lanktexten" STYLE="position: relative; visibility: hidden ;"></DIV> 

<SCRIPT LANGUAGE="javascript"> 
html_fore="<TABLE CELLPADDING=2 BORDER=1 CELLSPACING=0><TR><TD STYLE='background-color: orange; font-family: arial, verdana; font-size: 8pt'>" 
html_efter="</TD></TR></TABLE>" 
Xled= -50 
Yled= 10 
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: 10; left: 5;">
&nbsp &nbsp
<a href="index.html" onMouseOver="visa('<B><FONT SIZE=2>Info om denna sida</FONT> ');" onMouseOut="visa();">Start</a> 
&nbsp &nbsp
<a href="nyheter.html" onMouseOver="visa('<B><FONT SIZE=2>Menade du så här kanske ? </FONT> ');" onMouseOut="visa();">Nyheter</A> 
&nbsp &nbsp
<a href="tavlingar.html" onMouseOver="visa('<B><FONT SIZE=2>Jag tror nästan det va</FONT> ');" onMouseOut="visa();">Tävlingar</A> 
&nbsp &nbsp
<a href="traningar.html" onMouseOver="visa('<B><FONT SIZE=2>Går även bra med en bild </FONT> ');" onMouseOut="visa();">Träningar</A> 
&nbsp &nbsp
<a href="lager.html" onMouseOver="visa('<B><FONT SIZE=2>Radbrytning går också bra <BR> Va tycker du, Inte så illa va ?</FONT> ');" onMouseOut="visa();">Läger</A> 
&nbsp &nbsp
<a href="lankar.html" onMouseOver="visa('<B><FONT SIZE=2>Info om länkar ? </FONT> ');" onMouseOut="visa();">Länkar</A> 
&nbsp &nbsp
<a href="bildarkiv.html" onMouseOver="visa('<B><FONT SIZE=2>Mina fina bilder</FONT> ');" onMouseOut="visa();">Bildarkiv</A> 
&nbsp &nbsp
<a href="kommitten.html" onMouseOver="visa('<B><FONT SIZE=2>Nytt från tävlingkommittén</FONT> ');" onMouseOut="visa();">Kommittén</A> 
</body> 
</html>
MickeA.comMedlem sedan feb. 20034 441 inlägg
#12

Tack !!!

135 ms totalt · 3 externa anrop · v20260731065814-full.cf67ef55
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)