Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

Javascript + DHTML: tekst in cirkel laten draaien

Anoniem
Rob van Esch
17 antwoorden
  • Hoi
    Ik ben ben bezig een website te ontwerpen. De bedoeling is dat er op de intropagina een foto komt, waaromheen wat tekst draait. Ik had het volgende bedacht om dit voor elkaar te krijgen:
    -ik plaatst de tekst in <div> tags, waardoor ik deze <div> met een javascriptje laat verschuiven.
    -De tekst mag op zijn kop komen te staan als hij onder het plaatje zit.

    De vraag is hoe ik de <div> tags in een cirkel rond kan laten draaien, welke javascript statement heb ik hiervoor nodig, het bewegen van <div> tag is het probleem niet. En of het mogelijk is deze over een bepaalde hoek te draaien, zodat de tekst schuin, of zelfs op zijn kop komt te staan

    Alvast bedankt
    Rob

    [ Dit Bericht is bewerkt door: Rob van Esch op 2002-03-28 11:20 ]
  • kijk eens op http://www.dhtmlcentral.com

    thomas brattli doet heel veel met DHTML; wellicht dat je daat wat vindt…

    grtzzz

    t.
  • Hetis een mooi site, maar dr staat alleen niet op wat ik moet hebben.
    Ik heb inmiddels al het volgende bedacht. Een cirkel wordt beschreven door de volgende parameter voorstelling:
    x coordinaat = cos t
    y coordinaat = sin t

    waarbij t de hoek in graden of radialen is.
    Als ik een lus maak die om de zoveel tijd doorlopen worden en zo een nieuwe x en y coordinaat uitrekent voor de <div> tag dan ben ik er een heel eind volgens mij.

    Het enige wat ik nog nodig heb is de javascript functies voor sin en cos. en hoe kan ik het getal pi opvragen?
    Alvast bedankt
    Rob
  • wat je nodig hebt zit in het Math object
  • tnx
  • Nog een vraagje: hoe kan ik tekst over een bepaald aantal graden draaien? Zodat je schuine tekst krijgt zeg maar??
  • Bij mijn weten kan dat niet. Heb wel ooit een vage microsoft activeX gezien waarbij een image roteerde, maar daar heb je ook niets aan.
    Kijk ook eens naar dit voorbeeld (met muis slepen in het venster)
  • Roteren is in principe mogelijk, maar alleen in IE 5.5 en hoger en alleen in stappen van 90 graden, niet echt nuttig dus. Ik heb de link even voor je opgezocht voor het geval je het toch nuttige vindt, maar persoonlijk zou ik gewoon een animated GIF maken: http://msdn.microsoft.com/workshop/author/filter
    eference/filters/basicimage.asp


  • Hallo,
    bedankt voor jullie reacties.
    Ik zal hieronder even de code posten voor geïntereseerden.
    [code:1:141385a2ad]

    <html>
    <head>
    <title>Welkom</title>

    <script language="javascript">
    <!–

    var t = 0.5 * Math.PI;
    var x;
    var y;
    var timer;
    var teller = 0;

    var middelpuntx = screen.width /2;
    var middelpunty = 250;

    function draai()
    {
    plaatje.style.left = middelpuntx - 100;
    plaatje.style.top = middelpunty -70;
    x = 210 * (Math.cos(t));
    y = 150 * (Math.sin(t));

    cirkel.style.left = middelpuntx + x - 60;
    cirkel.style.top = middelpunty - y - 20;

    t = t - (Math.PI / 30);
    timer = setTimeout('draai()', 100);
    }
    }

    //–>
    </script>


    </head>

    <body bgcolor="#108DD8" text="E1AB06" onLoad="draai()">

    <center>
    <h1>Welkom</h1>
    </center>

    <div id="cirkel" style="position:absolute;font-family:Arial;font-size=16pt">
    <center>
    <b>Plaats hier je<br>draaiende tekst</b>
    </center>
    </div>
    </body>
    </html>
    [/code:1:141385a2ad]

    Rob

    [ Dit bericht is bewerkt door: Rob van Esch op 2002-04-01 12:23 ]
  • En waar staat het resultaat nou?
  • Misschien heb je hier wat aan:

    http://www.dhtmlcentral.com/script/script.asp?id=14
  • Nou bij mij ongeveer in het midden van de browser-ruimte. Bij mij werkt ut in in ieder geval ik moet het nog op andere systemen testen hoor.
    Rob
  • hoe kan ik de waardes uitlezen van de style opmaakcodes in javascript?. menu.height werkt niet bij mij. Iemand ideeen??
    Rob

    [ Dit bericht is bewerkt door: Rob van Esch op 2002-04-02 21:02 ]
  • normaalgesproken met [i:fa8734697c]object.style.property[/i:fa8734697c]
  • Bedankt
    Heb ik toch nog een andere vraag:
    Hoe komt het dat ik met de hierna volgende code, de breedte van het object niet uit kan lezen met de javascript statement tekst.style.width en de vertikale uitlijning niet werkt, ik heb zelf IE 5.5:
    [code:1:150466577d]
    <div id="tekst" style="width:150;vertical-align:middle;">
    blaat
    </div>
    [/code:1:150466577d]

    Bedankt
    Rob
  • "document.all.tekst.style.width" werkt wel.

    Ik weet niet waarom "middle" niet werkt, "top, sub en super" werken zichtbaar wel, maar dan heb ik het stukje tekst wel tussen SPAN-tags gezet i.p.v. tussen DIV-tags (en tussen twee plaatjes).

    Ik heb ook IE5.5. Kennelijk ondersteunt ie "middle" niet. Ik heb het met "center" geprobeerd, lukt ook niet.
  • http://forum2.computertotaal.nl/phpBB/viewtopic.php?topic=50009&forum=13&5

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.