FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

JS vraagje.. Werkt dit?

   Frihost Forum Index -> Dutch -> Computers en Techniek
 


Gushe
Hallo iedereen! Smile
Ik ben zo een beetje bezig met JS te leren; en ik heb voor een site een soort van "Layout Changer" geschreven. Het is heel simpel; want het veranderd gewoon de achtergrondafbeelding van de site.


Het principe is zeer simpel:

- Ergens op de site komt er een Iframe met mini fotootjes van de Layouts
- Als je met je muis over die preview image gaat; veranderd de foto voor zolang je erop staat; wannneer je er terug af gaat kom je terug op de lay die je origineel had
- Wanneer je op de afbeelding klikt; veranderd het permanent Smile
- Er komen dus 2 afbeeldingen; en het moet vlot om de beurt gaan Smile


en ik heb hier dus iets voor proberen schrijven; dat er ongeveer als volgt uitziet:

Code:

<script type="text/javascript">

var emberlay = "http://i7.tinypic.com/82mx74j.jpg"
var desertlay = "http://i16.tinypic.com/82vhw00.jpg"

function DesertChange()
  {
  document.getElementById("Layout").src=desertlay
  }

function EmberChange()
  {
  document.getElementById("Layout").src=emberlay
  }


function OrigLay()
  {
   if (document.getElementById("Layout").src == emberlay)
   {
      DesertChange()
   }

   else
   {
   EmberChange()
   }
}
</script>


En dan moet je in je HTML het volgende toevoegen:

Code:

voeg id="layout" toe aan achtergrond image
voeg onclick="Desertchange()" toe aan lay thumb van deserter layout
voeg onMouseOver="Desertchange()" toe aan thumb van deserter layout
voeg onMouseOut="OrigLay()" toe aan thumb van deserter layout




Nu; ik weet niet zeker of dit allemaal werkt.. want dit is mijn eerste JavaScriptje Razz
Kan iemand mij hierbij helpen? Smile


en nog een vraagje; hoe zou ik deze Origlay moeten doen als ik bv 3 of 4 verschillende layouts heb? Smile



Ik hoop dat ik alles goed heb uitgelegd Smile En dat jullie snappen wat ik juist bedoel; anders vraag je het maar Wink


Thanx!
~Gushe
Gushe
Doh! :S
Ik heb zelf iets over het hoofd gezien :S

Als je nl nu klikt op de thumb veranderd het; maar als je je muis er dan weer afhaalt word het toch terug de originele :S

Kan er iemand mij helpen? Smile


Thanx!
~Gushe
Georgeboy
Mja, om ergens te beginnen kan ik je misschien eerst zeggen, dat je scriptje volgens mij niet zal werken in omgekeerde volgorde. Ik bedoel hiermee, wanneer je de achtergrond hebt ingesteld op desertlay en als je dan op de knop klikt om terug naar emberlay te keren zal dit volgens mij niet lukken, want je hebt het enkel voor desertlay geprogrammeerd. Je kunt volgens mij beter gewoon een algemene change maken waarbij je test wat het originele was. Nu dat eventjes ter zijde.

Waarom het niet lukt, weet ik niet met 100% zekerheid. Ik vermoed dat het zou kunnen zijn doordat je op een bepaald moment met een dubbele instructie werkt. Op hetzelfde moment voer je een change uit, terwijl je eigenlijk nog in de mousovertoestand zit. Ik zou het proberen als volgt op te lossen, nadat je gewijzigd hebt, zou ik een reload uitvoeren als volgt: window.location.reload(); Op dat moment zou je achtergrond gewijzigd moeten zijn en je pagina herladen, waardoor je muis eventueel weer op de knop kan staan.

Nu ook dit zal niet werken volgens mij. Wanneer je een pagina gaat herladen, wat wellicht automatisch zal gebeurd zijn, zal je pagina de oorspronkelijke html pagina terug van de server halen. Geen probleem denk je mss, je hebt het gewijzigd, maar vergeet dat maar snel. Je kunt als bezoeker geen html pagina's op de server wijzigen, dus je zult weer het origineel krijgen, waardoor je script niet lijkt te werken. Hoe op te lossen? Als je met javascript wilt werken, dan moet je, willen of niet, het best werken met cookies. Je zult online zeker wel wat voorbeelden vinden, maar met cookies zul je er ook voor zorgen dat de achtergrond ook bij een volgend bezoek, de laatst gekozen versie is. Dit zal natuurlijk wel wat meer programmeerwerk vragen, maar een hoop minder zorgen !!

Succes !!
Gushe
Oops Smile

Ik was wel nog vergeten om onclick=EmberChange() enz toe te voegen bij die HTML Smile

Mijn voornaamste zorg is eigenlijk dat met die onMouseOver..
Ik heb op een ander forum vernomen dat er een manier is om die zonder cookies te kunnen doen Smile Ik heb al veel gezocht; maar bener nog niet helemaal uit :S


~Gushe
Gushe
w00t! Very Happy
Kheb dus een geniaal idee! Smile (#4 vndaag al Razz)

Als ik nu het volgende kan doen:

Voor elke verschillende Layout een img tag maken, en dan kijken of ik onmouseover en onmouseout (op de thumbs) die images kan enabelen en disabelen Smile (als de pagina laadt zijn ze gedisabled, buiten de eerste layout) en als je dan klikt op de thumb veranderd de source van de originele image Smile Smile Smile

Maar.. Ik wee niet of ik goto's zo kan "disabelen" enz.. Razz
Toch vond ik het idee erachter al goed Very Happy


Of afgeleid van dit:

- Ik maak een tweede image tag (of 1 voor elke lay)
- Bij onmouseover en omouseout krijg(en)t die image tag(s) dan wel een source; nl de source vn 2e lay Smile
- Bij een klik op een prentje veranderd de source van de originele img tag en bij de onmouseout die daarop volgt gaat de source van de 2e gwn weg Very Happy Maar de eerste werkt Very Happy

Dit mss goed idee? Smile


~Gushe
Reply to topic    Frihost Forum Index -> Dutch -> Computers en Techniek

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.