frame

Status
Niet open voor verdere reacties.

knoet

Gebruiker
Lid geworden
20 okt 2006
Berichten
127
ik werk met frames (dus bovenaan menu en onderaan de hoofdpagina) als ik klik op iets in het menu opent het het in de hoofdpagina en graag zou ik dan hebben dat dat 'iets' in de menu een afbeelding ernaast krijgt, zodat je ziet op welke pagina je zit (vb: in menu: foto's, foto's worden geopend in hoofdpagina en naast het woord 'foto's' komt dan die afbeelding in het menu)
weet iemand hoe dit moet?
 
dus je wilt dat allebei de frames herladen en een nieuwe pagina openen (boven met een plaatje en text erbij, en onder met de inhoud)?
 
je zal als je alleen met html werkt voor elke mogelijkheid een ander pagina moeten maken.

Om die apparte pagina's aan te roepen kan je de volgende dingen doen:
  • Je kan een link meerdere frames laten vernieuwen, maar dan moet je wat dingen met javascript gaan doen volgens mij.
  • Een andere manier is gewoon de hele pagina (die de frames laad) telkens veranderen zodat die in de frames de andere pagina's laad.
Wat nog veel werk zou kunnen schelen bij het maken van de apparte pagina's is gebruik maken van een dynamische taal zoals php.
 
Misschien is het trouwens ook mogelijk om met een javascript functie te maken die de plaatjes verstopt en weer toont met behulp van div's.
 
Misschien is het trouwens ook mogelijk om met een javascript functie te maken die de plaatjes verstopt en weer toont met behulp van div's.

met javascript kan ik niet werken
ik zou anders ipv een afbeelding te laten verschijnen het woord (in menu) vet laten worden, hoe doe je dat dan?
 
ook bij het vetmaken moet je vrees ik nog steeds een nieuwe pagina laden.

Ik heb al wel ergens een scriptje staan waarmee je dingen kan laten verdwijen en verschijnen. Als je de menu namen geeft kan ik wel effe kijken wat ik voor je kan doen.
 
ook bij het vetmaken moet je vrees ik nog steeds een nieuwe pagina laden.

Ik heb al wel ergens een scriptje staan waarmee je dingen kan laten verdwijen en verschijnen. Als je de menu namen geeft kan ik wel effe kijken wat ik voor je kan doen.

Startpagina
Home
Personeel
Producten -> heeft submenu, de afbeelding zou dan moeten verdwijnen en op 1 vd namen van de submenu dan komen
Openingsuren
Contact

-> dit zou de afbeelding moeten zijn

-> zo ziet mijn menu er nu uit, de afbeelding zou er dan voor moeten verschijnen
 
Startpagina
Home
Personeel
Producten -> heeft submenu, de afbeelding zou dan moeten verdwijnen en op 1 vd namen van de submenu dan komen
Openingsuren
Contact

-> dit zou de afbeelding moeten zijn

-> zo ziet mijn menu er nu uit, de afbeelding zou er dan voor moeten verschijnen

ik kan vrees ik niet op jouw F schijf kijken :P Zet de plaatjes even op een site zoals http://photobucket.com. Je kan daar gratis je plaatjes neer zetten zodat iedereen ze kan zien.
 
de functie zal er ongeveer zo uit zien:

PHP:
<style type="text/css">
#pic_start {
display: block;
}
#pic_home {
display: none;
}
#pic_personeel {
display: none;
}
#pic_producten {
display: none;
}
#pic_openingsuren {
display: none;
}
#pic_contact {
display: none;
}
</style>
<script type="text/javascript"> 
<!-- 
function set_pic(zap){
  
   var abra = document.getElementById('pic_start').style;
    if (abra.display != "none") {
    abra.display = "none";
    } 
   
    var abra = document.getElementById('pic_home').style;
    if (abra.display != "none") {
    abra.display = "none";
    }
    
    var abra = document.getElementById('pic_personeel').style;
    if (abra.display != "none") {
    abra.display = "none";
    } 
   
    var abra = document.getElementById('pic_producten').style;
    if (abra.display != "none") {
    abra.display = "none";
    } 
    
    var abra = document.getElementById('pic_openingsuren').style;
    if (abra.display != "none") {
    abra.display = "none";
    }   
     var abra = document.getElementById('pic_contact').style;
    if (abra.display != "none") {
    abra.display = "none";
    }
      var abra = document.getElementById(zap).style;
    if (abra.display != "block") {
    abra.display = "block";
    }
}
//--> 
</script>

