Hyperlink in een tabel cell

Status
Niet open voor verdere reacties.

z-korkmaz

Gebruiker
Lid geworden
29 sep 2006
Berichten
7
ey mensen ik ben bezig met een website bouwen ik ben ver gekomen maar nu een vraag als ik hyperlink dan wil ik dat de target in een cel van een tabel komt

ik heb 1 tabel en 2 cellen (navigatie, content)

alleen ik wil nu dat alle tekst dat als je op een hyperlink klikt in content komt te staan. hoe doe ik dit met tabellen :).

bedankt, z-korkmaz
 
Ik lezen, lezen, maar kan er geen touw aan vastknopen.

Je hebt een site, dus meerdere pagina's
dus ook linken naar de pagina's
dus klikken op een link levert een andere pagina met andere inhoud.

Zo zou het moeten zijn, maar wat is nu het probleem, of je wens op dit gebied/

:cool:
 
ehm :P volgens mij begrijp je mij niet echt ^^

ik heb kennis met het maken van websites alleen als je nu naar mn site gaat (www.z-korkmaz.nl) en dan ben je op index.html en dan klik je op informatie in navigatie menu en dan opent die ergens anders, mijn vraag is nu hoe kan ik doen dat die in dat andere cel opent. met iframe enz. is het wel makkelijk maar in dit geval gebruik ik een tabel. En ik wil geen iframe. Dit moet gebeuren met een tabel waarna ik een hyperlink verwijst naar die 2e cel. Hopelijk begrijp je t nu :)
 
Inderdaad ik snap het niet.
Maar waar zijn je pagina's dan?

Linker werken nu niet.

Als je gewoon een template maakt ben je klaar.
Nieuwe inhoud in template, save as en de volgende pagina.

IEDERE PAGINA is dus hetzelfde behalve de content.

:cool:
 
ja maar dat wil ik juist niet, terwijl het makkelijk kan ga ik niet moeilijk doen ;)

ik had iets gelezen over een cel een naam geven en daar naar linken ja maar ja ik weet niet hoe dat moet :(
 
ja maar dat wil ik juist niet, terwijl het makkelijk kan ga ik niet moeilijk doen ;)

