Plaatje laten draaien als je er overheen gaat.

[mysql]

Hallo programmeurs,

ik zoek een HTML script om een foto te laten draaien als je er overheen gaat met je cursor.
Is makkelijk als het HTML is,
maar het mag ook JS of PHP zijn.
Graag klein script.
Graag op 1 pagina.

Alvast bedankt.

 

[csshunter]

Hoi mysql,
Tja, het moet natuurlijk cross-browser zijn ...
... want anders was het met een paar regeltjes css gauw gepiept (behoorlijk minder dan 1 pagina ):

#gedraaid:hover {
	-webkit-transform: rotate(-15deg); /* Chrome ok, Safari ok */
	-moz-transform: rotate(-15deg);    /* Firefox ok */
	-o-transform: rotate(-15deg);      /* Opera ok */
	-ms-transform: rotate(-15deg);     /* IE10-ConsumerPreview ok; IE9 maar half! */
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=-.16); /* lt IE9: toch niet! */
	transform: rotate(-15deg);         /* css3 */
	}

Helaas-helaas. Internet Explorer laat weer eens vreselijk verstek gaan.
IE9 zou het met het -ms- prefix moeten doen, zegt Microsoft op msdn, maar nop: plaatje is wel gedraaid, maar met opeens een zwarte achtergrond van de box die niet weg te halen is.
IE7 en IE8 doen helemaal niets, ondanks goede berichten (bv. dit) over de filter-eigenschap. *) :shocked:

Demo: Rotate test

• Maar misschien is er nog een Verborgen Voorwaarde voor de IE's, want daarover heb ik niet Google binnenstebuiten gekeerd.

Met vriendelijke groet,
CSShuner
_____________
*) De rotatie bij een MS-filter is niet in graden maar in kwart slagen (rotatie 1 = 90graden)!

 

[mysql]

mmmmm,

was niet helemaal wat ik had verwacht.
Ik had meer iets in gedacht zoals op deze website:
http://w4kangoeroe.nl/kangoeroe/

daar draaien de kangoeroes 360 graden (vloeiend).

Als je dat misschien kan regelen (of iemand anders) is dat fijn.

Mysql

 

[csshunter]

Hoi mysql,
Ah, je wilt 'm niet naar een vaste hoek laten kantelen, maar doorlopend laten draaien.
Alles kan, dus dat ook.

Animated gif
Als het om zo'n kleine afbeelding als daar gaat, zou je het kunnen doen met een geanimeerd gif'je, dat bij de hoverstand de rol van een stilstaand img overneemt. Dat is cross-browser.

• Test: draai-button.htm
  Zie broncode.
  (Even snel een knopje in elkaar geanimeerd > dat kan veel mooier.)

Hoe groter van formaat de afbeelding is, des te groter wordt de bestandsgrootte: niet alleen door het grotere oppervlak (dat werkt kwadratisch door), maar ook omdat er meer tussenstanden nodig zijn om de draai vloeiend te laten verlopen.
Dat zou bezwaarlijk kunnen worden voor de paginasnelheid: het ding moet eerst gedownload worden.

=======
CSS3 + Javascript
Wat ook kan, is de css3-rotatie van mijn vorige reactie laten toepassen door een javascriptje, dat met telkens een tijdsinterval de volgende hoek pakt.

• Test: rotate-test-javascript.htm
  Zie ook weer de broncode. *)

Dit is echter vooralsnog niet crossbrowser. In Firefox, Chrome, Opera en Safari gaat het waanzinnig mooi. Maar in Internet Explorer kan ik 'm net als boven niet aan de praat krijgen.
Er hoeft nu maar 1 img gedownload te worden (ipv de standen-serie die in een geanimeerde gif zitten), maar hier kan een ander bezwaar om de hoek komen kijken: het vraagt pittig veel processorkracht zolang je aan het hoveren bent. Bij mij op WindowsXP loopt het soms op tot 60% van de processorcapaciteit, en bij veel andere openstaande programma's kan dat schokkerige beelden in de browser opleveren.
Plus natuurlijk de javascript-afhankelijkheid: wie zonder javascript surft kan er niets van zien.