Alleen nu moeten er nog wat dingen in het html gedeelte gevoegd worden. Wat heb je qua html tot nu toe?
 
html><head><img src="logo1.jpg" height=100 width=100> <img src="F-TeC.jpg" height=85 width=294></head>
<BR>
<HR ALIGN=right SIZE=10 color="DDD8D2">

<body bgcolor="B8E1E3" alink="000000" vlink="000000" ulink="000000">
<font face="arial">


<table border="0">
<tr>
<td> DATUM
</td>

<td>
<font color="black">
&nbsp; &nbsp; | &nbsp; &nbsp;
<a href="beginpagina.html" STYLE="text-decoration:none" target="_top"> Startpagina </a> &nbsp; &nbsp; | &nbsp; &nbsp;
<a href="welkom ned.html" target="hoofdpagina" STYLE="text-decoration:none"> Home </a> &nbsp; &nbsp; | &nbsp; &nbsp;
<a href="personeel ned.html" target="hoofdpagina" STYLE="text-decoration:none"> Personeel </a> &nbsp; &nbsp; | &nbsp; &nbsp;
<a href="frame producten ned.html" target="hoofdpagina" STYLE="text-decoration:none"> Producten </a> &nbsp; &nbsp; | &nbsp; &nbsp;
<a href="openingsuren ned.html" target="hoofdpagina" STYLE="text-decoration:none"> Openingsuren </a> &nbsp; &nbsp; | &nbsp; &nbsp;
<a href="contact ned.html" target="hoofdpagina" STYLE="text-decoration:none"> Contact</a> &nbsp; &nbsp; &nbsp; &nbsp;


</font>
</td>
</tr>
</table>


</font>


</body>


</html>
 
Laatst bewerkt:
kan ik zomaar met php in html werken?
en waar moet ik de html aanpassen die ik al heb?
 
Laatst bewerkt:
kan ik zomaar met php in html werken?
en waar moet ik de html aanpassen die ik al heb?

nee, php een een serverside taal. Het kost in een het begin een beetje moeitje, maar het kan je later heel veel opleveren (qua tijd en hoe je site werkt).

maar terug naar de code, ik heb er het volgende van gemaakt:

PHP:
<html>
<head>
<style type="text/css">
#pic_start {
display: inline;
}
#pic_home {
display: none;
}
#pic_personeel {
display: none;
}
#pic_producten {
display: none;
}
#pic_openingsuren {
display: none;
}
#pic_contact {
display: none;
}
</style>
<script type="text/javascript"> 
<!-- 
function set_pic(zap){
  
   var abra = document.getElementById('pic_start').style;
    if (abra.display != "none") {
    abra.display = "none";
    } 
   
    var abra = document.getElementById('pic_home').style;
    if (abra.display != "none") {
    abra.display = "none";
    }
    
    var abra = document.getElementById('pic_personeel').style;
    if (abra.display != "none") {
    abra.display = "none";
    } 
   
    var abra = document.getElementById('pic_producten').style;
    if (abra.display != "none") {
    abra.display = "none";
    } 
    
    var abra = document.getElementById('pic_openingsuren').style;
    if (abra.display != "none") {
    abra.display = "none";
    }   
     var abra = document.getElementById('pic_contact').style;
    if (abra.display != "none") {
    abra.display = "none";
    }
      var abra = document.getElementById(zap).style;
    if (abra.display != "inline") {
    abra.display = "inline";
    }
}
//-->  
</script>
</head><img src="logo1.jpg" height=100 width=100> <img src="F-TeC.jpg" height=85 width=294>
<BR>
<HR ALIGN=right SIZE=10 color="DDD8D2"> 

<body bgcolor="B8E1E3" alink="000000" vlink="000000" ulink="000000">
<font face="arial">


<table border="0">
<tr>
<td>
<p align="center"><script language="JavaScript">

var Today=new Date();

var ThisDay=Today.getDay();

var ThisDate=Today.getDate();

var ThisMonth=Today.getMonth()+1;

var ThisYear=Today.getFullYear(); 

function DayTxt (DayNumber) {

var Day=new Array();

Day[0]="<font size=3 >"+"Zondag"+"</font>";

Day[1]="<font size=3 >"+"Maandag"+"</font>";

Day[2]="<font size=3 >"+"Dinsdag"+"</font>";

Day[3]="<font size=3 >"+"Woensdag"+"</font>";

Day[4]="<font size=3 >"+"Donderdag"+"</font>";

Day[5]="<font size=3 >"+"Vrijdag"+"</font>";

Day[6]="<font size=3 >"+"Zaterdag"+"</font>";

return Day[DayNumber];

}

var DayName=DayTxt(ThisDay);

function MonthTxt (MonthNumber) {

var Month=new Array();

Month[1]="<font size=3 >"+"januari"+"</font>";

Month[2]="<font size=3 >"+"februari"+"</font>";

Month[3]="<font size=3 >"+"maart"+"</font>";

Month[4]="<font size=3 >"+"april"+"</font>";

Month[5]="<font size=3 >"+"mei"+"</font>";

Month[6]="<font size=3 >"+"juni"+"</font>";

Month[7]="<font size=3 >"+"juli"+"</font>";

Month[8]="<font size=3 >"+"augustus"+"</font>";

Month[9]="<font size=3 >"+"september"+"</font>";

Month[10]="<font size=3 >"+"oktober"+"</font>";

Month[11]="<font size=3 >"+"november"+"</font>";

Month[12]="<font size=3 >"+"december"+"</font>";

return Month[MonthNumber];
}
var MonthName=MonthTxt(ThisMonth);
var d = new Date();
var h = d.getHours();
document.write("<TABLE BORDER=0 <br> <BGCOLOR=#99FF00 WIDTH=75 HEIGHT=55 align=center color=#99FF00> "+"<TD>"+"<p align=center>"+"<font size=3 >"+DayName+" "+ThisDate+" "+MonthName+" "+2008+" <br>"+"</b>"+"</font>"+"</p>"+"</TD>"+"</TR>"+"</TABLE>");

</script></td>

<td> 
<font color="black">
&nbsp; &nbsp; | &nbsp; &nbsp;
<a href="beginpagina.html" STYLE="text-decoration:none" target="_top" onclick="set_pic('pic_start')"> Startpagina </a> <img id="pic_start" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp; 
<a href="welkom ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_home')"> Home </a><img id="pic_home" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp; 
<a href="personeel ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_personeel')"> Personeel </a><img id="pic_personeel" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp; 
<a href="frame producten ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_producten')"> Producten </a><img id="pic_producten" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp; 
<a href="openingsuren ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_openingsuren')"> Openingsuren </a><img id="pic_openingsuren" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp; 
<a href="contact ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_contact')"> Contact</a><img id="pic_contact" src='dkslfj'> &nbsp; &nbsp; &nbsp; &nbsp; 


</font>
</td>
</tr>
</table>


</font>


</body>


</html>

Je moet zelf nog even de plaatjes invullen en controleren of alle html nog klopt (ik heb wat dingen vereenvoudigt tijden het maken van het scriptje, en ik kan vergeten zijn sommige dingen terug te zetten :P)
 
verander:
PHP:
<img id="pic_start" src='dkslfj'>

in:
PHP:
<img id="pic_start" src='waar/het/plaatje/staat.jpg'>

etc...

:D
 
bijna helemaal onderaan in dit stuk (telkens achteraan de regel):

PHP:
td>  
<font color="black"> 
&nbsp; &nbsp; | &nbsp; &nbsp; 
<a href="beginpagina.html" STYLE="text-decoration:none" target="_top" onclick="set_pic('pic_start')"> Startpagina </a> <img id="pic_start" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp;  
<a href="welkom ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_home')"> Home </a><img id="pic_home" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp;  
<a href="personeel ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_personeel')"> Personeel </a><img id="pic_personeel" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp;  
<a href="frame producten ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_producten')"> Producten </a><img id="pic_producten" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp;  
<a href="openingsuren ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_openingsuren')"> Openingsuren </a><img id="pic_openingsuren" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp;  
<a href="contact ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_contact')"> Contact</a><img id="pic_contact" src='dkslfj'> &nbsp; &nbsp; &nbsp; &nbsp;
 
HTML:
<html> 
<head> 
<style type="text/css"> 
<img id="pic_start" src='muis in menu1.bmp'> { 
display: inline; 
} 
#pic_home { 
display: none; 
} 
#pic_personeel { 
display: none; 
} 
#pic_producten { 
display: none; 
} 
#pic_openingsuren { 
display: none; 
} 
#pic_contact { 
display: none; 
} 
</style> 
<script type="text/javascript">  
<!--  
function set_pic(zap){ 
   
   var abra = document.getElementById('pic_start').style; 
    if (abra.display != "none") { 
    abra.display = "none"; 
    }  
    
    var abra = document.getElementById('pic_home').style; 
    if (abra.display != "none") { 
    abra.display = "none"; 
    } 
     
    var abra = document.getElementById('pic_personeel').style; 
    if (abra.display != "none") { 
    abra.display = "none"; 
    }  
    
    var abra = document.getElementById('pic_producten').style; 
    if (abra.display != "none") { 
    abra.display = "none"; 
    }  
     
    var abra = document.getElementById('pic_openingsuren').style; 
    if (abra.display != "none") { 
    abra.display = "none"; 
    }    
     var abra = document.getElementById('pic_contact').style; 
    if (abra.display != "none") { 
    abra.display = "none"; 
    } 
      var abra = document.getElementById(zap).style; 
    if (abra.display != "inline") { 
    abra.display = "inline"; 
    } 
} 
//-->   
</script> 
</head><img src="logo1.jpg" height=100 width=100> <img src="F-TeC.jpg" height=85 width=294> 
<BR> 
<HR ALIGN=right SIZE=10 color="DDD8D2">  