ik had iets gelezen over een cel een naam geven en daar naar linken ja maar ja ik weet niet hoe dat moet :(

Het is eerder moelijk doen, dan de normale weg bewandelen.
Waar heb je dat gelezen?

Wat wel kan zie je hier in de code:
PHP:
<!doctype html public "-//w3c//dtd html 3.2//en">


<html>

<head>
<title>(Type a title for your page here)</title>
<!--This page created on Monday, July 16, 2001 13:37:54 -->

<META name="description" content="starting with arachnophilia the html editor">
<META name="keywords" content="arachno, html, updat, email, content, starting, homepage">
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="Author" content="Peter Vazed">
<META name="robots" content="index, follow">
<META name="revisit" content="7 days">

<STYLE TYPE="text/css">
<!--
A:link      { text-decoration: none; color: #000000 }
A:visited   { text-decoration: none; color: #990000 }
A:active    { text-decoration: none; color: #0000FF }
A:hover     { text-decoration: underline; color: #FF0000 }

.klgrn {background-color: #669999;}
.klgl {background color: #FFCC00;}
.info {font-family:verdana, tahoma, arial, ms sans serif;font-size:29;}
BODY {     scrollbar-3d-light-color:#FFFFFF;
           scrollbar-arrow-color:#FFFF33;
           scrollbar-base-color:#e39be3;
           scrollbar-dark-shadow-color:#333333;
           scrollbar-face-color:#a40616;
           scrollbar-highlight-color:#999999;
           scrollbar-shadow-color:#cec553}
-->
</STYLE>


<!-- cross-browser link display dynamically from mouseover a link 
--> 
<STYLE> 
.EVNTcls {visibility:hidden;position:absolute;top:80;left:250;font-size:20px} 
a:hover {color:white;background-color:blue} /* Netscrap will ignore this */ 
</STYLE> 
<SCRIPT language="JavaScript"> 
<!-- 
var ACTIVElist=false; 
// browser detection using DOM detection: 

if (document.getElementById) 
{ 
var LoLev=false; 
var HiLev=true; 
var IE5=(document.all) ? true : false; 
var NS6=(!document.all) ? true : false; 
} 
else 
{ 
var HiLev=false; 
var LoLev=true; 
var IE4=(document.all) ? true : false; 
var NS4=(document.layers) ? true : false; 
} 

function ShowBlock(EL) 
{ 
if (NS4) 
{ 
ACTIVElist=document.layers[EL]; 
} 
else 
{ 
if (IE4) 
{ 
ACTIVElist=document.all[EL].style; 
} 
else 
{ 
if (HiLev) 
{ 
ACTIVElist=document.getElementById(EL).style; 
} 
} 
} 
ACTIVElist.visibility="visible"; 
} 
//--> 
</SCRIPT> 
</HEAD> 
<!-- the onLoad event triggers the browser detection 
so we don't have to deal with it all over the place 
--> 

<BODY> 

<DIV ID="linklst" STYLE=position:absolute;left:40;top:80"> 
<A HREF="#" onMouseOver="ShowBlock('id1')" 
onMouseOut="ACTIVElist.visibility='hidden'"> Home 
</A><BR><BR> 
<A HREF="#" onMouseOver="ShowBlock('id2');" 
onMouseOut="ACTIVElist.visibility='hidden'"> escort RS 
</A><BR><BR> 
<A HREF="#" onMouseOver="ShowBlock('id3')" 
onMouseOut="ACTIVElist.visibility='hidden'"> escort cabrio</A><BR><BR> 
<A HREF="#" onMouseOver="ShowBlock('id4')" 
onMouseOut="ACTIVElist.visibility='hidden'"> VW T3
</A><BR><BR> 
</DIV> 

<DIV ID="id1" CLASS="EVNTcls" 
STYLE="position:absolute;left:250;top:80;width:650px;height:400px;background-color:#ff0000;z-index:-1;padding:20px;"> 

 <span class="info">home </span><BR><br>

 <span class="klgrn">1 welkom op deze site </span><BR><br>
<div class="klgl">another try to design</div><BR>Dit is een één pagina site.<br>
Werkt met "hide" van divs.<br>Om een welkom te hebben is met z-index gewerkt voor het verbergen van deze eerste aanblik.

</DIV> 
<!-- each list in in its own layer with only one visibile at a time 
--> 
<DIV ID="id2" CLASS="EVNTcls" 
STYLE="position:absolute;left:250;top:80;width:650px;height:400px;background-color:#fff000;z-index:-2;padding:20px;"> 

ESCORT RS 1987<BR> 
CVH motor<BR><img src="http://people.zeelandnet.nl/vazed/vwbus/esc-rsi-re2-kl.jpg" width="600" height="350" alt=""><br>

Met Bosch KE-Jetronics injectiesysteem 
</DIV> 
<DIV ID="id3" CLASS="EVNTcls" 
STYLE="position:absolute;left:250;top:80;width:650px;height:400px;background-color:#ffff00;z-index:-3;padding:20px;"> 
Escort XR3<i>i</i> Cabrio 1988<BR> 
120 PK<BR><BR>
<img src="http://people.zeelandnet.nl/vazed/vwbus/esc-cab-zijkant-kl.jpg" width="600" height="350" alt=""><BR> 
</DIV> 
<DIV ID="id4" CLASS="EVNTcls" 
STYLE="position:absolute;left:250;top:80;width:650px;height:400px;background-color:#ff0ff0;z-index:-4;padding:20px;"> 
Volkswagenbus type T3<BR><img src="http://people.zeelandnet.nl/vazed/vwbus/vw-t3-1984-kl.jpg" width="600" height="350" alt="">
Bouwjaar 1984<BR></DIV> 
<DIV ID="id5" STYLE="position:absolute;left:250;top:80;width:650px;height:400px;background-color:#ff00f0;z-index:-5;padding:20px;"> 
home<BR>
welkom op deze site<BR>another try to design<BR>etc 
</DIV> 
</BODY> 
</HTML>

:cool:

/// edit
of het werkt onder alle browsers weet ik niet, zou je moeten testen, maar vermits je html en CSS kennis hebt zal dat wel lukken.
 
Laatst bewerkt:
ok ik snap wel WAT van css en html maar deze code snap ik de helft echt niet :O
 
Als je dit
div show hide how-to
in de googledoos gooit krijg je
Resultaten 1 - 10 van circa 3.620.000 voor div show hide how-to

niet dat het allemaal correct is ivm wat je zoekt, doch dit script is er eentje wat werkt onder iE en FF. :)

PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

<!--  over het doctype http://www.w3.org/TR/html401/sgml/dtd.html -->


<html>
	
	<head>
		<title>
			Onr Page content site
		</title>
		<!--This page created on Monday, July 16, 2001 13:37:54 -->
		
		<META name="description" content="starting with arachnophilia the html editor">
		<META name="keywords" content="arachno, html, updat, email, content, starting, homepage">
		<meta name="GENERATOR" content="Arachnophilia 4.0">
		<meta name="FORMATTER" content="Arachnophilia 4.0">
		<meta name="Author" content="Peter Vazed">
		<META name="robots" content="index, follow">
		<META name="revisit" content="7 days">
		
<STYLE TYPE="text/css">
<!--
A:link      { text-decoration: none; color: #000000 }
A:visited   { text-decoration: none; color: #990000 }
A:active    { text-decoration: none; color: #0000FF }
A:hover     { text-decoration: underline; color: #FF0000 }

.klgrn {background-color: #669999;}
.klgl {background color: #FFCC00;}
.info {font-family:verdana, tahoma, arial, ms sans serif;font-size:29;}
BODY {     scrollbar-3d-light-color:#FFFFFF;
           scrollbar-arrow-color:#FFFF33;
           scrollbar-base-color:#e39be3;
           scrollbar-dark-shadow-color:#333333;
           scrollbar-face-color:#a40616;
           scrollbar-highlight-color:#999999;
           scrollbar-shadow-color:#cec553}
-->
</STYLE>
		

		 
<STYLE TYPE="text/css"> 
.tab_hover {
background-color:blue;
color:white;
cursor:pointer;
width:137px;
height:25px;
background-image:url(./images/ltab_blue.gif);
border:1px solid #ffff00;
text-align:center;
font-family:verdana;
font-size:13px;
font-weight:bold;
padding:3px;
}
.tab {
background-color:#0000a0;
color:#ffffff;
cursor:pointer;
width:137px;
height:20px;
background-image:url(./images/ltab_blue2.gif);
border:1px solid #ffff00;
text-align:center;
font-family:verdana;
font-size:13px;
font-weight:none;
padding:3px;
}
.data_tab {
border:1px solid #ff0000;
width:680px;
height:100px;
text-align:left;
font-family:verdana;
font-size:12px;
padding:20px;
}
</STYLE>
		 
<script type="text/javascript" language="JavaScript">
<!--

last_tab = 'tab1';
function show(layerName) {
document.getElementById(layerName).style.display = '';
}

function hide(layerName) {
document.getElementById(layerName).style.display = 'none';
}
function show_next(tab_name) {
document.getElementById(last_tab).className = 'tab';
var curr = document.getElementById(tab_name);
curr.className='tab_hover';
hide(last_tab+'_data');
show(tab_name+'_data');
last_tab=tab_name;
}//-->
</script>
		
	</HEAD>
	 
	
	
	<BODY>
	<table width="95%" align="center">
<tr><td  valign="top" width="200">
		<table cellpadding="0" cellspacing="0" border="1">
			<tr>
				<td id="tab1" class="tab_hover" onclick="javascript:show_next('tab1')">
		
	escort rsi				</td></tr><tr>				<td id="tab2" class="tab" onclick="javascript:show_next('tab2')">
					escort cabrio XR3i
				</td></tr><tr>
				<td id="tab3" class="tab" onclick="javascript:show_next('tab3')">
					Volkswagenbus T3
				</td>
			</tr>
		</table>
		</td><td valign="top">
		<table width="50%" border="0" cellspacing="0" cellpadding="0" class="data_tab">
			<tr>
				<td valign="top" width="100%" >
					<div id=tab1_data>
						ESCORT RS 1987			 
			CVH motor
						<BR>
						<img src="http://people.zeelandnet.nl/vazed/vwbus/esc-rsi-re2-kl.jpg" width="600" height="350" alt="">
						<br>Met Bosch KE-Jetronics injectiesysteem 
					
					</div>
					<div id=tab2_data style='display:none'>
					Escort XR3
						<i>
							i
						</i>
						 Cabrio 1988
						<br>

						 
						120 PK
					
						<BR>
						<img src="http://people.zeelandnet.nl/vazed/vwbus/esc-cab-zijkant-kl.jpg" width="600" height="350" alt="">
						<BR>
					</div>
					<div id=tab3_data style='display:none'>
						
						Volkswagenbus type T3
						<BR>
						<img src="http://people.zeelandnet.nl/vazed/vwbus/vw-t3-1984-kl.jpg" width="600" height="350" alt=""><br>
<br>

						Bouwjaar 1984
						<BR>
					</div>
				</td>
			</tr>
		</table>
		</td></tr></table>
		Dit script komt van <a href="http://www.aliroman.com/article/how-to-create-web-tabs-with-javascript-show-hide-layers-34-1.html">hier</a>, aanpassen naar wens.<br>

		Kan dus in een tabel als hier getoond,<br>
Maar het kan ook met buttons aangestuurd worden<br>		
		<input type=button onclick="javascript:show_next('tab1')" value='Escort RSi'>
		<input type=button onclick="javascript:show_next('tab2')" value='Escort XR3i'>
		<input type=button onclick="javascript:show_next('tab3')" value='Volkswagenbus'>
	</BODY>
	 
</HTML>

:mad:
kun je even doorlopen en aanpassen :thumb:
:cool:
 
hmm thnx maar dit is wel met 2 tabellen man :rolleyes:
en ik heb 1 tabel :p

ik wil geen 2 tabellen gebruiken er moet tog wel een manier zijn:mad:

maarjah ik zal dan verder zoeken enz.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan