20. september 2003 - 20:50Der er
5 kommentarer og 1 løsning
Få en tabel/div med image til at autoscrolle
hej E
Findes der en mulighed som kan få et billede/image på ca. 1500px x 400px til at automatisk scrolle frem og tilbage på den vandrette linie i en tabel der er 700px x 450px når billede er færdigloadet.
Jeg har forgæves prøvet at lede efter noget på nettet uden held. Men måske er det dhtml kategorien jeg skal bruge.
Eller kan det kombineres med den <DIV></DIV> som jeg bruger?
Men mit eks. ser således ud:
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="500" align="center" background="/tech_images/bg.gif"> <tr valign="top" align="center"> <td height="92" valign="bottom"> > <br> <div style="overflow: auto;width:700px;height:440px;"> <a class=link2 href="java script:window.close()"> Click on the Picture to close the Window. <img src="/web_images/show_51_big.jpg" border="0" alt="Click on the Picture to close the Browser." width="1398" height="400"> </a> </div> </td> </tr> </table>
Det kan vel gøres ved at laved en div inde i en anden div hvor overflow er hidden. så bruges et javascript til at ændre den absolute position for "left" frem og tilbage mellem værdien -100px og 100px.
men er ikke javscript haj. kan ikek alt det der med timers osv.
Det jeg næste har brug for er noget denne retning:
<marquee behavior="alternate" direction="right" scrollamount="5" scrolldelay="100" width="70%" loop="2"><img src="/web_images/show_51_big.jpg" border="0" alt="Click on the Picture to close the Browser." width="1398" height="400"> </marquee>
Bortset fra jeg ikke lige kan få min scrollbar fra DIV´en tilbage når den har kørt/loopet 2 gange. :-/
Mon ikke, det er noget lignende dette, du leder efter:
<script type="text/JavaScript"> var myPic=picW=picH=timer=false, L2R="left"; function movePic() { if (!myPic) { timer = setTimeout("movePic()", 300); return false; } if ( myPic.offsetLeft<=-(picW-800) ) L2R = "right"; if (L2R=="right" && myPic.offsetLeft<0) myPic.style.left = myPic.offsetLeft+5 + "px"; else if (L2R=="left") myPic.style.left = myPic.offsetLeft-5 + "px"; if (L2R) timer = setTimeout( "movePic()", 40 ); } function setPicDims(p) { picW = p.width; picH = p.height; myPic = p; movePic(); } </script>
<div style="position:relative;width:800px;height:600px;"> <div style="position:absolute;width:800px;height:600px;clip:rect(0px,800px,600px,0px);overflow:hidden;z-index:2"> <img id="ib" style="position:relative;z-index:1" src="guldpladsen.jpg" border="0" alt="Click on the Picture to close the Browser." onload="setPicDims(this)" onclick="window.close();"> </div> </div>
Lad mig i øvrigt lige forklare, hvorfor 'den mærkelige mand' bruger _to_ div: Jeg har lagt billedet inde i et div, hvor jeg har 'skåret et hul' og jeg gemmer (med 'overflow:hidden), hvad der måtte stikke udenfor hullet: ... clip:rect(0px,800px,600px,0px);overflow:hidden; ...
For at kunne gøre det, skal div'et positioneres absolut - hvilket giver problemer med den fysiske placering på siden. Div'et vil placere sig i øverste venstre hjørne af siden og vil ikke 'flyde med' den - men kan kun placeres med faste koordinater.
Da et HTML-element positioneres i forhold til det element, der indeholder det, kan vi altså smide div'et med hullet ind i et relativt positioneret div - som jo kan placeres som vanligt. Div'et med hullet placerer sig nu i øverste hjørne af det omsluttende div - som altså kan placeres, hvor vi vil have det. Eurika - eurika ;o)
Inde i div'et med hullet anbringer vi så billedet med et lavere z-index (hvilket anbringer det under hullet - så det overskydende af billedet bliver gemt). Ofte vil du se, folk positionerer det, der skal scrolles (her et billede) absolut. Det giver dog vrøvl i NS, som godt nok gemmer det overskydende af billedet for dit øje - men den opfatter stadig billedet (med dets alt for store dimensioner), som værende tilstede i fuld størrelse. Det introducerer en system-scrollbar i vinduet. For at gøre det rigtig grimt, 'animerer' den samtidig med, billedet scroller ... absolut *ikke* kønt! Den fikseste løsning på det er at positionere billedet relativt ;o)
Resten er blot at flytte rundt på billedet mellem nogle yderpunkter. /mvh
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.