Hey.

Right, so I've just paid a guy to design and code just the layout files, not the content, panels, etc.

I've coded a panel which will allow my staff to post news articles which will be displayed on the main website.

Adding, Editing, Deleting news and all the rest works 100% fine however it appears that the designer has coded the news displayer into a .JS (javascript) file. The news displayer looks like this:

^ This is what it looks like when you hover over one of the 3 news items shown on the right. The image (blue box) changes depending on which news item you hover over

This is what it looks like when you then hover over the image for that article:


The HTML:
Code:
		<div class="left">
			<div id="headline_image_box">
			<a href="#">
				<img name="imagename" src="_images/_headlines/1.png" alt="Description" />
					<span class="desc" id="description">
						<script type="text/javascript">writetext(firsttext)</script>
					</span>
			</a>
			</div>
		</div>
		<div class="middle">
			<a href="#">
				<div class="headline" onMouseover="document.imagename.src=image1.src, writeDesc(desc1)" onMouseout="document.imagename.src=image1.src">
					<strong>So far so good for Wiggins</strong><br />
					Team Sky's Bradley Wiggins says he's going from strength to strength at the Vuelta a Espana.
				</div>
			</a>
			<a href="#">
				<div class="headline" onMouseover="document.imagename.src=image2.src, writeDesc(desc2)" onMouseout="document.imagename.src=image2.src">
					<strong>Spurs locked in Cahill talks</strong><br />
					Bolton Wanderers and Tottenham Hotspur are locked in talks regarding a deal for Gary Cahill.				
				</div>
			</a>
			<a href="#">
				<div class="headline" onMouseover="document.imagename.src=image3.src, writeDesc(desc3)" onMouseout="document.imagename.src=image3.src">
					<strong>Santon set for medical</strong><br />
					Italy international Davide Santon has arrived in England to finalise a move to Newcastle United.
				</div>
			</a>
		</div>
The Javascript File:
Code:
if (document.images) {
	image1 = new Image
	image2 = new Image
	image3 = new Image

	image1.src = "_images/_headlines/1.png"
	image2.src = "_images/_headlines/2.png"
	image3.src = "_images/_headlines/3.png"
}

var desc1='<strong>13th AUG</strong>Description 1'
var desc2='<strong>12th AUG</strong>Description 2'
var desc3='<strong>11th AUG</strong>Description 3'

function writeDesc(what){
	document.getElementById('description').innerHTML=''+what+'';
}
Database Structure:
Code:
CREATE TABLE IF NOT EXISTS `news` (
  `id` int(2) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `author` varchar(100) NOT NULL,
  `category` varchar(100) NOT NULL,
  `article` varchar(50000) NOT NULL,
  `image` varchar(500) NOT NULL,
  `j` varchar(5) NOT NULL,
  `M` varchar(5) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
j = Date with letters on end. Eg. 4TH
M = 3 character form of month.
ALL details submit into database fine, that is not my issue.

My issue is that I want to get the latest three articles from the database and echo the values from the database into the javascript however this stuffs up the script completely.

I'm not very experienced with using Javascript & PHP together but I noticed something was wrong when I echoed it into the script.

Anyone with any ideas/suggestions it'd be very helpful and appreciated! I'd prefer not to have to change to a completely new script, so if you have a way to integrate the MySQL information into the Javascript it'd be great!