PDA

View Full Version : Can i add hyperlinks in each cell of my table?


chrisf2012
12-04-2012, 08:07 PM
I am an amateur at dreamweaver!
I currently have a table which displays names, and they shuffle.

I need to be able to add a hyperlink to each name, whilst keeping the shuffle feature. can anyone help me?

my code is below:

<html>

<head>

<!--***************
CSS section
****************-->

<style type="text/css">
body {
background:white; color:black;
font-family:Georgia, Times New Roman, Times, serif;
}
.tableItem {
position: relative;
background: #ffffdd;
color: rgb(255,0,0);
border: 1px solid black;
font-size : xx-large;
text-indent: 1em;
padding-right: 1em;
}
</style>

<!--***************
Javascript section
****************-->

<script language="javascript">


//
var names = new Array();
var offset = 0;
var numPlayers = 8;
var maxShuffle = numPlayers -1;

//
names[0] = {id:'Monet', pic:'flower0.png'};
names[1] = {id:'Renoir', pic:'flower1.png'};
names[2] = {id:'Manet', pic:'flower1.png'};
names[3] = {id:'Gaugin', pic:'flower1.png'};
names[4] = {id:'Cezanne', pic:'flower1.png'};
names[5] = {id:'Morisot', pic:'flower1.png'};
names[6] = {id:'Picasso', pic:'flower1.png'};
names[7] = {id:'Matisse', pic:'flower1.png'};



function initialise(){
for (i=0; i<numPlayers; i++) {
document.getElementById('cell_'+i).innerHTML = "<div class = \"tableItem\">"+names[i].id;
}
}



function changeText(){
offset++;
for (i=0; i<maxShuffle; i++) {
document.getElementById('cell_'+i).innerHTML = "<div class = \"tableItem\">"+names[(offset+i)%maxShuffle].id;
}
}
</script>

</head>

<body onLoad="initialise();">




<p>&nbsp;</p>
<table width="240" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td id="cell_0"><div class = "tableItem"> </div></td>
<td id="cell_6"><div class = "tableItem"> </div></td> </tr>
<tr>
<td id="cell_1"><div class = "tableItem"> </div></td>
<td id="cell_5"><div class = "tableItem"> </div></td> </tr>
<tr>
<td id="cell_2"><div class = "tableItem"> </div></td>
<td id="cell_4"><div class = "tableItem"> </div></td> </tr>
<tr>
<td id="cell_3"><div class = "tableItem"> </div></td>
<td id="cell_7"><div class = "tableItem"> </div></td> </tr>
</table>
<p>&nbsp;</p>


<a href="javascript:changeText()">Shuffle</a>
</body></html>

edbr
12-05-2012, 12:56 AM
you can do it in the js code see below you will need to edit the links (section in red)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>


<style type="text/css">
body {
background:white; color:black;
font-family:Georgia, Times New Roman, Times, serif;
}
.tableItem {
position: relative;
background: #ffffdd;
color: rgb(255,0,0);
border: 1px solid black;
font-size : xx-large;
text-indent: 1em;
padding-right: 1em;
}
</style>

<script language="javascript">


//
var names = new Array();
var offset = 0;
var numPlayers = 8;
var maxShuffle = numPlayers -1;

//
names[0] = {id:' <a href= "" >Monet</a>', pic:'flower0.png'};
names[1] = {id:'<a href= "" >Renoir</a>', pic:'flower1.png'};
names[2] = {id:'<a href= "" >Manet</a>', pic:'flower1.png'};
names[3] = {id:'<a href= "" >Gaugin</a>', pic:'flower1.png'};
names[4] = {id:'<a href= "" >Cezanne</a>', pic:'flower1.png'};
names[5] = {id:'<a href= "" >Morisot</a>', pic:'flower1.png'};
names[6] = {id:'<a href= "" >Picasso</a>', pic:'flower1.png'};
names[7] = {id:'<a href= "" >Matisse</a>', pic:'flower1.png'};



function initialise(){
for (i=0; i<numPlayers; i++) {
document.getElementById('cell_'+i).innerHTML = "<div class = \"tableItem\">"+names[i].id;
}
}



function changeText(){
offset++;
for (i=0; i<maxShuffle; i++) {
document.getElementById('cell_'+i).innerHTML = "<div class = \"tableItem\">"+names[(offset+i)%maxShuffle].id;
}
}
</script>

</head>

<body onLoad="initialise();">




<p>&nbsp;</p>
<table width="240" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td id="cell_0"><div class = "tableItem"> </div></td>
<td id="cell_6"><div class = "tableItem"> </div></td> </tr>
<tr>
<td id="cell_1"><div class = "tableItem"> </div></td>
<td id="cell_5"><div class = "tableItem"> </div></td> </tr>
<tr>
<td id="cell_2"><div class = "tableItem"> </div></td>
<td id="cell_4"><div class = "tableItem"> </div></td> </tr>
<tr>
<td id="cell_3"><div class = "tableItem"> </div></td>
<td id="cell_7"><div class = "tableItem"> </div></td> </tr>
</table>
<p>&nbsp;</p>


<a href="javascript:changeText()">Shuffle</a>
</body></html>
chrisf2012 is offline Add Infraction for chrisf2012 Report Post IP Edit/Delete Message

chrisf2012
12-05-2012, 01:57 AM
edbr, thank you so much! i was thinking of committing suicide trying to figure it out

edbr
12-05-2012, 03:55 AM
your welcome

Corrosive
12-06-2012, 06:42 AM
i was thinking of committing suicide trying to figure it out

Dude, it's only a website ;)