18 svar · 574 visningar · startad av macgunde
Hej
Jag vill att en "lapp" ska komma upp med text när man dra muspekaren över en bild... Liknande som <title> taggen...
Har sett detta på en hemsida, minns dock inte vart...
--
Daniel
Är det ett sånt här du menar (håll muspekaren över "Jojoxx.net "):
http://www.jojoxx.net/dhtml/examples/tooltip.html
Snabbt och bra svar ett stort tack :D
Web-Tor skrev:
Är det ett sånt här du menar (håll muspekaren över "Jojoxx.net "):
http://www.jojoxx.net/dhtml/examples/tooltip.html
15 kilometer JavaScript... uschiamej...
Tacka vet jag "pure css";
http://www.meyerweb.com/eric/css/edge/popups/demo.html
Visst är CSS jättebra. Problemet i det här fallet är att du inte kan åstadkomma det macgunde efterfrågar med CSS.
Hmm, det är väl bara att göra sisåhär...
<a href="hej.html" title="Här kommer lite info om hejlänken">hej</a>
samma sak med en bild-tag =)
niklasw skrev:
Hmm, det är väl bara att göra sisåhär...
<a href="hej.html" title="Här kommer lite info om hejlänken">hej</a>
samma sak med en bild-tag =)
Visst kan man det, men problemet är att alla webbläsare inte klarar av hur långa texter som helst i title taggen...
Har redan testat detta :) tack ändå..
Skarre skrev:
Visst är CSS jättebra. Problemet i det här fallet är att du inte kan åstadkomma det macgunde efterfrågar med CSS.
Näe, men nästan.
Web-Tor skrev:
Är det ett sånt här du menar (håll muspekaren över "Jojoxx.net "):
http://www.jojoxx.net/dhtml/examples/tooltip.html
jag har använt mig av jojoxxs "tooltip". Men i explorer så se det gräsligt ut... kolla själva:
http://home.swipnet.se/uveborn/daniel/test/index.html
Länkarna funkar dock inte ännu...
--
Daniel
På vilket sätt ser det gräsligt ut?
Själva textrutan blir ca 1 cm bred och väldigt lång i explorer...
Själva textrutan blir ca 1 cm bred och väldigt lång i explorer...
Hmm...
Det som läggs ut som "lapp" är ju en vanlig <div>...
Ändra lite på den här raden
var preMessage="<div style='[b]width:300px;[/b]background-color:rgb(180,180,255);border:solid blue 1px;font-family:Arial;font-size:12px;'>"
och lägg in några <br> i "lapp-div:en" så skall du få se på skillnad ;)
Det funkade :) Tackar.
En annan fråga är varför själva div-lappen ibland lägger sig under muspekaren och ibland långt till höger från muspekaren...?
Måste bara säga att jag är väldigt tacksam för all hjälp, och att jag försöker lära mig av allt ni skriver... :)
--
Daniel
lappen verkar bara göra så i explorer...
Om du vill ha en bra variant som har mycket funktionalitet kan du kolla på http://www.bosrup.com/web/overlib/
Funkade mycket bra för mig. Gratis för privatpersoner tror jag men får inte användas komersiellt utan tillstånd.
Ta en titt..
Tackar ska kolla på detta :)
Något sådant kanske kan passa?
Bara att ändra positioner så det passar dig.
<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>
Tråden flyttas från HTML, XHTML & CSS