=======
Flash?
Het kan wellicht ook met Flash gemaakt worden, maar daar ben ik niet in thuis.
Bezwaar daarvan is dan weer dat de bezoeker een Flash-plugin moet hebben gedownload voordat er wat van het image gezien kan worden.

Conclusie:
Alles heeft 'n voor en z'n tegen!

Met vriendelijke groet,
CSShunter
_____________
*) Hij springt nu bij einde hover terug naar z'n beginstand.
Het kan ook zo gemaakt worden dat de beweging stopt waar hij zit op moment van onthoveren. Bij een volgende hover gaat hij dan gewoon weer verder waar hij gebleven was.
En allerlei andere varianten: bv. gewoon draaien bij hover, maar bij verlaten van de hover met versnelde pas doordraaien naar de beginstand. Of langzaam beginnen met draaien, en steeds sneller. Of na 1 keer ronddraaien (of 2, 3, ..) uit zichzelf stoppen. Enz.!

 

[mysql]

Dat lijkt er al meer op.
Maar er ontbreken er nog drie dingen:
- Als je met je cursor eraf gaat moet hij door draaien.
- Als je met je cursor erop gaat moet hij gelijk weer in de normale stand gaan; daarna weer verder met eis 1.
- Bij het openen van de pagina moet hij al gaan draaien.

Mysql

PS: Graag met script van rotate-test-javascript.htm

 

[csshunter]

Ehm, delen we hier opdrachtbonnetjes uit?

Helpmij is een forum, geen script-fabriek. Ik heb als vrijwilliger een aantal basisideeën geleverd waarmee je aardig uit de voeten kunt, lijkt me.
Wat heb je zelf al gedaan om het script aan te passen?

Met vriendelijke groet,
CSShunter

 

[mysql]

Heb nog wat geprobeerd.
Is me wel gelukt om hem door te laten draaien.
alleen draait hij nu alleen maar door.
en als je er over heen gaat gaat hij harder en harder.
Maar ja, ik heb daar nog niet helemaal verstand van.

Script is trouwens voor werkstuk.

Mysql

PS: wie dit wel weet mag antwoorden.

PS 2: http://w4kangoeroe.nl/kangoeroe/

 

[csshunter]

PS: wie dit wel weet mag antwoorden.

Hartelijk dank voor deze gunst, daar maak ik gebruik van.

Ik dacht: als mysql nou ipv een nieuw verlanglijstje met een beetje behoorlijke reactie op mijn nr. #6 komt, dan kan ie van mij het script wel krijgen.

• Want een draaiende testversie heb ik al op de plank liggen.

Maar je zegt:

Script is trouwens voor werkstuk.

Dat verandert de zaak.
Dan heb ik met mijn eerste script eigenlijk al mijn mond voorbij gepraat, want werkstuk-opdrachten moet je zelf maken.

• Helpmij is er niet voor bedoeld om mensen aan cijfers / diploma's te helpen die ze niet zelf verdiend hebben.
• Er kunnen hier wel tips gegeven worden naar aanleiding van wat je aan eigen code laat zien, maar kant-en-klare scripts voor opdrachten is dus niet de bedoeling.
• Zie hier het standpunt van helpmij.nl.

Dus geen script, maar hint:

• "Als je bij een onmouseover en een onmouseout het omgekeerde wilt laten doen, dan moet je niet ... maar ..."

Met vriendelijke groet,
CSShunter
___________
PS: Als je meer dan één van die draaidingen wilt hebben (zoals de kangoeroes), dan zal je een universele versie voor het draaiscript moeten maken, waarin je per draaier een variabele kunt ingeven:
[JS]function draai(n){
// functie voor een willekeurig element, waarbij "n" staat voor de id van het element
}[/JS]
... om dan bij de mouseovers en mouseouts te kunnen invullen: draai('nummer1'), draai('nummer2'), stop('nummer1'), stop('nummer2'), enz.
Zie javascript-theorieboek.

 

[DopaminSX]

css hunter jij wat ben je aardig en je blijft zo beleeft, ik moest dit gewoon even kwijt.
bedankt voor al je bijdragen. als hij het niet doet doe ik het maar (bedankt!!!!!)