<body bgcolor="B8E1E3" alink="000000" vlink="000000" ulink="000000"> 
<font face="arial"> 


<table border="0"> 
<tr> 
<td> 
<p align="center"><script language="JavaScript"> 

var Today=new Date(); 

var ThisDay=Today.getDay(); 

var ThisDate=Today.getDate(); 

var ThisMonth=Today.getMonth()+1; 

var ThisYear=Today.getFullYear();  

function DayTxt (DayNumber) { 

var Day=new Array(); 

Day[0]="<font size=3 >"+"Zondag"+"</font>"; 

Day[1]="<font size=3 >"+"Maandag"+"</font>"; 

Day[2]="<font size=3 >"+"Dinsdag"+"</font>"; 

Day[3]="<font size=3 >"+"Woensdag"+"</font>"; 

Day[4]="<font size=3 >"+"Donderdag"+"</font>"; 

Day[5]="<font size=3 >"+"Vrijdag"+"</font>"; 

Day[6]="<font size=3 >"+"Zaterdag"+"</font>"; 

return Day[DayNumber]; 

} 

var DayName=DayTxt(ThisDay); 

function MonthTxt (MonthNumber) { 

var Month=new Array(); 

Month[1]="<font size=3 >"+"januari"+"</font>"; 

Month[2]="<font size=3 >"+"februari"+"</font>"; 

Month[3]="<font size=3 >"+"maart"+"</font>"; 

Month[4]="<font size=3 >"+"april"+"</font>"; 

Month[5]="<font size=3 >"+"mei"+"</font>"; 

Month[6]="<font size=3 >"+"juni"+"</font>"; 

Month[7]="<font size=3 >"+"juli"+"</font>"; 

Month[8]="<font size=3 >"+"augustus"+"</font>"; 

Month[9]="<font size=3 >"+"september"+"</font>"; 

Month[10]="<font size=3 >"+"oktober"+"</font>"; 

Month[11]="<font size=3 >"+"november"+"</font>"; 

Month[12]="<font size=3 >"+"december"+"</font>"; 

return Month[MonthNumber]; 
} 
var MonthName=MonthTxt(ThisMonth); 
var d = new Date(); 
var h = d.getHours(); 
document.write("<TABLE BORDER=0 <br> <BGCOLOR=#99FF00 WIDTH=75 HEIGHT=55 align=center color=#99FF00> "+"<TD>"+"<p align=center>"+"<font size=3 >"+DayName+" "+ThisDate+" "+MonthName+" "+2008+" <br>"+"</b>"+"</font>"+"</p>"+"</TD>"+"</TR>"+"</TABLE>"); 

</script></td> 

<td>   
<font color="black">  
&nbsp; &nbsp; | &nbsp; &nbsp;  
<a href="beginpagina.html" STYLE="text-decoration:none" target="_top" onclick="set_pic('pic_start')"> <b>S</b>tartpagina </a> <img id="pic_start" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp;   
<a href="welkom ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_home')"> <b>H</b>ome </a><img id="pic_home" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp;   
<a href="personeel ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_personeel')"> <b>P</b>ersoneel </a><img id="pic_personeel" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp;   
<a href="frame producten ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_producten')"> <b>P</b>roducten </a><img id="pic_producten" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp;   
<a href="openingsuren ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_openingsuren')"> <b>O</b>peningsuren </a><img id="pic_openingsuren" src='dkslfj'> &nbsp; &nbsp; | &nbsp; &nbsp;   
<a href="contact ned.html" target="hoofdpagina" STYLE="text-decoration:none" onclick="set_pic('pic_contact')"> <b>C</b>ontact</a><img id="pic_contact" src='dkslfj'> &nbsp; &nbsp; &nbsp; &nbsp; 


</font> 
</td> 
</tr> 
</table> 


</font>
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan