Har omarbetat ett javascript så det passar mina syften.
Jag har ett antal bilder i en box som visar en scrollist när boxen blir fylld, så långt allt väl.
Det går lika bra att använda sig av div i detta exempel.
Det jag nu önskar är följande:
När man för muspekaren över bild fyra
så ska bilderna sakta börja scrolla uppåt så
att bilderna nedtill blir synliga.
Farten ska också gå att reglera. ( gärna av betraktaren )
Så att man slipper använda sig av scrollisten till höger.
Jag tycker det bör vara möjligt, eller vad tror ni?
Mer info efter koden längst ner
<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: 400px;
width: 110px;
background-color: #99CC99;
border: 3px solid #006633;
overflow: auto;
}
-->
</style>
<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=-180
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>
</head>
<BODY bgcolor=lightblue>
<DIV ID="lanktexten" STYLE="position: relative; visibility: hidden;"></DIV>
<p class="box" style="position: absolute; top: 5%; left: 85%;">
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Texten till bild 1</FONT> ');" onMouseOut="visa();"><IMG SRC=Bild1.gif width=70 height=70></A>
<BR>
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Text till bild 2</FONT> ');" onMouseOut="visa();"><IMG SRC=Bild2.gif width=70 height=70></A>
<BR>
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Text till bild 3</FONT> ');" onMouseOut="visa();"><IMG SRC=Bild3.gif width=70 height=70></A>
<BR>
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Text till bild 4</FONT> ');" onMouseOut="visa();"><IMG SRC=Bild4.gif width=70 height=70></A>
<BR>
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Texten till bild 5</FONT> ');" onMouseOut="visa();"><IMG SRC=Bild5.gif width=70 height=70></A>
<BR>
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Text till bild 6</FONT> ');" onMouseOut="visa();"><IMG SRC=Bild6.gif width=70 height=70></A>
<BR>
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Text till bild 7</FONT> ');" onMouseOut="visa();"><IMG SRC=Bild7.gif width=70 height=70></A>
<BR>
<A HREF="#" onMouseOver="visa('<B><FONT SIZE=2>Text till bild 8</FONT> ');" onMouseOut="visa();"><IMG SRC=Bild8.gif width=70 height=70></A>
</body>
</html>
Har nu fixat ett scrollscript, men hur kan man kombinera dessa,
så att ovanstående går att använda tillsammans med detta?
Kolla detta här