Achtergrond buiten IFrame veranderen

  • Onderwerp starter Onderwerp starter Matse
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
M

Matse

Gebruiker
Lid geworden
18 jul 2007
Berichten
42
Heey,

Ik heb dus op mijn website een iFrame.
Ik moet de website voor school maken en alle pagina's moeten binnen dat iFrame openen zodat de navigatie balk gewoon blijft staan buiten het iFrame.
Nu is mijn probleem dus dat de achtergrondkleur die buiten het iFrame staat altijd hetzelfde blijft.. omdat als je dus op een link klikt alleen de pagina binnen dat iFrame word ''ververst"
Nu is mijn vraag, kan ik de achtergrondkleur laten veranderen als er op een link geklikt word?
Dus je klikt op de link, binnen dat iFrame opent dan die pagina en de achtergrond buiten het iFrame veranderd ook.
Het word namelijk een website voor een reisbureau, waar wintervakanties en zomervakanties op staan, ik wil dus dat als je naar de pagina's met wintervakanties gaat, dat de achtergrond een beetje blauwig is en bij zomer juist weer geel/oranje.
Iemand een idee?
Bedankt!

(Ik werk met Adobe Dreamweaver CS4)
 
Laatst bewerkt:
Kun je hier wat mee?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Sunday, October 04, 2009 23:47:27 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  content="korte beschrijving van de pagina">
<meta name="keywords"  content="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" content="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css" media="all">
 @import url("zp.css"); 
</style>
		 
<LINK rel="stylesheet" type="text/css" href="zp.css">

 <style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #000;

}
</style>
    <script type="text/javascript">
        function changeBG(color){
            document.body.bgColor=color;
        }
    </script>
</head>

<body >
<a href="#" onclick="changeBG('red')" value="red">klik rood</a><br>

<input type="button" onclick="changeBG('red')" value="red"/>
    <input type="button" onclick="changeBG('blue')"  value="blue"/>
    <input type="button" onclick="changeBG('green')"  value="green"/>
    <input type="button" onclick="changeBG('#deebce')"  value="#deebce"/>
<br>
<br>

<a href="#" onClick="this.style.color='red'">Link Text</a>
</body>

</html>

:cool:
 
Verhipski! - Ik was tegelijkertijd ook aan het knutselen! :D
En dit wou ik zeggen:

Hoi Matse,
Ja, je kan de achtergrondkleur laten veranderen als er op een link geklikt wordt.
Dit kan niet met de gewone html-codes, maar wel met een klein stukje "javascript" (een opdrachten-taal die in webpagina's ingebouwd kan worden).
Dit werkt als volgt:
  • Je geeft het element dat van kleur moet veranderen een ID (persoonlijke IDentificatie-naam).
  • Als je ergens op klikt, kan je dit het javascript-commando onclick="... doe iets ..." geven.
  • Bij "... doe iets ..." gaan we hier dus vertellen dat de achtergrondkleur van het element met die ID moet veranderen.
  • Eerst moeten we dat element pakken: document.getElementById('naam van de ID').
  • En dan gaan we daarvan de Style-eigenschapppen gebruiken: document.getElementById('naam van de ID').style.
  • De style-eigenschap achtergrond heet ... background. Afhankelijk van de zomer- of winterkleur (of de home-pagina) krijgt die een kleurtje, bv. background="#FFFFC0" (lichtgeel).
Het complete script is:
HTML: 
<script type="text/javascript">
	function achtergrondKleur(i){
		var bodyStyle = document.getElementById('kleurwissel').style;
		bodyStyle.background = i ;
	}
</script>
Dit zet je in de <head> van je pagina. De "i" die in het script staat, betekent dat je daar in de verwijzing in dit geval een kleur kunt opgeven.
De verwijzing doe je als volgt:
HTML: 
<a href="zonnetje-zomer.htm" target="hetIframe" onclick="achtergrondKleur('#FFFFC0')">ZOMERVAKANTIES</a>
En de andere links naar het iframe op dezelfde manier. Tegelijkertijd met de klik waardoor het iframe verandert, verandert nu ook de achtergrond van de bestaande pagina.
Zie voor de détails de broncode van de testpagina. Hoe je dit met Dreamweaver in de design-mode moet doen, weet ik niet. Maar je kunt het in elk geval intikken in de code-weergave, denk ik.

Succes met je reisbureau-website!
CSShunter

[edit]Even Peter's tips bekeken; nou, dat is ook een mooi scala: je hebt nu keuze! :) [/edit]
 
Laatst bewerkt:
Heey.

Bedankt voor de snelle reacties.
CSSHunter,
ik snap hem nog niet helemaal,haha.
Zou je misschien naar mijn pagina kunnen kijken?
Ik gebruik namelijk ook een spry menu bar, dus het word nu allemaal net iets te ingewikkeld voor me.
Ik snap de code wel ongeveer, maar ik zal toch wel iets fout doen.
Dit is de pagina:

http://matzuh.zxq.net/Index3.html
 
Hoi Matse,
Ik zie dat je nu onderaan in je pagina heb staan:
HTML: 
(...)
<p class="asd"> Copyright 2009 Reisbureau &quot;Ga Lekker Reizen&quot;</p>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBalk",  ...(enz.)
//-->
</script>

</body>
<body>
<script type="text/javascript">
     function achtergrondKleur(i){
          var bodyStyle = document.getElementById('kleurwissel').style;
          bodyStyle.background = i ;
     }
</script>
</html>
</body>

<body Id="kleurwissel">
Dat gaat zo niet goed, want nu heb je een pagina met één <head> en drie <body>'s!
Maar om met het gedoe van de <body>-id af te zijn, heb ik een ander scriptje voor je, dat precies hetzelfde effect heeft.
Wat ga je doen? Je haalt eerst alles na het Spry-menu script weg.
En daarvoor in de plaats plak je dit:
HTML: 
<script type="text/javascript">
     function achtergrondKleur(i){
          document.getElementsByTagName('body')[0].style.background = i ;
     }
</script>
</body>
</html>
Dan komt er dus te staan:
HTML: 
(...)
<p class="asd"> Copyright 2009 Reisbureau &quot;Ga Lekker Reizen&quot;</p>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBalk",  ...(enz.)
//-->
</script>

<script type="text/javascript">
     function achtergrondKleur(i){
          document.getElementsByTagName('body')[0].style.background = i ;
     }
</script>
</body>
</html>
Nu gaan we de verwijzing in orde maken. Er staat bijvoorbeeld als link:
HTML: 
<li><a href="Zomervakanties.html" target="IFrame">Alle bestemmingen</a></li>
Hier moeten we vertellen dat er bij een klik (onclick="...") de functie "achtergrondKleur(i)" gebruikt moet worden, waarbij voor (i) de nieuwe achtergrondkleur ingevuld wordt, die tussen accentjes ('...') komt. Zo gaat het worden:
HTML: 
<li><a href="Zomervakanties.html" target="IFrame" onclick="achtergrondKleur('#FFFFC0')">Alle bestemmingen</a></li>
Hetzelfde kan je doen met de andere links die een andere achtergrondkleur moeten oproepen.
Gaat het zo lukken?

Met vriendelijke groet,
CSShunter
 
Jaa :D het werkt nu
bedankt voor de duidelijk uitleg!!! :D
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan